Micrometer.org

Bootstrap Panel Collapse

Intro

Very often we need to segregate a few small (or not so much) pieces of information in order to force them stand up and get the person's focus-- such as listing some handy features presenting a list of articles with a short abstract and a solitary powerful image and so on and on.

We need an efficient instrument to wonderfully cover our web content in a flexible and wonderful manner to have it favorable and neat presented on our pages. In the recent version of the most trendy mobile-friendly framework-- Bootstrap 3 we employed mostly the Bootstrap Panel Button, thumbnail and well elements providing us box containers with a faint border, slightly elliptical edges and finally-- a light 3d outcome. In the latest Bootstrap 4 framework, these are no longer. They get got upgraded altogether by the card item declaring to be worthy of nearly everything the previous features could do but basically much better. It's the right moment to get to learn it more thoroughly.

Techniques to employ the Bootstrap Panel Default:

The cards are delicately styled boxes efficient in holding almost any HTML content in them in addition featuring a lot of predefined styling choice for properly showing its article. It in addition optionally could have a footer and a header.

To create a card we first need a

.card
element to wrap the entire element up. Inside it separate covers for the header
.card-header
, the real card content
.card-block
and the footer
.card-footer
shall take place and while the header and footer are quite optional and can be omitted if you don't require them the
.card-block
is the essential part-- it nicely wraps your content giving some subtle padding near.

In the

.card-block
item you could have a headline having the class
.card-title
which can be added to the
h1-- h6
sections as well as to a normal
<div>
and fo course -- come text wrapped in a paragraph with the
.card-text
class. If you choose to place some hyperlinks as well-- assign them the
.card-link
class to get them correctly sorted for better user interaction.

As mentioned above the

.card-block
comes to wrap the content remaining a pretty padding around it. However the moment it comes to pictures this might want to avoid this and get the picture spread the whole width of the item.

To have this look simply put the

<div class="img"><img></div>
tag outside the
.card-block
thus you prevent the paddings eventually adding
style=" width:100%;"
making certain it will resize properly always filling in its container.

There are some quite useful alignment classes additionally such as

.card-img-top
and
.card-img-bottom
aligning the image at the top or the bottom of the card. And if you desire to put it somewhere in between the text just break the
.card-block
, insert the image and start a new
.card-block
to insert the content you require placed right after the image-- numerous card blocks are supported. Eventually you might also wish to include some text message on top of the picture-- wrap it in a
<div>
carrying the
.img-overlay
class.

A few words regarding the design-- cards will fill the whole horizontal space available by default so it's a great idea restricting this by placing them in some grid elements. By doing this you can achieve their expected behavior. ( useful content)

Some case

Cards are designed with as little markup and styles as possible, but still operate to deliver a ton of management and modification. Created using flexbox, they offer easy placement and mix well with other Bootstrap elements.

Beneath is a sample of a simple card with mixed content and a set width. Cards have no preset width to start, so they'll typically fill the whole width of its parent section. This is effortlessly individualized with various sizing options.

 For example

<div class="card" style="width: 20rem;">
  <div class="img"><img class="card-img-top" src="..." alt="Card picture caption"></div>
  <div class="card-block">
    <h4 class="card-title">Card caption</h4>
    <p class="card-text">Some fast sample message to build on the card title as well as compose the bulk of the card's material.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

Web subject sorts

Cards support a broad assortment of content, including images, text message, list collections, urls, and more. Listed below are illustrations of what's supported.

Blocks

The building block of a card is the

.card-block
Use it when you need a padded area within a card.

Blocks
<div class="card">
  <div class="card-block">
    This is some message in a card block.
  </div>
</div>

