Bootstrap Panel Button

Intro

In many cases we should segregate multiple small (or not so much) components of content in order to force them stand up and get the guest's interest-- like listing some helpful features presenting a listing of short articles along with a short abstract and a single strong picture and so on and on.

We need a convenient solution to beautifully cover our information in a responsive and beautiful approach to get it nice and tidy demonstrated on our web pages. In the last version of the remarkably famous flexible framework-- Bootstrap 3 we used mostly the Bootstrap Panel Body, thumbnail and well elements giving us box containers with a subtle border, slightly rounded edges and eventually-- a light 3d effect. In the latest Bootstrap 4 framework, these disappear. They get got upgraded altogether by the card element stating to be capable of almost everything the veterans could possibly do but basically much better. So it's the right moment to get to learn it more.

Methods to utilize the Bootstrap Panel Body:

The cards are lightly styled boxes efficient in carrying almost any HTML content inside also having a bunch of predefined styling choice for correctly showing its article. It also additionally can have a header and a footer.

In order to generate a card we first require a

.card

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

.card-header

, the actual card content

.card-block

and the footer

.card-footer

shall take place and while the header and footer are somewhat optional and can be left out if you don't need to have them the

.card-block

is the important component-- it suitably covers your content supplying some slight padding around.

Inside the

.card-block

section you may have a label having the class

.card-title

which may be added to the

h1-- h6

elements as well as to a regular

<div>

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

.card-text

class. If you choose to add some links along-- assign them the

.card-link

class to have them correctly differentiated for better user interaction.

As mentioned before the

.card-block

arrives to wrap the content leaving a pretty padding around it. However when it comes to pics this might want to prevent this and get the pic expanded the whole 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 certain this will resize properly always filling in its container.

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

Some instance

Cards are created with as minimal markup and styles as possible, but still handle to present a ton of control and customization. Developed using flexbox, they present easy positioning and combine well with other Bootstrap elements.

Here is a sample of a basic card with combined content and a specified width. Cards have no predetermined width to start, so they'll typically occupy the full width of its parent section. This is easily customized with numerous 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-site material types

Cards support a large selection of content, featuring pics, text, list collections, hyperlinks, and more. Below are examples of what's maintained.

Blocks

The building block of a card is the

.card-block

Use it whenever you want a padded area within a card.

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

Titles, information, and hyperlinks

Subtitles are utilized by including a

.card-subtitle

to a

<h*>

tag. If the

.card-title

and the

.card-subtitle

elements are placed in a

.card-block

element, the card title and subtitle are positioned nicely.

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>

Illustrations

.card-img-top

spots a pic to the head of the card. With

.card-text

, text is put on the card. Text within

.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

Produce lists of content in a card with 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>

Merge up and go with several information kinds to produce the card you want, or throw everything in there. Revealed right here are picture formats, blocks, information styles, and 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

Create an extra 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 can be styled by including

.card-header

<h*>

sections.

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

Sizing

Cards have no specified

width

to start, so they'll be 100% large unless something else declared. You may modify this as wanted with customized CSS, grid classes, grid Sass mixins, or utilities. ( useful source)

Operating grid markup

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

Using utilities

Use handful of available sizing utilities to rapidly 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 type of card-- in its whole 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 navigation

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

<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 some features for working with pics. Choose from attaching "image caps" at either end of a card, covering images with card content, or just embedding the image in a card.

Illustration caps

Just like headers and footers, 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 a picture into a card foundation and overlay your card's text. Depending 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 varieties

Cards utilize various opportunities for modifying their backgrounds, borders, and color.

Inverted text message

By default, cards use dark text and suppose a light background. You can reverse this 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 additionally 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 variants

Cards feature their own variant classes for swiftly altering the

background-color

and

border-color

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

Revealing meaning to assistive modern technologies

Employing color to bring in meaning only provides a visual indication, that will not be conveyed to users of assistive technologies-- like screen readers. Ensure that information denoted by the color is either evident from the content itself (e.g. the visible text), or is included through different means, like extra content hidden with the

.sr-only

class.

Outline cards

In need of a colored card, but not the hefty background colors they give? 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 content within cards, Bootstrap provides some alternatives for laying out collection of cards. For the time being, such design options are not yet responsive.

Card groups

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

Required a set of equal width as well as height cards that typically aren't attached 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>

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 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 positioning. Cards are ordered from top to bottom and left to right.

Carry on! Your mileage with card columns may vary. To avoid 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 also be extended as well as customized with some additional code. Shown listed below is an expansion of the

.card-columns

course making use of the same CSS-- CSS columns-- to generate a collection of responsive rates for altering the number of columns.

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

Conclusions

So basically this is the method the bright new to Bootstrap 4 card item gets efficiently built. As always aiming for ease and simplicity the new framework version combines the functionality of several elements into a effective and single one. Right now you need to select the components you need to be included in some cards.