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:
Next, we can add a header:
If you want to add an image, the HTML would be:
<img src="" alt="" class="card-img-top">
Content or sections go into blocks:
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>
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.
text-muted to the card footer, the text will be lightened.
Here is a basic template to get you started:
<img src=”” alt=”” class=”card-img-top”>
Card text goes here…