Bootstrap Panel Button

Intro

Often we need to split up a few little (or not so much) parts of information in order to force them stand up and get the customer's interest-- like specifying several valuable features offering a selection of articles along with a brief abstract and a solitary strong picture and so on and on.

We require an efficient instrument to beautifully wrap our content in a flexible and attractive way to get it wonderful and neat demonstrated on our pages. In the latest version of the remarkably famous flexible framework-- Bootstrap 3 we used mainly the Bootstrap Panel Body, thumbnail and well elements providing us box containers along with a slight border, slightly elliptical edges and eventually-- a light 3d impact. In the latest Bootstrap 4 framework, these are no longer. They get got upgraded entirely by the card item claiming to be efficient in nearly whatever the veterans could do but only better. It's time to get to learn it better.

Techniques to apply the Bootstrap Panel Example:

The cards are lightly styled containers capable of holding almost any HTML content in them as well featuring a lot of predefined styling possibility for appropriately showing its content. It in addition optionally might have a footer and a header.

The contextual color classes may be employed to further style your entire card elements easily-- just assign a

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

to the main

.card

wrapper and if the background becomes a bit overly dark for the text to be readable enough-- additionally add the

.card-inverse

class to alter the text color. You may also style only the line colour employing the contextual scheme-- this gets done by adding the

.card-outline- ~ the required shade ~

class again to the major

.card

item.

As mentioned before the

.card-block

appears to wrap the content leaving a notable padding around it. The moment it gets to images this could want to avoid this and get the image spread the entire width of the section.

To receive this appearance simply put the

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

tag outside the

.card-block

so you avoid the paddings eventually adding

style=" width:100%;"

to make sure this will resize properly always filling in its container.

A few words about the design-- cards will fill the whole horizontal spot available by default thus it's a smart idea limiting this by placing them inside some grid elements. By doing this you can achieve their expected actions. ( click this)

Some good example

Cards are designed with as little markup and styles as possible, but still manage to present a plenty of management and customization. Developed using flexbox, they offer easy alignment and mix well with other Bootstrap elements.

Beneath is a sample of a simple card with combined content and a specified width. Cards have no predetermined width to start, so they'll typically occupy the entire width of its parent section. This is easily customized with several sizing alternatives.

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

Cards maintain a wide variety of content, involving pics, text, list collections, links, and more. Listed below are examples of what's supported.

Blocks

The building block of a card is the

.card-block

Use it when you want a padded section in a card.

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

Names, text message, and urls

Subtitles are used by putting a

.card-subtitle

to a

<h*>

tag. In case the

.card-title

and the

.card-subtitle

items are put in a

.card-block

element, the card title and subtitle are positioned well.

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

spots a pic to the very top of the card. With

.card-text

, text may be included in the card. Text inside

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

Listing groups

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

Combine up and go with several content types to create the card you desire, or else toss everything in there.Displayed right here are picture styles, blocks, text message varieties, plus 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 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>

Measurements

Cards assume no certain

width

to begin, so they'll be 100% expanded except something else declared. You can alter this as required with custom CSS, grid classes, grid Sass mixins, or utilities. (see page)

Applying grid markup

Using 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 readily available sizing utilities to swiftly 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 arrangement

You could promptly alter the message positioning of any kind of card-- in its entirety or details 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

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

Pictures

Cards provide a number of features for operating using pics. Select from attaching "image caps" at either end of a card, covering pics with card content, or just installing the image in a card.

Picture caps

Similar to footers and headers, cards can include 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 illustration into a card background and overlay your card's text. Basing on the pic, you may or may not want

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

Cards provide various alternatives for modifying their backgrounds, borders, and color.

Inverted message

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

.card-inverse.

After that, specify a dark

background-color

and

border-color

to go with it.

You can also use

.card-inverse

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 alternatives

Cards include their own variant classes for swiftly changing the

background-color

and

border-color

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

Conveying meaning to assistive modern technologies

Utilizing color to include meaning only provides a visual indication, that will not be conveyed to users of assistive technologies-- for example, screen readers. Ensure that info signified by the color is either obvious from the content itself (e.g. the visible text), or is featured through different means, like additional content 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 design 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 includes some alternatives for laying out series of cards. For the present being, such design options are not yet responsive.

Card groups

Utilize card groups to render cards as a single, connected item with identical width and height columns. Card groups employ

display: flex;

to achieve 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 will 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

Required a collection of equivalent width and height cards that typically aren't affixed to one another? Use 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.

<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 can be arranged into Masonry-like columns along with just CSS by wrapping them in

.card-columns

Cards are created with CSS

column

properties instead of flexbox for simpler positioning. Cards are ordered from top to bottom and left to.

Attention! Your mileage with card columns may vary. 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 and also customized with some extra code. Shown below is an expansion of the

.card-columns

class making use of the same CSS-- CSS columns-- to produce a collection of responsive rates for transforming the variety of columns.

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

Conclusions

Thus generally this is the way the new to Bootstrap 4 card item becomes simply set up. As always aiming for easiness and simplicity the new framework version integrates the performance of several sections into a single and powerful one. Right now you should pick up the components you need to be included in some cards.