How to create, style, and use Bootstrap 4 cards on your website.

5 min readJul 14, 2020

As we all know, every system keeps constantly-evolving while new versions are released. These happen in the technology industry too.

Bootstrap cards are a great example of such innovations.

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. The card is a flexible and extensible content container. It includes options for headers and footers, a wide variety of content, contextual background colors, text, images, links, etc. Built with flexbox, they offer alignment and mix well with other Bootstrap components. Cards are bordered boxes with a bit of padding around the content inside them, and no margin by default.

Creating and Styling Bootstrap Cards

To create a basic Bootstrap card, you need to create a <div> container with the class of .card and another <div> container with the class of .card-body inside it. See example below:

For the overall layout of our website, we use classes to customize and style our cards. Check out the examples provided below.

Header, Footer And Body

We enhance the structure of the card by the addition of a header, body, and footer. To add one of these elements, you have to create a <div> container with the .card-header, card-body, or .card-footer class. Take a look at the example below to get a better understanding:

Contextual Classes

Just like many other Bootstrap 4 classes, cards may be colored by combining them with contextual classes. To change the style of a card, you must add the contextual class to the outer container with the .card class.

Here is a list of contextual classes used to style cards:

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

Titles, Text, Links

There are also specific classes used for styling text in Bootstrap cards:

Card titles are created by applying a .card-title class to a header element (say, <h4>).
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:

Images

We 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 you 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 text editor:

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

Bootstrap Card Grids

Whenever we have multiple Bootstrap cards, we position them in a grid. Three types of grid systems you can use.

Columns

The .card-columns class creates a masonry-like grid of cards. The layout will automatically adjust as you insert more cards:

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

Card Group

The .card-group class is similar to .card-deck. The only difference is that the .card-group class removes the left and right margins between each card.