Bootstrap Panel Example

Overview

Sometimes we need to separate some small (or not so much) components of content to help them stand up and get the customer's focus-- such as specifying certain useful features offering a list of posts with a small abstract and a solitary effective picture and so on and on.

We require an user-friendly equipment to wonderfully cover our content in a lovely and flexible manner to have it favorable and neat shown on our webpages. In the last version of the most popular responsive framework-- Bootstrap 3 we used mostly the Bootstrap Panel Group, thumbnail and well elements providing us box containers along with a subtle border, slightly elliptical corners and eventually-- a slight 3d outcome. In the latest Bootstrap 4 framework, these are no longer. They get got changed entirely by the card piece declaring to be capable of virtually everything the previous features could do but simply much better. It's time to get to know it more thoroughly.

Methods to employ the Bootstrap Panel Button:

The cards are lightly styled boxes efficient in carrying practically any HTML content inside in addition having a lot of predefined styling choice for correctly showing its content. It also additionally might have a header and a footer.

In the

.card-block

section you may have a caption carrying the class

.card-title

which may be assigned to the

h1-- h6

elements in addition to a standard

<div>

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

.card-text

class. If you decide to place some web links as well-- assign them the

.card-link

class to have them certainly differentiated for greater user interaction.

As stated above the

.card-block

appears to wrap the content leaving a pretty padding around it. The moment it comes to images this could prefer to avoid this and have the pic spread the whole width of the component.

To receive this look just place the

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

tag outside the

.card-block

so you prevent the paddings eventually including

style=" width:100%;"

to make certain it will resize correctly always filling in its container.

Some words regarding the layout-- cards will fill the entire horizontal area available by default thus it's a great idea limiting this by putting them in some grid elements. This way you can get their predictable behavior. ( additional reading)

Some case

Cards are developed with as minimal markup and styles as possible, but still handle to deliver a ton of control and customization. Designed using flexbox, they present easy positioning and combine properly with other Bootstrap parts.

Here is a model of a fundamental card with mixed content and a specified width. Cards have no preset width to start, so they'll naturally complete the full width of its parent section. This is conveniently individualized with various sizing possibilities.

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

Cards maintain a wide variety of content, including pictures, text, list groups, links, and more. 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 in a card.

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

Titles, text message, and 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>

Pictures

.card-img-top

places an image to the very top of the card. With

.card-text

, text could be included in the card. Text within

.card-text

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

Selection groups

Produce lists of content in a card by 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 up and go with several material sorts to produce the card you need, or toss everything in there. Revealed right here are picture formats, blocks, information styles, and a list group - all wrapped 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

Include an optional header and/or footer in 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 adding

.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 have no certain

width

to begin, so they'll be 100% large except something else mentioned. You can modify this as required with customized CSS, grid classes, grid Sass mixins, or utilities. ( additional info)

Applying grid markup

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

<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 quickly set a card's size.

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

Information placing

You could rapidly alter the text positioning of any card-- in its totality or certain 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>

Website navigation

Place 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 have several options for operating with pics. Select from attaching "image caps" at either end of a card, covering images with card content, or simply embedding the image in a card.

Picture caps

Like footers and headers, cards can involve bottom and top "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 a picture into a card foundation and overlay your card's text. Basing on the pic, 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 variations

Cards feature various options for customizing their backgrounds, borders, and color.

Inverted message

Initially, cards use dark text and assume a light background. You can reverse that by toggling the color of text within, as well as that of the card's subcomponents, with

.card-inverse.

Specify a dark

background-color

and

border-color

to go with it.

You can also use

.card-inverse

along with the contextual backgrounds variants.

<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 include their own variant classes for easily altering the

background-color

and

border-color

of a card. Darker colors request 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>

Showing meaning to assistive modern technologies

Using color to bring in meaning only provides a visual indication, that will not be conveyed to users of assistive technologies-- such as screen readers. Make sure that information denoted by the color is either obvious from the content itself (e.g. the visible text), or is featured through alternate means, such as extra message hidden with the

.sr-only

class.

Outline cards

In need of 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.

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

In addition to styling the material within cards, Bootstrap offers some options 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, attached element with identical width and height columns. Card groups employ

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 using 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 set of equal width and also height cards that typically aren't attached to each other? 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 will 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 may be arranged into Masonry-like columns along with just CSS by putting them in

.card-columns

Cards are developed with CSS

column

properties instead of flexbox for easier alignment. 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 may also be expanded and also customized with some additional code. Shown below is an extension of the

.card-columns

class making use of the same CSS-- CSS columns-- to generate a collection of responsive tiers for altering the variety of columns.

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

Conclusions

So essentially this is the way the bright new to Bootstrap 4 card section gets quickly set up. As always aiming for easiness and simplicity the new Bootstrap version integrates 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.