The Bootstrap 4 Cards Component

The Bootstrap 4 card is a content container with the variety of options for presenting the information about your products or services or other information on the website. This is a bordered container where you may use text, images, links, buttons etc. with a number of styles easily created by utilizing built-in contextual classes.

In this cards tutorial, I will show you basic to nicely styled cards with different layouts by using Bootstrap grid system, so keep reading below.

A basic example of card in Bootstrap 4

Let us start with a card with different content types i.e. an image, title, text, and a button to have an idea what this is all about. Have a look at the demo online and then let me explain how it is created:

See online demo and code

The markup for this basic card template:

The card has no specific width, so it is specified by using the inline CSS, otherwise, it takes the space of parent container. The main <div> element is given the .card class.

For placing an image on top of the card, use the .card-img-top. This is followed by using .card-body class in another div element. There, a heading (h5) is used and a paragraph of text is given. In the last, a button with various built-in classes is used.

As mentioned earlier, the card enables us using a variety of content. You may even create list groups there.

Display more cards in a row by grid markup

Generally, you will require displaying more than one card for presenting the information. You may manage more cards by using Bootstrap 4 grid markup or using card groups.

In this demo, the cards are enclosed in the main wrapper which is a div with row class. This is followed by using the col-sm-4 in the inner div. Three div elements are created with col-sm-4 class and each contains the markup for the card with its information.

Have a look at the demo online where cards may be cluttered due to less space. For viewing three cards in a row, copy the complete code in your IDE and execute the code. Do not forget to adjust the image path as per your directory structure:

See online demo and code

The markup for three cards in the same row:

Styling the cards by utility classes for background and text

Until now, we have created simple cards without any background colors. Now let me show you how to style cards by using built-in Bootstrap 4 classes for background and text.

In the following example, the grid markup is used for creating three cards again with background and color classes. Along with this, the header and footer for the cards are also used. I will explain how to create header and footer after the code of this example:

See online demo and code

The markup:

Creating header and footer in cards

You can see in above example that the .card-header class is used in a <div> for creating the header with .bg-primary background and text-warning for specifying the text in the header.

Similarly, .card-footer class is used for creating a footer in the card. This is where links in button styles are used.

You may align the content in header, footer and content body of the card as per your wish by using text utility classes e.g. text-center, text-right etc.

Check out another template by different classes

In this template, I just used some other classes for background and colors in the header along with outline buttons. Have a look online where you may grab the complete code as well:

See online demo and code

The markup:

You may try various utility classes for background and text as per your liking. For learning more about Bootstrap color classes, go to the linked tutorial.

Create adjacent cards by card-group class

You may also create cards that are attached to each other and equal in height and width by using the card-group class. Underway, the card-group uses the display: flex. Have a look at three attached cards template where I displayed a product image and information along with footer with button links:

See online demo and code

The code:

In that case, even if the footer content varies (one is larger than the others) then card-group will adjust the sizes so it always aligns the same. You can also notice this in the demo.

Using list group inside a card template

As mentioned earlier, the cards Bootstrap 4 enable us using a variety of content. You may also use list groups along with other content.

You may customize the list groups fully as you would do as a separate component. Even, use badges in the list groups within the cards.

Have a look at such an example where I created cards and used list groups with badges for the demonstration:

See online demo and code

The markup for this card example (first card only):

Grab the complete code from the demo page.