How to Style Cards in Bootstrap 5 | Explained

A card in Bootstrap 5 is referred to as a container or a box that wraps content inside it. It can consist of a  header, some content, and a footer. It can be styled by adding colors, or images to it. These Bootstrap cards are considered as a replacement for old panels, thumbnails, or wells. How these cards are created and styled in various ways has been discussed in this article.

How to create a card using Bootstrap 5

For the purpose of creating a simple card, make a div container and assign it the .card class and nest a div inside the first div and assign it the .card-body class and place the content of the card inside this div.

HTML

The code stated above will create a very simple card.

Output

<img alt="" data-lazy- data-lazy-src="https://kirelos.com/wp-content/uploads/2022/04/echo/image3-48.png" data-lazy- height="134" src="data:image/svg xml,” width=”907″>

The output displays a basic card.

How to add a header and footer in a card

As mentioned already a card can consist of a header and a footer. Therefore, to make these entities use the .card-header, and the .card-footer classes.

HTML

In the above code, to make the header of the card we are assigning a div container the .card-header class, then to place some content we are making the body of the card by using the .card-body class, and lastly to generate a footer the .card-footer class is used.

Output

<img alt="" data-lazy- data-lazy-src="https://kirelos.com/wp-content/uploads/2022/04/echo/image5-42.png" data-lazy- height="221" src="data:image/svg xml,” width=”914″>

The card shown above has a header, body, and footer.

How to create colorful cards

To provide background colors to the cards simply use any of the background color classes which are .bg-primary, .bg-secondary, .bg-danger, .bg-warning, .bg-success, .bg-info, .bg-muted, .bg-light, .bg-dark.

HTML

There are a total of 5 cards being generated in the above code and each has been given a different color. Note that the background color classes are being assigned to the div that has the .card class.

Output

<img alt="" data-lazy- data-lazy-src="https://kirelos.com/wp-content/uploads/2022/04/echo/image4-44.png" data-lazy- height="414" src="data:image/svg xml,” width=”920″>

Colorful cards were generated successfully.

How to add title, text, and links to a card

If you are generating cards that convey certain information and you wish to add some title, text, and links to that card then follow the code provided below.

HTML

To add a title the .card-title class was assigned to a heading element (any heading element h1-h6 can be used), to include some text the .card-text class was assigned to a

element and a link was also added and was make hoverable along with a blue color by using the .card-link class.

Output

<img alt="" data-lazy- data-lazy-src="https://kirelos.com/wp-content/uploads/2022/04/echo/image7-33.png" data-lazy- height="210" src="data:image/svg xml,” width=”898″>

An informative card was generated successfully.

How to add images to a card

If you wish to add images to your cards along with some text and links then follow the example below.

HTML

To place the image inside the card use the .card-img-top class inside the tag and then just like in the previous section we are making a card body and placing a title, a text, and a link inside the card body. Note that the image has been placed outside the card body to make it span the entire width that has been provided to the div container having the class .card.

Output

<img alt="" data-lazy- data-lazy-src="https://kirelos.com/wp-content/uploads/2022/04/echo/image6-40.png" data-lazy- height="573" src="data:image/svg xml,” width=”391″>

However, if you wish to place your title, text, and link above the image then use the .card-img-bottom class. Like we have shown in the code snippet below.

HTML

The above code will generate a card with the image placed at the bottom and the title, text, and link placed above that image.

Output

<img alt="" data-lazy- data-lazy-src="https://kirelos.com/wp-content/uploads/2022/04/echo/image2-48.png" data-lazy- height="575" src="data:image/svg xml,” width=”392″>

The .card-img-bottom class is working properly.

How to create card image overlay

Apart from placing your content above and below the image you can also place it on the image and this procedure is referred to as card image overlay.

HTML

The code is the same as in the previous sections with a slight difference that to place the content over the image we are using the .card-img-overlay class instead of the .card-body class.

Output

<img alt="" data-lazy- data-lazy-src="https://kirelos.com/wp-content/uploads/2022/04/echo/image1-54.png" data-lazy- height="397" src="data:image/svg xml,” width=”395″>

A card image overlay was created successfully.

Conclusion

For the purpose of styling a card you can add a header and footer to it using the .card-header, and .card-footer class, whereas, all of the available background color classes can be used to create colorful cards. Moreover, use the .card-title, .card-text, .card-link classes to add a title, text, and links to a card. To further make your cards interesting you can add images using the .card-img-top, or .card-img-bottom classes. Lastly, you can also create a card image overlay using the .card-img-overlay class.