Every system and program keeps constantly evolving, and new versions keep being introduced. The changes and updates are meant to take some load of the user's shoulders and make their experience as great as possible.
Bootstrap cards are a great example of such new features. While version 3 had a bunch of different elements for seemingly the same purpose (Bootstrap panels, thumbnails, wells), version 4 uses cards to replace them all and avoid the confusion.
A Bootstrap card in its essence is a customizable container for the content (text, images, links, list groups, etc.) you wish to display.
Contents
Bootstrap Cards: Main Tips
- Using Bootstrap 4, you can create cards.
- Cards are bordered boxes with a bit of padding around the content inside them, which can be used to conveniently display a specific set of information.
- For those familiar with Bootstrap 3, cards replace the old thumbnails, panels, and wells.
Creating and Styling Bootstrap Cards
To create a basic Bootstrap card, you need to create a <div> container with the .card class and another <div> container with the class of .card-body inside it. See how it should look like in your document:
<div class="card">
<!-- content of the card goes here -->
<div class="card-body">Content</div>
</div>As we already know, it's not enough for the elements in your website to be functional: they should also work with the overall design. That is why we will now introduce classes used to customize and style your cards. Make sure to check out the examples provided and play with them a little using code editor.
Header And Footer
The structure of the card can be enhanced by the addition of a header and a footer. To add one of these elements, you have to create a <div> container with the .card-header or .card-footer class. Take a look at the example below to get a better idea:
<div class="card">
<!-- content of the card goes here -->
<div class="card-header">Header content</div>
<div class="card-body">Body content</div>
<div class="card-footer">Footer content</div>
</div>Contextual Classes
Much like many other Bootstrap 4 classes, cards may be colored by combining them with contextual classes. To change the style of the card, you must add the contextual class to the outter container with the .card class.
Here is a list of contextual classes that cards can be used with:
- .bg-primary
- .bg-secondary
- .bg-info
- .bg-success
- .bg-danger
- .bg-warning
- .bg-light
- .bg-dark
Take a look at the example below. You can see three contextual classes (.bg-warning, .bg-success and .bg-danger) applied to different cards, providing them with yellow, green, and red colors:
<div class="card">
<div class="card-header bg-warning">Header content</div>
<div class="card-body bg-success">Body content</div>
<div class="card-footer bg-danger">Footer content</div>
</div>Titles, Text, Links
There are also specific classes used for styling text inside Bootstrap cards:
- Card titles are created by applying a .card-title class to a header element (say,
<h2>). - Text in cards is styled by adding the .card-text class to
<p>elements, which removes the bottom margin. - Links in cards are styled by adding the .card-link class to
<a>elements, which adds a hover effect to the link and colors the font blue.
Check the example below to see how these classes work:
<div class="card">
<!-- content of the card goes here -->
<div class="card-body">
<h3 class="card-title">Title</h3>
<p class="card-text">Content text</p>
<a class="card-link" href="#">Read more</a>
</div>
</div>Images
You may also use two specific classes for displaying images in cards: .card-img-top, which places an image on the top of the card, and .card-img-bottom, which places the image on the bottom. Both of them fit the images to the rounded border of the card neatly. To work properly, these classes have to be used with the <img> tag inside a card.
Note: if want an image to span the entire page width, you should add the image container outside of the <div> container with the card-body class.
This is what it would look like in your HTML document:
<div class="card">
<!-- content of the card goes here -->
<!-- image on the top of the content -->
<img src="picture.jpg" alt="Picture" class="card-img-top">
<div class="card-body">Body content</div>
</div>
<div class="card">
<!-- content of the card goes here -->
<div class="card-body">Body content</div>
<!-- image on the bottom of the content -->
<img src="picture.jpg" alt="Picture" class="card-img-bottom">
</div>Image Overlay
To turn an image into the background of the card and display the text on top of it, you need to use the .card-img-overlay class (instead of .card-body) on the content, which you want to display. See a code example to get a better idea:
<div class="card">
<!-- content of the card goes here -->
<img src="picture.jpg" alt="Picture" class="card-img-top">
<!-- this content is displayed over the image, which is now in the background and covers the whole element -->
<div class="card-img-overlay">Overlay content</div>
</div>Bootstrap Card Grids
Whenever we have multiple Bootstrap cards, they have to be positioned in a certain order, or a grid. We will now review three types of grids you can use. Check out the examples provided to grasp the difference better.
Note: whichever type of grip you choose, small screens (less than 576px) will still display cards in vertical order.
Columns
The .card-columns class creates a masonry-like grid of cards (similar to what you'd see in Pinterest). The layout will automatically adjust as you insert more cards:
<div class="card-columns">
<div class="card bg-warning">
<div class="card-body text-center">
<p class="card-text">I'm a card</p>
</div>
</div>
<div class="card bg-success">
<div class="card-body text-center">
<p class="card-text">I'm a card</p>
</div>
</div>
<div class="card bg-light">
<div class="card-body text-center">
<p class="card-text">I'm a card</p>
</div>
</div>
<div class="card bg-info">
<div class="card-body text-center">
<p class="card-text">I'm a card</p>
</div>
</div>
</div>Card Deck
The .card-deck class creates a grid of cards that are of equal height and width. The layout will automatically adjust as you insert more cards.
<div class="card-deck">
<div class="card bg-danger">
<div class="card-body text-center">
<p class="card-text">I'm a card</p>
</div>
</div>
<div class="card bg-warning">
<div class="card-body text-center">
<p class="card-text">I'm a card</p>
</div>
</div>
<div class="card bg-info">
<div class="card-body text-center">
<p class="card-text">I'm a card</p>
</div>
</div>
<div class="card bg-light">
<div class="card-body text-center">
<p class="card-text">I'm a card</p>
</div>
</div>
<div class="card bg-success">
<div class="card-body text-center">
<p class="card-text">I'm a card</p>
</div>
</div>
</div>Card Group
The .card-group class is similar to .card-deck. The only difference is that the .card-group class removes left and right margins between each card (they will still be visible on screens smaller than 576px, though!).
<div class="card-group">
<div class="card bg-danger">
<div class="card-body text-center">
<p class="card-text">I'm a card</p>
</div>
</div>
<div class="card bg-warning">
<div class="card-body text-center">
<p class="card-text">I'm a card</p>
</div>
</div>
<div class="card bg-info">
<div class="card-body text-center">
<p class="card-text">I'm a card</p>
</div>
</div>
<div class="card bg-light">
<div class="card-body text-center">
<p class="card-text">I'm a card</p>
</div>
</div>
<div class="card bg-success">
<div class="card-body text-center">
<p class="card-text">I'm a card</p>
</div>
</div>
</div>Bootstrap Cards: Summary
- Bootstrap 4 allows the coder to create cards that are similar to Bootstrap panels, thumbnails, and wells used in version 3.
- Cards come in handy when you need to display a set of content. It looks as a box with borders and light padding around the text, images, links, or other content you place inside.