This tutorial explains all about Bootstrap Cards. Learn to create a Bootstrap 4 card including card contents, card styles, card layout, etc.:
In this tutorial, we have covered an introduction to Bootstrap 4 Cards, how to create a basic card, card content types, card styles, card layout, cards with a stretched link. In the later part, we have also listed a few frequently asked questions of cards for your possible queries.
Please note that we have used Bootstrap version 4 in all examples.
=> Take A Look At The Bootstrap Beginners Guide Here
Let’s begin!
Table of Contents:
Bootstrap Cards
A Bootstrap card is a bordered container. Cards can be used to show a set of content with various styling options.
The following table summarizes the classes of Bootstrap 4 that we have used in this tutorial.
| Class | Usage |
|---|---|
| The .card class | This class is used to create a card. |
| The .card-header class | This class is used to add a Bootstrap header to the card. |
| The .card-body class | This class is used to add a body to the card. |
| The .card-footer class | This class is used to add a Bootstrap footer to the card. |
| The .card-title class | This class is used to add a title to the card. |
| The .card-link class | This class is used to add a link to the card |
| The .card-subtitle class | This class is used to add a sub-title to the card. |
| The .card-text class | This class is used to remove the bottom margins for a < p> element if it is the last child element or the only child element inside the card body. |
| The .card-img class | This class is used to insert an image inside the card. |
| The .card-img-top class | This class is used to insert the card image at the top inside the card. |
| The .card-img-bottom class | This class is used to insert the card image at the bottom inside the card. |
| The .card-img-overlay class | This class is used to convert an image into a card background and overlay the card text. |
| The .card-group class | This class is used to create cards that have equal heights and widths. |
| The .card-deck class | This class is also used to create cards that have equal heights and widths, but cards are not attached to each other. |
| The .card-columns class | This class is used to add masonry-like columns to the cards. |
| The .stretched-link class | This class is used to make the whole card act as a link. |
| The .bg-primary class | This class is used to add a blue color to the background of the card. |
| The .bg-secondary class | This class is used to add a grey color to the background of the card. |
| The .bg-success class | This class is used to add a green color to the background of the card. |
| The .bg-danger class | This class is used to add a red color to the background of the card. |
| The .bg-warning class | This class is used to add an orange color to the background of the card. |
| The .bg-info class | This class is used to add a light blue color to the background of the card. |
| The .bg-light class | This class is used to add a light grey color to the background of the card. |
| The .bg-dark class | This class is used to add a dark grey color to the background of the card. |
| The .border-primary class | This class is used to add a blue color outline to a card. |
| The .border-secondary class | This class is used to add a grey color outline to a card. |
| The .border-success class | This class is used to add a green color outline to a card. |
| The .border-danger class | This class is used to add a red color outline to a card. |
| The .border-warning class | This class is used to add an orange color outline to a card. |
| The .border-info class | This class is used to add a light blue color outline to a card. |
| The .border-light class | This class is used to add a light grey color outline to a card. |
| The .border-dark class | This class is used to add a dark grey color outline to a card. |
How To Create Basic Bootstrap 4 Card
Add the .card class to a <div> element and inside the <div> element, add another <div> element with the .card-body class to create a basic Bootstrap card. You can add text inside the inner <div> element. This is the most basic card that you can create, and it is a body-only card.
You can also have the options to add headers, footers, images, etc. to the cards.
Example of a basic card:
The below programming code shows an example of a basic card. You can try this example by running the below programming code.
<!DOCTYPE html> <html lang="en"> <head> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css"> </head> <body> <div class="container mt-3"> <div class="card"> <div class="card-body">This is a basic card.</div> </div> </div> <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js"></script> </body> </html>
The below screenshot shows the browser output of the above programming code.
Card Content Types
Bootstrap cards have several content types such as,
- card header
- card body
- card footer
- card image
- card title
- card sub-title
- card link
Note:
The .card-img class is used to insert an image into the card. You can insert the image either at the top or bottom inside the card. If you want to insert the image at the top inside the card, add the .card-img-top class, and if you want to insert the image at the bottom inside the card, add the .card-img-bottom class.
The .card-img-overlay class is used to convert an image into a card background and overlay the card text
Examples of card content types:
The below programming code shows two card examples with various card content types (card header, card body, card footer, card image, card title, card sub-title, and card link).
You can try this example by running the below programming code:
<!DOCTYPE html> <html lang="en"> <head> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css"> </head> <body> <div class="container mt-3"> <h3>Example 1</h3> <div class="card mb-3" style="width:400px"> <div class="card-header bg-primary"> Featured </div> <div class="card-body"> <h5 class="card-title">Card Title</h5> <h6 class="card-subtitle mb-2 text-muted">Card Sub-title</h6> <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec leo.</p> </div> <a href="#" class="card-link pl-3 pb-3">Card link</a> <div class="card-footer"> <small class="text-muted">Last updated: 2 days ago</small> </div> </div> <h3>Example 2</h3> <div class="card mb-3" style="width:400px"> <img class="card-img-top" src="image-name.png" alt="Card image cap"> <div class="card-body"> <h5 class="card-title">Another Card Title</h5> <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec leo.</p> </div> <div class="card-footer"> <small class="text-muted">Last updated: 1 day ago</small> </div> </div> </div> <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js"></script> </body> </html>
The below screenshot shows the browser output of the above programming code.
Bootstrap Card Styles
Background Colors for Cards
Add the .bg-* contextual class to the <div> element with the .card class to create a colored card.
There are eight contextual classes that we can use to add colors to the background of the cards. These are listed below:
- The .bg-primary class – This class is used to add a blue color to the background of the card.
- The .bg-secondary class – This class is used to add a grey color to the background of the card.
- The .bg-success class – This class is used to add a green color to the background of the card.
- The .bg-danger class – This class is used to add a red color to the background of the card.
- The .bg-warning class – This class is used to add an orange color to the background of the card.
- The .bg-info class – This class is used to add a light blue color to the background of the card.
- The .bg-light class – This class is used to add a light grey color to the background of the card.
- The .bg-dark class – This class is used to add a dark grey color to the background of the card.
Border Colors for Cards
A card with a colored border may be a good option if you need a card without any background-color, but still want to have some colors.
Add the .border-* contextual class to the <div> element with the .card class to add a color to the card border.
There are eight contextual classes that we can use to add colors to the card borders as shown in the below list.
- The .border-primary class – This class is used to add a blue color outline to a card.
- The .border-secondary class – This class is used to add a grey color outline to a card.
- The .border-success class – This class is used to add a green color outline to a card.
- The .border-danger class – This class is used to add a red color outline to a card.
- The .border-warning class – This class is used to add an orange color outline to a card.
- The .border-info class – This class is used to add a light blue color outline to a card.
- The .border-light class – This class is used to add a light grey color outline to a card.
- The .border-dark class – This class is used to add a dark grey color outline to a card.
Examples of Card Styles
The below programming code shows examples of cards with background colors and cards with colored borders. You can try this example by running the below programming code.
<!DOCTYPE html> <html lang="en"> <head> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css"> </head> <body> <div class="container mt-3"> <h3>Cards with Background Colors</h3> <div class="card bg-primary"> <div class="card-body">Primary card</div> </div> <br> <div class="card bg-secondary"> <div class="card-body">Secondary card</div> </div> <br> <div class="card bg-success"> <div class="card-body">Success card</div> </div> <br> <div class="card bg-danger"> <div class="card-body">Danger card</div> </div> <br> <div class="card bg-warning"> <div class="card-body">Warning card</div> </div> <br> <div class="card bg-info"> <div class="card-body">Info card</div> </div> <br> <div class="card bg-light"> <div class="card-body">Light card</div> </div> <br> <div class="card bg-dark text-white mb-5"> <div class="card-body">Dark card</div> </div> <h3>Cards with Colored Borders</h3> <div class="card border-primary"> <div class="card-body">Primary card border</div> </div> <br> <div class="card border-secondary"> <div class="card-body">Secondary card border</div> </div> <br> <div class="card border-success"> <div class="card-body">Success card border</div> </div> <br> <div class="card border-danger"> <div class="card-body">Danger card border</div> </div> <br> <div class="card border-warning"> <div class="card-body">Warning card border</div> </div> <br> <div class="card border-info"> <div class="card-body">Info card border</div> </div> <br> <div class="card border-light"> <div class="card-body">Light card border</div> </div> <br> <div class="card border-dark mb-3"> <div class="card-body">Dark card border</div> </div> </div> <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js"></script> </body> </html>
The below screenshot shows the browser output of the above programming code.
Bootstrap Card Layout
Card Groups
Card groups are used to create cards that have equal heights and widths, but it removes left and right margins between cards, and the cards are attached to each other.
Add the .card-group class to create a card group.
Card groups are displayed in the horizontal direction. But, for small screens (screen size less than 576 pixels), the card groups are displayed in the vertical direction.
Card Decks
Card decks are also used to create cards that have equal heights and widths, but it does not remove the left and right margins between cards. So the cards are not attached to each other, unlike in card groups.
Add the .card-deck class to create a card deck.
Card decks are displayed in a horizontal direction. But, for small screens (screen size less than 576 pixels), the card decks are displayed in the vertical direction.
Card Columns
Add the .card-columns class to add masonry-like columns to the cards. It automatically adjusts the card layout when you are adding more columns. For small screens (screen size less than 576 pixels), the cards are displayed in the vertical direction.
Examples of Card Layout
The below programming code shows an example of a card group, a card deck, and card columns. You can try this example by running the below programming code.
<!DOCTYPE html> <html lang="en"> <head> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css"> </head> <body> <div class="container mt-3"> <h3>Cards Groups</h3> <div class="card-group mb-3"> <div class="card bg-primary"> <div class="card-body"> <p class="card-text">Sony</p> </div> </div> <div class="card bg-warning"> <div class="card-body"> <p class="card-text">Samsung</p> </div> </div> <div class="card bg-danger"> <div class="card-body"> <p class="card-text">LG</p> </div> </div> </div> <h3>Cards Decks</h3> <div class="card-deck mb-3"> <div class="card bg-primary"> <div class="card-body"> <p class="card-text">Sony</p> </div> </div> <div class="card bg-warning"> <div class="card-body"> <p class="card-text">Samsung</p> </div> </div> <div class="card bg-danger"> <div class="card-body"> <p class="card-text">LG</p> </div> </div> </div> <h3>Cards Columns</h3> <div class="card-columns"> <div class="card bg-danger"> <div class="card-body text-center"> <p class="card-text"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. In a tincidunt nulla. Maecenas ornare nisi diam, sagittis ultrices est sagittis sed. Mauris varius ullamcorper faucibus. </p> </div> </div> <div class="card bg-primary"> <div class="card-body text-center"> <p class="card-text"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam auctor, dui a facilisis accumsan, arcu. </p> </div> </div> <div class="card bg-warning"> <div class="card-body text-center"> <p class="card-text"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ornare. </p> </div> </div> <div class="card bg-success"> <div class="card-body text-center"> <p class="card-text"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eget diam viverra, sollicitudin enim sit amet, convallis velit. Suspendisse maximus nibh nec volutpat varius. Donec. </p> </div> </div> </div> </div> <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js"></script> </body> </html>
The below screenshot shows the browser output of the above programming code.
For small screens, the browser output will similar to the below screenshot.
Bootstrap Cards With Stretched Link
The .stretched-link class is used to make the whole card act like a link. So the whole card is clickable and hoverable.
Example of a card with a stretched link:
The below programming code shows an example of a card with a stretched link. You can try this example by running the below programming code.
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css">
</head>
<body>
<div class="container mt-3">
<div class="card" style="width:400px">
<div class="card-body">
<h4 class="card-title">Alice</h4>
<p class="card-text">Alice in Wonderland.</p>
<a href="#" class="btn btn-primary stretched-link">See Profile</a>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
The below screenshot shows the browser output of the above programming code.
Frequently Asked Questions
In this section, we are going to look at some of the frequently asked questions (FAQs) of cards.
Q #1) What are Bootstrap 4 Cards?
Answer: Bootstrap cards are bordered containers that are used to show various contents.
Q #2) When can you use Bootstrap 4 Cards?
Answer: It can be used when you want to show a set of content.
Q #3) How can you create cards with the same height?
Answer: You can use card groups or card decks to create cards with the same height.
Q #4) How can you create cards with the same height but add a space between two cards?
Answer: You can use card decks to create cards with the same height and add a space between two cards.
Q #5) How can you center text inside the card?
Answer: Add the .text-center class to center text inside the card.
Q #6) How to change the color of a bootstrap card?
Answer: Add the .bg-* contextual class to change the color of a bootstrap card. There are eight contextual classes used for background colors of cards. They are the .bg-primary class, the .bg-secondary class, the .bg-success class, the .bg-danger class, the .bg-warning class, the .bg-info class, the .bg-light class and the .bg-dark class.
Conclusion
A Bootstrap card is a bordered container and has options to add a wide range of features such as header, footer, images, titles, links, etc. It also uses contextual classes to add various colors to the cards. Further, it provides facilities to control other features of cards such as card layout, etc.
=> Read Through The Easy Bootstrap Training Series