Bootstrap Panel Body

Introduction

Sometimes we need to split up several little (or not so much) pieces of content to make them stand up and get the customer's interest-- like noting some useful features providing a listing of articles with a small abstract and a solitary strong image and so on and on.

We require an efficient equipment to nicely wrap our material in a flexible and stunning way to get it nice and neat demonstrated on our pages. In the latest version of the remarkably trendy flexible framework-- Bootstrap 3 we used mostly the Bootstrap Panel Tabs, thumbnail and well elements delivering us box containers along with a faint border, quite rounded corners and eventually-- a slight 3d outcome. In the latest Bootstrap 4 framework, these are no more. They get got substituted entirely by the card part stating to be capable of pretty much whatever the previous features could possibly do but only much better. So it's the right moment to get to know it better.

Approaches to apply the Bootstrap Panel Border:

The cards are delicately styled boxes efficient in holding practically any HTML content within as well featuring a many predefined styling option for correctly showcasing its content. It also optionally can have a footer and a header.

To generate a card we first require a

.card

element to wrap the entire thing up. Inside it separate covers for the header

.card-header

, the genuine card content

.card-block

and the footer

.card-footer

should take place and while the header and footer are rather optional and may be omitted if you don't want them the

.card-block

is the vital component-- it nicely wraps your content offering some subtle padding near.

Inside the

.card-block

item you may have a caption having the class

.card-title

which may be added to the

h1-- h6

sections as well as to a normal

<div>

and fo course -- come text covered in a paragraph with the

.card-text

class. If you make a decision to add some hyperlinks as well-- assign them the

.card-link

class to get them suitably sorted for better user interaction.

The contextual colour classes may be used to additionally style your entire card pieces quickly-- just add a

.card- ~ one of the contextual colors here like primary, success, info or danger here ~

to the main

.card

wrapper and if the background gets a bit too shady for the content to be distinct enough-- also add the

.card-inverse

class to invert the text color. You can also style only the line color employing the contextual scheme-- this gets completed by adding the

.card-outline- ~ the wanted colour ~

class again to the major

.card

item.

As discussed before the

.card-block

comes to cover the content keeping a notable padding around it. But the moment it comes to pictures it might wish to avoid this and have the image expanded the whole width of the section.

To obtain this appearance just put the

<div class="img"><img></div>

tag outside the

.card-block

so you avoid the paddings eventually adding

style=" width:100%;"

making sure this will resize properly always filling in its container.

There are some pretty helpful positioning classes as well such as

.card-img-top

and

.card-img-bottom

adjusting the image at the top or the bottom of the card. And if you wish to place it somewhere in between the text just break the

.card-block

, insert the image and start a new

.card-block

to insert the information you want placed after the image-- numerous card blocks are supported. Eventually you may also desire to add some words over the picture-- wrap it in a

<div>

holding the

.img-overlay

class.

A few words about the design-- cards will occupy the entire horizontal space available by default thus it's a good idea controling this by putting them in some grid elements. This way you can achieve their expected behavior. ( discover more)

Some instance

Cards are developed with as minimal markup and styles as possible, but still operate to present a ton of control and modification. Constructed using flexbox, they present easy alignment and combine well with other Bootstrap parts.

Beneath is an illustration of a basic card with mixed content and a fixed width. Cards have no fixed width to start, so they'll typically complete the full width of its parent element. This is simply modified with different sizing options.

<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-site material kinds

Cards maintain a broad assortment of content, involving pictures, text message, list groups, links, 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 require a padded area within a card.

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

Names, text message, and hyperlinks

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

places a pic to the top of the card. With

.card-text

, text could be included in the card. Text in

.card-text

can also be styled with the standard HTML tags.

<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>

List groups

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

<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>

Mix and match various content sorts to generate the card you like, or throw everything in there.Displayed right here are picture styles, blocks, notification styles, plus a list group - all covered in a fixed-width card.

<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

Add an extra header and/or footer within a card.

<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 could be styled by including

.card-header

<h*>

components.

<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>

<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>

<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>

Scale

Cards assume no certain

width

to start, so they'll be 100% large until something else stated. You may modify this as needed with customized CSS, grid classes, grid Sass mixins, or utilities. ( see post)

Employing grid markup

Making use of the grid, wrap cards in columns and rows as desired.

<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>

Working with utilities

Use handful of offered sizing utilities to promptly establish a card's width.

<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>

<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>

Text message setting

You can promptly alter the text placement of any card-- in its entirety or specific components-- with text align classes.

<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 navigating

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

<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>

<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 offer a few features for operating using pics. Choose from adding "image caps" at possibly end of a card, covering images with card content, or simply inserting the image in a card.

Image caps

Just like headers and footers, cards may involve top and bottom "image caps"-- pictures at the top or bottom of a card.

<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>

Image cover

Turn an image into a card foundation and overlay your card's text. Basing on the image, you may or may not require

.card-inverse

(see below).

<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 assortments

Cards provide various opportunities for customizing their backgrounds, borders, and color.

Inverted text

By default, cards use dark text and expect a light background. You can change this by toggling the color scheme of text within, in addition to that of the card's subcomponents, with

.card-inverse.

Then, specify a dark

background-color

and

border-color

to go with it.

You may additionally use

.card-inverse

with the contextual backgrounds versions.

<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 variations

Cards feature their own variant classes for quickly altering the

background-color

and

border-color

of a card. Darker colors need the use of

.card-inverse

<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>

Sharing meaning to assistive modern technologies

Using color to add meaning only offers a visual indication, that will not be shared to users of assistive technologies-- like screen readers. Ensure that info denoted by the color is either evident from the material itself (e.g. the visible text), or is included through different means, like additional message hidden with the

.sr-only

class.

Outline cards

In need of a colored card, but not the heavy background colors they deliver? Change the default modifier classes with the

.card-outline-*

ones to style just the

border-color

of a card.

<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 setup

In addition to styling the content within cards, Bootstrap 4 offers a few alternatives for laying out series of cards. For the time being, these design choices are not yet responsive.

Card groups

Use card groups to render cards as a single, connected item with equal width and height columns. Card groups use

display: flex;

to accomplish their uniform sizing.

<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 employing card groups with footers, their content should automatically line up.

<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

Need a collection of equal width as well as height cards that aren't connected to one another? Utilize 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>

Just like with card groups, card footers in decks are going to automatically line up.

<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.

Carry on! Your mileage with card columns may differ. To prevent cards breaking across columns, set them to

display: inline-block

column-break-inside: avoid

isn't a bulletproof solution yet.

<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 can additionally be expanded as well as customized with some added code. Shown below is an extension of the

.card-columns

class using the very same CSS-- CSS columns-- to create a set of responsive tiers for changing the number of columns.

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

Final thoughts

Basically this is the way the new to Bootstrap 4 card part becomes simply set up. As always aiming for ease and simplicity the new Bootstrap version combines the performance of a few elements into a powerful and single one. Now you need to select the features you need to be outlined in some cards.