In my last few posts, I have highlighted a few new changes that are coming to Bootstrap: inverse tables and outline buttons. In this tutorial, I’m going to show you another new change to Bootstrap – cards. Cards replace panels and wells!See the Pen Bootstrap 4: Cards by Brandon Himpfen (@brandonhimpfen) on CodePen.

Bootstrap Cards HTML

Cards start by using the card CSS class:

<div class="card">
    ... card stuff goes there ...
</div>

Next, we can add a header:

<div class="card-header">
    Card Header Title
</div>

If you want to add an image, the HTML would be:

<img src="" alt="" class="card-img-top">

Content or sections go into blocks:

<div class="card-block">
    ... card content goes in here ...
</div>

To add a card title, add the following into a card block:

<h3 class="card-title">Card Title</h3>

If you also want to add a subtitle, add the following into a card block:

<h4 class="card-subtitle text-muted">Card Sub-title Goes Here</h4>

Text goes into card-text CSS class:

<p class="card-text">Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean</p>

We can also add list groups:

<ul class="list-group list-group-flush">
    <li class="list-group-item">First in the list group.</li>
    <li class="list-group-item">Second in the list group.</li>
    <li class="list-group-item">Last in the list group.</li>
</ul>

The list-group-flush CSS class, makes the border only appear to the bottom of the list item. If you don’t use list-group-flush, a border will be wrapped around all sides.

List group can be added into a card block or outside of a card block. Adding it inside a card block will add padding, so it aligns with the text, whereas adding the list group outside of a card block will make it flush with the card border or outside edge.

Cards also come with their own links, which look like navigation pills but you don’t need to use unordered lists to use them:

<a href="#" class="card-link">Card Link</a> <a href="#" class="card-link">Another Card Link</a>

The last thing I want to point out it card footer.

<div class="card-footer text-muted">Card Footer</div>

By adding text-muted to the card footer, the text will be lightened.

Here is a basic template to get you started:

<div class="card">
  <div class="card-header">Card Header Title</div>
    <img src="" alt="" class="card-img-top">
    <div class="card-block">
      <h3 class="card-title">Card Title</h3>
      <h4 class="card-subtitle text-muted">Card Subtitle</h4>
      <p class="card-text">Card text goes here...</p>
    </div>
  <div class="card-footer text-muted">Card Footer</div>
</div>