Names, message, and web links

 Names, text, and {links| web links| hyperlinks| urls
<div class="card">
  <div class="card-block">
    <h4 class="card-title">Card title</h4>
    <h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
    <p class="card-text">Some fast example message to improve the card title and compose the mass of the card's content.</p>
    <a href="#" class="card-link">Card link</a>
    <a href="#" class="card-link">Another link</a>
  </div>
</div>

Images

.card-img-top
puts a pic to the very top of the card. With
.card-text
, text may be included in the card. Text within
.card-text
may also be styled with the standard HTML tags.

 Pics

<div class="card">
  <div class="img"><img class="card-img-top" src="..." alt="Card picture cap"></div>
  <div class="card-block">
    <p class="card-text">Some fast example message to build on the card title and also compose the bulk of the card's web content.</p>
  </div>
</div>

Selection groups

Make lists of content in a card using a flush list group.

Selection groups
<div class="card">
  <ul class="list-group list-group-flush">
    <li class="list-group-item">Cras justo odio</li>
    <li class="list-group-item">Dapibus ac facilisis in</li>
    <li class="list-group-item">Vestibulum at eros</li>
  </ul>
</div>

Combine up and go with several content types to produce the card you like, or else toss everything in there. Presented right here are picture styles, blocks, information styles, and a list group - all wrapped in a fixed-width card.

Image cap
<div class="card" style="width: 20rem;">
  <div class="img"><img class="card-img-top" src="..." alt="Card image cap"></div>
  <div class="card-block">
    <h4 class="card-title">Card title</h4>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
  <ul class="list-group list-group-flush">
    <li class="list-group-item">Cras justo odio</li>
    <li class="list-group-item">Dapibus ac facilisis in</li>
    <li class="list-group-item">Vestibulum at eros</li>
  </ul>
  <div class="card-block">
    <a href="#" class="card-link">Card link</a>
    <a href="#" class="card-link">Another link</a>
  </div>
</div>

Header and footer

Create an optional header and/or footer inside a card.

Header and footer
<div class="card">
  <div class="card-header">
    Featured
  </div>
  <div class="card-block">
    <h4 class="card-title">Unique title therapy</h4>
    <p class="card-text">With supporting message below as an all-natural lead-in to extra content.</p>
    <a href="#" class="btn btn-primary">Go someplace</a>
  </div>
</div>

Card headers can be styled by including

.card-header
to
<h*>
elements.

Header and footer
<div class="card">
  <h3 class="card-header">Featured</h3>
  <div class="card-block">
    <h4 class="card-title">Special title treatment</h4>
    <p class="card-text">With supporting message below as a natural lead-in to extra content.</p>
    <a href="#" class="btn btn-primary">Go someplace</a>
  </div>
</div>
Header

<div class="card">
  <div class="card-header">
    Quote
  </div>
  <div class="card-block">
    <blockquote class="card-blockquote">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
      <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
    </blockquote>
  </div>
</div>
Header and footer

<div class="card text-center">
  <div class="card-header">
    Featured
  </div>
  <div class="card-block">
    <h4 class="card-title">Special title treatment</h4>
    <p class="card-text">With supporting text below as an all-natural lead-in to extra material.</p>
    <a href="#" class="btn btn-primary">Go someplace</a>
  </div>
  <div class="card-footer text-muted">
    2 days ago
  </div>
</div>

Sizing

Cards assume no specified

width
to start, so they'll be 100% expanded except something else specified. You can alter this as needed with customized CSS, grid classes, grid Sass mixins, or utilities. ( read here)

Utilizing grid markup

Using the grid, wrap cards in columns and rows as wanted.

 Working with grid markup

<div class="row">
  <div class="col-sm-6">
    <div class="card">
      <div class="card-block">
        <h3 class="card-title">Special title treatment</h3>
        <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
        <a href="#" class="btn btn-primary">Go somewhere</a>
      </div>
    </div>
  </div>
  <div class="col-sm-6">
    <div class="card">
      <div class="card-block">
        <h3 class="card-title">Special title treatment</h3>
        <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
        <a href="#" class="btn btn-primary">Go somewhere</a>
      </div>
    </div>
  </div>
</div>

Making use of utilities

Use handful of available sizing utilities to rapidly set a card's size.

Utilizing utilities

<div class="card w-75">
  <div class="card-block">
    <h3 class="card-title">Card title</h3>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Button</a>
  </div>
</div>

<div class="card w-50">
  <div class="card-block">
    <h3 class="card-title">Card title</h3>
    <p class="card-text">With sustaining message listed below as an all-natural lead-in to extra web content.</p>
    <a href="#" class="btn btn-primary">Button</a>
  </div>
</div>
Making use of utilities

<div class="card" style="width: 20rem;">
  <div class="card-block">
    <h3 class="card-title">Special title treatment</h3>
    <p class="card-text">With supporting text below as a natural lead-in to added material.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

Information placement

You could promptly alter the text placement of any type of card-- in its totality or certain components-- with text align classes.

Text placement
<div class="card" style="width: 20rem;">
  <div class="card-block">
    <h4 class="card-title">Special title treatment</h4>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

<div class="card text-center" style="width: 20rem;">
  <div class="card-block">
    <h4 class="card-title">Special title treatment</h4>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

<div class="card text-right" style="width: 20rem;">
  <div class="card-block">
    <h4 class="card-title">Special title treatment</h4>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

Web-site navigation

Put some navigation to a card's header (or block) with Bootstrap's nav elements.

Navigation

<div class="card text-center">
  <div class="card-header">
    <ul class="nav nav-tabs card-header-tabs">
      <li class="nav-item">
        <a class="nav-link active" href="#">Active</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#">Disabled</a>
      </li>
    </ul>
  </div>
  <div class="card-block">
    <h4 class="card-title">Special title treatment</h4>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>
Navigation
<div class="card text-center">
  <div class="card-header">
    <ul class="nav nav-pills card-header-pills">
      <li class="nav-item">
        <a class="nav-link active" href="#">Active</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#">Disabled</a>
      </li>
    </ul>
  </div>
  <div class="card-block">
    <h4 class="card-title">Special title treatment</h4>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

Images

Cards include some possibilities for operating with images. Go with adding "image caps" at possibly end of a card, covering pics with card content, or just embedding the image in a card.

Image caps

Just like footers and headers, cards can include bottom and top "image caps"-- pics at the top or bottom of a card.

 Pic caps
<div class="card mb-3">
  <div class="img"><img class="card-img-top" src="..." alt="Card image cap"></div>
  <div class="card-block">
    <h4 class="card-title">Card title</h4>
    <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
    <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
  </div>
</div>
<div class="card">
  <div class="card-block">
    <h4 class="card-title">Card title</h4>
    <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
    <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
  </div>
  <div class="img"><img class="card-img-bottom" src="..." alt="Card image cap"></div>
</div>

Picture cover

Turn a pic into a card background and overlay your card's text. Depending on the image, you may or may not want

.card-inverse
(see below).

 Illustration overlays

<div class="card card-inverse">
  <div class="img"><img class="card-img" src="..." alt="Card image"></div>
  <div class="card-img-overlay">
    <h4 class="card-title">Card title</h4>
    <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
    <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
  </div>
</div>

Card varieties

Cards involve different opportunities for modifying their backgrounds, borders, and color.

Inverted text message

By default, cards use dark text and suppose a light background. You can alter that by toggling the color scheme of text within, as well as that of the card's subcomponents, using

.card-inverse.
Then, specify a dark
background-color
and
border-color
to go with it.

You can additionally use

.card-inverse
with the contextual backgrounds versions.

Inverted text

<div class="card card-inverse" style="background-color: #333; border-color: #333;">
  <div class="card-block">
    <h3 class="card-title">Special title treatment</h3>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

Background variants

Cards feature their own variant classes for swiftly altering the

background-color
and
border-color
of a card. Darker colors demand the use of
.card-inverse

Background variations
<div class="card card-inverse card-primary mb-3 text-center">
  <div class="card-block">
    <blockquote class="card-blockquote">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
      <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
    </blockquote>
  </div>
</div>
<div class="card card-inverse card-success mb-3 text-center">
  <div class="card-block">
    <blockquote class="card-blockquote">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
      <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
    </blockquote>
  </div>
</div>
<div class="card card-inverse card-info mb-3 text-center">
  <div class="card-block">
    <blockquote class="card-blockquote">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
      <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
    </blockquote>
  </div>
</div>
<div class="card card-inverse card-warning mb-3 text-center">
  <div class="card-block">
    <blockquote class="card-blockquote">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
      <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
    </blockquote>
  </div>
</div>
<div class="card card-inverse card-danger text-center">
  <div class="card-block">
    <blockquote class="card-blockquote">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
      <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
    </blockquote>
  </div>
</div>

Conveying meaning to assistive modern technologies

Using color to add meaning only delivers a visual indication, which will not be conveyed to users of assistive technologies-- for example, screen readers. Ensure that information denoted by the color is either evident from the content itself (e.g. the visible text), or is featured through different means, such as additional text hidden with the

.sr-only
class.

Outline cards

Looking for a colored card, but not the heavy background colors they provide? Replace the default modifier classes with the

.card-outline-*
ones to style just the
border-color
of a card.

Outline cards
<div class="card card-outline-primary mb-3 text-center">
  <div class="card-block">
    <blockquote class="card-blockquote">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
      <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
    </blockquote>
  </div>
</div>
<div class="card card-outline-secondary mb-3 text-center">
  <div class="card-block">
    <blockquote class="card-blockquote">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
      <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
    </blockquote>
  </div>
</div>
<div class="card card-outline-success mb-3 text-center">
  <div class="card-block">
    <blockquote class="card-blockquote">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
      <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
    </blockquote>
  </div>
</div>
<div class="card card-outline-info mb-3 text-center">
  <div class="card-block">
    <blockquote class="card-blockquote">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
      <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
    </blockquote>
  </div>
</div>
<div class="card card-outline-warning mb-3 text-center">
  <div class="card-block">
    <blockquote class="card-blockquote">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
      <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
    </blockquote>
  </div>
</div>
<div class="card card-outline-danger text-center">
  <div class="card-block">
    <blockquote class="card-blockquote">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
      <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
    </blockquote>
  </div>
</div>

Card arrangement

In addition to styling the content within cards, Bootstrap 4 features a few options for laying out collection of cards. For the present being, these design choices are not yet responsive.

Card groups

Use card groups to make cards as a single, attached element with equal width and height columns. Card groups employ

display: flex;
to accomplish their uniform sizing.

Card groups
<div class="card-group">
  <div class="card">
    <div class="img"><img class="card-img-top" src="..." alt="Card image cap"></div>
    <div class="card-block">
      <h4 class="card-title">Card title</h4>
      <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
  <div class="card">
    <div class="img"><img class="card-img-top" src="..." alt="Card image cap"></div>
    <div class="card-block">
      <h4 class="card-title">Card title</h4>
      <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
  <div class="card">
    <div class="img"><img class="card-img-top" src="..." alt="Card image cap"></div>
    <div class="card-block">
      <h4 class="card-title">Card title</h4>
      <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
</div>

When using card groups with footers, their content should automatically line up.

Card groups
<div class="card-group">
  <div class="card">
    <div class="img"><img class="card-img-top" src="..." alt="Card image cap"></div>
    <div class="card-block">
      <h4 class="card-title">Card title</h4>
      <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
    </div>
    <div class="card-footer">
      <small class="text-muted">Last updated 3 mins ago</small>
    </div>
  </div>
  <div class="card">
    <div class="img"><img class="card-img-top" src="..." alt="Card image cap"></div>
    <div class="card-block">
      <h4 class="card-title">Card title</h4>
      <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
    </div>
    <div class="card-footer">
      <small class="text-muted">Last updated 3 mins ago</small>
    </div>
  </div>
  <div class="card">
    <div class="img"><img class="card-img-top" src="..." alt="Card image cap"></div>
    <div class="card-block">
      <h4 class="card-title">Card title</h4>
      <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
    </div>
    <div class="card-footer">
      <small class="text-muted">Last updated 3 mins ago</small>
    </div>
  </div>
</div>

Card decks

Required a collection of equivalent width and height cards that aren't connected to each other? Utilize card decks.

Card decks
<div class="card-deck">
  <div class="card">
    <div class="img"><img class="card-img-top" src="..." alt="Card image cap"></div>
    <div class="card-block">
      <h4 class="card-title">Card title</h4>
      <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
  <div class="card">
    <div class="img"><img class="card-img-top" src="..." alt="Card image cap"></div>
    <div class="card-block">
      <h4 class="card-title">Card title</h4>
      <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
  <div class="card">
    <div class="img"><img class="card-img-top" src="..." alt="Card image cap"></div>
    <div class="card-block">
      <h4 class="card-title">Card title</h4>
      <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
</div>

Like with card groups, card footers in decks should automatically line up.

Card decks
<div class="card-deck">
  <div class="card">
    <div class="img"><img class="card-img-top" src="..." alt="Card image cap"></div>
    <div class="card-block">
      <h4 class="card-title">Card title</h4>
      <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
    </div>
    <div class="card-footer">
      <small class="text-muted">Last updated 3 mins ago</small>
    </div>
  </div>
  <div class="card">
    <div class="img"><img class="card-img-top" src="..." alt="Card image cap"></div>
    <div class="card-block">
      <h4 class="card-title">Card title</h4>
      <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
    </div>
    <div class="card-footer">
      <small class="text-muted">Last updated 3 mins ago</small>
    </div>
  </div>
  <div class="card">
    <div class="img"><img class="card-img-top" src="..." alt="Card image cap"></div>
    <div class="card-block">
      <h4 class="card-title">Card title</h4>
      <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
    </div>
    <div class="card-footer">
      <small class="text-muted">Last updated 3 mins ago</small>
    </div>
  </div>
</div>

Card columns

Cards are ordered from top to bottom and left to.

Heads up! Your mileage with card columns may vary. To prevent cards breaking across columns, set them to

display: inline-block
as
column-break-inside: avoid
isn't a bulletproof solution yet.

Card columns
<div class="card-columns">
  <div class="card">
    <div class="img"><img class="card-img-top img-fluid" src="..." alt="Card image cap"></div>
    <div class="card-block">
      <h4 class="card-title">Card title that wraps to a new line</h4>
      <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
    </div>
  </div>
  <div class="card p-3">
    <blockquote class="card-block card-blockquote">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
      <footer>
        <small class="text-muted">
          Someone famous in <cite title="Source Title">Source Title</cite>
        </small>
      </footer>
    </blockquote>
  </div>
  <div class="card">
    <div class="img"><img class="card-img-top img-fluid" src="..." alt="Card image cap"></div>
    <div class="card-block">
      <h4 class="card-title">Card title</h4>
      <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
  <div class="card card-inverse card-primary p-3 text-center">
    <blockquote class="card-blockquote">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat.</p>
      <footer>
        <small>
          Someone famous in <cite title="Source Title">Source Title</cite>
        </small>
      </footer>
    </blockquote>
  </div>
  <div class="card text-center">
    <div class="card-block">
      <h4 class="card-title">Card title</h4>
      <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
  <div class="card">
    <div class="img"><img class="card-img img-fluid" src="..." alt="Card image"></div>
  </div>
  <div class="card p-3 text-right">
    <blockquote class="card-blockquote">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
      <footer>
        <small class="text-muted">
          Someone famous in <cite title="Source Title">Source Title</cite>
        </small>
      </footer>
    </blockquote>
  </div>
  <div class="card">
    <div class="card-block">
      <h4 class="card-title">Card title</h4>
      <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
</div>

Card columns may also be expanded and also customized with some additional code. Revealed below is an expansion of the

.card-columns
course using the very same CSS-- CSS columns-- to produce a set of responsive tiers for changing the variety of columns.

.card-columns 
  @include media-breakpoint-only(lg) 
    column-count: 4;
  
  @include media-breakpoint-only(xl) 
    column-count: 5;

Conclusions

So generally this is the method the new to Bootstrap 4 card item gets efficiently set up. As always aiming for ease and simplicity the new Bootstrap version integrates the functionality of several elements into a powerful and single one. Right now you should select the components you need to be included in some cards.

Check a number of video guide regarding Bootstrap Panel Example:

Connected topics:

Bootstrap Panel-Cards: official information

Bootstrap Panel-Cards:  authoritative documentation

Insights on precisely how can we form Bootstrap 4 cards all the same height?

Insights on how can we  set up Bootstrap 4 cards just the  very same  height?

Having need of past panel look for cards

 Wanting past panel look for cards