Hello and welcome to the 13th day of Bootstrap 4! 😄 Today we will learn about Bootstrap 4 cards. A card is a content container that is flexible and easy to extend. Bootstrap 4 cards replace the panels, wells and thumbnails from Bootstrap 3.
Coming with a variety and components and options for styling and aligning, Bootstrap 4 cards offer extensive use-cases. In this blog article we will show how to add components to the cards and style them with utilities. We will also go through options for displaying cards, making use of the grid system, flex utilities, and classes built specifically for cards. We will finish the article with a series of custom cards that you can easily create once you know all of the above. Let’s get started!
Photo credit to Jakov Suran for his shot.
Today’s article has the following structure:
Bootstrap 4 Card Components
Card are built with the Bootstrap 4 flex so they easily align with other elements. Keep in mind that cards have no margin by default, so you may need to use spacing utilities. Cards don’t have a predefined width, so they fill the width of their parent. They are responsive by default.
Although the Bootstrap team tried to keep the markup and styling to a minimum, the cards a very powerful components and offer multiple ways to present your content. In this part of the article we will present the elements you can place in a card.
Card Body
The main class that offers the card functionalities is the .card class. All other components go inside the .card element.
The main building block of a card is the card body. The body offers a padded content region that takes up the entire width of its card. To add a body to the card, you need the .card-body class. Here is a basic example:
<div class="card">
<div class="card-body">
Hello world!
</div>
</div>
You can notice the default border that comes with the .card class and the padding for the .card-body.
Card Title
To add a title to your card, you can add the .card-title class to an <h[size]> element. And to add a subtitle, you can use the .card-subtitle card on the <h[size]> elements. To align the items with the rest of the content, it is preferable to add titles and subtitles inside the .card-body.
For adding a block of text inside the .card-body without any extra styling, you can use the .card-text class. For example, if you don’t want for your paragraph to have a margin on the bottom, you can add the .card-text class to it. Here is an example with these components:
<div class="card">
<div class="card-body">
<h4 class="card-title">Bologna</h4>
<h6 class="card-subtitle mb-2 text-muted">Emilia-Romagna Region, Italy</h6>
<p class="card-text">It is the seventh most populous city in Italy, at the heart of a metropolitan area of about one million people. </p>
</div>
</div>
Card Links
To add links to your card, you can use the .card-link class on the <a> tag. This ensures that your links are nicely aligned if you have more than one positioned on a single line. Here is an example:
<div class="card">
<div class="card-body">
<h4 class="card-title">Bologna</h4>
<h6 class="card-subtitle mb-2 text-muted">Emilia-Romagna Region, Italy</h6>
<p class="card-text">It is the seventh most populous city in Italy, at the heart of a metropolitan area of about one million people. </p>
<a href="#" class="card-link">Read More</a>
<a href="#" class="card-link">Book a Trip</a>
</div>
</div>
Card Images
Cards have multiple options for adding images. You can choose to add an image as a cap to the top or bottom of the card. Or you can have it as a background, with the content being displayed over it.
Card with Images on Top
To add an image to the top of a card, you need to place the image as the first element before the .card-body. In order to have it aligned with the rest of the card, it needs the .card-img-top class. Here is how it looks:
<div class="card">
<img class="card-img-top" src="https://s3.eu-central-1.amazonaws.com/bootstrapbaymisc/blog/24_days_bootstrap/bologna-1.jpg" alt="Bologna">
<div class="card-body">
<h4 class="card-title">Bologna</h4>
<h6 class="card-subtitle mb-2 text-muted">Emilia-Romagna Region, Italy</h6>
<p class="card-text">It is the seventh most populous city in Italy, at the heart of a metropolitan area of about one million people. </p>
<a href="#" class="card-link">Read More</a>
<a href="#" class="card-link">Book a Trip</a>
</div>
</div>
Cards with Images on Bottom
And if you want to add an image cap at the bottom of the card, you can use the .card-img-bottom class on an <img> tag placed after the .card-body.
<div class="card">
<div class="card-body">
<h4 class="card-title">Bologna</h4>
<h6 class="card-subtitle mb-2 text-muted">Emilia-Romagna Region, Italy</h6>
<p class="card-text">It is the seventh most populous city in Italy, at the heart of a metropolitan area of about one million people. </p>
<a href="#" class="card-link">Read More</a>
<a href="#" class="card-link">Book a Trip</a>
</div>
<img class="card-img-bottom" src="https://s3.eu-central-1.amazonaws.com/bootstrapbaymisc/blog/24_days_bootstrap/bologna-2.jpg" alt="Bologna">
</div>
Cards with Image Overlays
We have talked about image overlay before in the Bootstrap 4 images tutorial, but today we will go into more functionalities. To have an image as the background of the card you need to add the .card-img class. And in order to place content over it, you will need to use the .card-img-overlay class. You will need to place all your components inside the overlay.
<div class="card">
<img class="card-img" src="https://s3.eu-central-1.amazonaws.com/bootstrapbaymisc/blog/24_days_bootstrap/bologna-3.jpg" alt="Bologna">
<div class="card-img-overlay text-white d-flex flex-column justify-content-center">
<h4 class="card-title">Bologna</h4>
<h6 class="card-subtitle mb-2">Emilia-Romagna Region, Italy</h6>
<p class="card-text">It is the seventh most populous city in Italy, at the heart of a metropolitan area of about one million people. </p>
<div class="link d-flex">
<a href="#" class="card-link text-warning">Read More</a>
<a href="#" class="card-link text-warning">Book a Trip</a>
</div>
</div>
</div>
Be careful regarding text to image color ratio. In my example, the text was not readable on the image (even if I made it white), so I added a filter on the .card-img-overlay to darken it and make the text pop.
In order to align the items vertically, I have used the .flex-column utility. To refresh your memory regarding Bootstrap 4 flex utilities, you can check out Day 3: Bootstrap 4 Flex Tutorial and Examples.
Card Header
You have two options to add a header to a Bootstrap 4 card. You can create add the .card-header to a <div> that will contain the elements you want to have in the header. Or you can add the .card-header class directly to a <h[size]> tag.
<div class="card">
<div class="card-header">
City Breaks
</div>
<div class="card-body">
<h4 class="card-title">Bologna</h4>
<h6 class="card-subtitle mb-2">Emilia-Romagna Region, Italy</h6>
<p class="card-text">...</p>
<a href="#" class="btn btn-danger">Get Deal</a>
</div>
</div>
<div class="card">
<h5 class="card-header">
City Breaks
</h5>
<div class="card-body">
<h4 class="card-title">Oslo</h4>
<h6 class="card-subtitle mb-2">Oslofjord, Norway</h6>
<p class="card-text">...</p>
<a href="#" class="card-link text-danger">Read More</a>
<a href="#" class="card-link text-warning">Book a Trip</a>
</div>
</div>
Card Footer
To add a footer to a card, you need the .card-footer class. Here is how it looks:
<div class="card">
<div class="card-body">
<h4 class="card-title">Bologna</h4>
<h6 class="card-subtitle mb-2">Emilia-Romagna Region, Italy</h6>
<p class="card-text">It is the seventh most populous city in Italy, at the heart of a metropolitan area of about one million people. </p>
<a href="#" class="btn btn-danger">Get Deal</a>
</div>
<div class="card-footer text-danger">
2 days left
</div>
</div>
Card List Groups
You can also add list groups in a card. We have learned about the list groups options previously, so you can go back to the Bootstrap 4 Lists tutorial for more details.
Since Bootstrap 4 list groups have a border of their own, we will use the .list-group-flush class to remove that. And in order for the list to fill the entire width of the card, we will place them outside the .card-body element.
If you want to add more components after the .list-group, you can add another .card-body container. There is no limit on the number of .card-bodys you can use.
<div class="card">
<div class="card-body">
<h4 class="card-title">Bologna</h4>
<h6 class="card-subtitle mb-2">Emilia-Romagna Region, Italy</h6>
<p class="card-text">It is the seventh most populous city in Italy, at the heart of a metropolitan area of about one million people. </p>
</div>
<div class="list-group list-group-flush">
<a href="#" class="list-group-item list-group-item-action">
San Petronio Basilica
</a>
<a href="#" class="list-group-item list-group-item-action">University of Bologna</a>
<a href="#" class="list-group-item list-group-item-action">Fountain of Neptune</a>
</div>
<div class="card-body">
<a href="#" class="card-link text-danger">Read more</a>
<a href="#" class="card-link text-warning">Book a Trip</a>
</div>
</div>
Card Navigation
You can display multiple panels inside a Bootstrap 4 card and navigate them using navigation tabs or pills.
Navigation Tabs
To see the syntax and ways to toggle panels with the navigation tabs, you can go back to the Bootstrap 4 navigation tabs tutorial. Using the tabs inside a Bootstrap 4 card is pretty easy.
We have added the tabs inside the .card-header and the .tab-panels inside the .card-body. To have the tabs align nicely in the header, you will need to add the .card-header-tabs class.
<div class="card">
<div class="card-header">
<ul class="nav nav-tabs card-header-tabs" id="bologna-list" role="tablist">
<li class="nav-item">
<a class="nav-link active" href="#description" role="tab" aria-controls="description" aria-selected="true">Description</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#history" role="tab" aria-controls="history" aria-selected="false">History</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#deals" role="tab" aria-controls="deals" aria-selected="false">Deals</a>
</li>
</ul>
</div>
<div class="card-body">
<h4 class="card-title">Bologna</h4>
<h6 class="card-subtitle mb-2">Emilia-Romagna Region, Italy</h6>
<div class="tab-content mt-3">
<div class="tab-pane active" id="description" role="tabpanel">
<p class="card-text">...</p>
<a href="#" class="card-link text-danger">Read more</a>
</div>
<div class="tab-pane" id="history" role="tabpanel" aria-labelledby="history-tab">
<p class="card-text">...</p>
<a href="#" class="card-link text-danger">Read more</a>
</div>
<div class="tab-pane" id="deals" role="tabpanel" aria-labelledby="deals-tab">
<p class="card-text">...</p>
<a href="#" class="btn btn-danger btn-sm">Get Deals</a>
</div>
</div>
</div>
</div>
Navigation Pills
For detailed examples and tutorial on how to use the Bootstrap 4 navigation pills, you can check the Day 11: Bootstrap 4 Navigation Tutorial and Examples. We have used the justified version of the navigation pills inside our .card-header. And placed the panels inside the .card-body, activating them via JavaScript.
<div class="card">
<div class="card-header">
<ul class="nav nav-pills card-header-pills nav-justified" id="bologna-list" role="tablist">
<li class="nav-item">
<a class="nav-link active" href="#description" role="tab" aria-controls="description" aria-selected="true">Description</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#history" role="tab" aria-controls="history" aria-selected="false">History</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#deals" role="tab" aria-controls="deals" aria-selected="false">Deals</a>
</li>
</ul>
</div>
<div class="card-body">
<h4 class="card-title">Bologna</h4>
<h6 class="card-subtitle mb-2">Emilia-Romagna Region, Italy</h6>
<div class="tab-content mt-3">
<div class="tab-pane active" id="description" role="tabpanel">
<p class="card-text">...</p>
<a href="#" class="card-link text-danger">Read more</a>
</div>
<div class="tab-pane" id="history" role="tabpanel" aria-labelledby="history-tab">
<p class="card-text">...</p>
<a href="#" class="card-link text-danger">Read more</a>
</div>
<div class="tab-pane" id="deals" role="tabpanel" aria-labelledby="deals-tab">
<p class="card-text">...</p>
<a href="#" class="btn btn-danger btn-sm">Get Deals</a>
</div>
</div>
</div>
</div>
Bootstrap 4 Card Styling
If you want to change the default settings for a card: its alignment, background color or borders, you can easily do so with the help of utilities. We will take each one and show to do modify it.
Text Alignment
You may want to change the default alignment (to the left) for the card. In order to do this, you can use the text alignment utilities that we described in Day 4: Bootstrap 4 Typography Tutorial and Examples. You can use the .text-left, .text-center and .text-right classes on the .card element or on smaller components. Here are some examples:
<div class="card">
<div class="card-body">
<h4 class="card-title">Bologna</h4>
<h6 class="card-subtitle mb-2">Emilia-Romagna Region, Italy</h6>
<p class="card-text">...</p>
<a href="#" class="card-link text-primary">Book a Trip</a>
</div>
</div>
<div class="card text-center">
<div class="card-body">
<h4 class="card-title">Oslo</h4>
<h6 class="card-subtitle mb-2">Oslofjord, Norway</h6>
<p class="card-text">...</p>
<a href="#" class="card-link text-danger">Read More</a>
</div>
</div>
<div class="card text-right">
<div class="card-body">
<h4 class="card-title">Berlin</h4>
<h6 class="card-subtitle mb-2">Brandenburg, Germany</h6>
<p class="card-text">...</p>
<a href="#" class="card-link text-success">Get Deals</a>
</div>
</div>
Background Color
You can change the contextual background color for the cards using the background color utilities we have learned about in Day 9: Bootstrap 4 Tables Tutorial and Examples. Here is how they look:
<div class="card bg-light">
...
</div>
<div class="card bg-secondary text-white">
...
</div>
<div class="card bg-dark text-white">
...
</div>
<div class="card bg-primary text-white">
...
</div>
<div class="card bg-info">
...
</div>
<div class="card bg-success">
...
</div>
<div class="card bg-warning">
...
</div>
<div class="card bg-danger text-white">
...
</div>
<div class="card bg-transparent">
...
</div>
Borders
Border utilities offer control over the borders that get shown and their colors. There are two ways to decide what borders get displayed: the substractive version and the additive version.
Substractive Version
You can decide what borders to take out with the following classes:
.border-0deletes all borders,.border-top-0deletes the top border,.border-bottom-0deletes the bottom border,.border-right-0deletes the right border and.border-left-0deleted the left border.
Here is an example of a Bootstrap 4 card without borders:
<div class="card border-0">
<div class="card-body">
...
</div>
</div>
Additive Version
You can add borders to an element on all sides with the .border class. Of you can add borders just on a specific site with the classes .border-top, .border-bottom, .border-right, .border-left.
Contextual Colors
Just like with all other contextual classes from Bootstrap 4, the options for context are white, light, secondary, dark, info, primary, success, warningand danger. The class to color the borders with one of the options is .border-[context]. Here is how they look:
<div class="card border-light">
...
</div>
<div class="card border-secondary text-secondary">
...
</div>
<div class="card border-dark text-dark">
...
</div>
<div class="card border-primary text-primary">
...
</div>
<div class="card border-info text-info">
...
</div>
<div class="card border-success text-success">
...
</div>
<div class="card border-warning text-warning">
...
</div>
<div class="card border-danger text-danger">
...
</div>
<div class="card border-white">
...
</div>
Bootstrap 4 Card Layouts
Bootstrap 4 cards have no fixed width, they take the full width of their parents. In order to size and arrange cards, you have multiple possibilities.
Using the Grid system
One of the possibilities is to use the grid system. By creating rows and inserting the cards into columns, you will be able to easily manage the cards in a responsive manner. In order to see all that the grid has to offer, please go back to the Bootstrap 4 grid tutorial.
Here is an example with two cards that take 50% of the width of the screen for devices bigger than the tablet and the full screen for mobile phones:
<div class="row">
<div class="col-12 col-md-6">
<div class="card">
...
</div>
</div>
<div class="col-12 col-md-6">
<div class="card">
...
</div>
</div>
</div>
Using Sizing Utilities
If you don’t want to determine the size of a card by putting it in a certain column, you can use the size utilities we learnt about in Bootstrap 4 flex tutorial. Here is a card that takes 50% of width of the screen:
<div class="card w-50"> ... </div>
Using Custom CSS
And of course you can go ahead and specify your custom width. Here is a card set to 20rem:
//html
<div class="card">
...
</div>
//css
.card {
width: 20rem;
}
The Bootstrap 4 team has also created layouts specifically for cards. If you want to use them you need to be careful, since they are not responsive by default!
Bootstrap 4 Card Groups
You can use card groups to stick together multiple cards. Their width and height will be equal and their footers (if present) will align. To create a card group you need the place the cards in a <div> that has the .card-group class.
<div class="card-group">
<div class="card">
...
</div>
<div class="card">
...
</div>
<div class="card">
...
</div>
</div>
Bootstrap 4 Card Decks
If you want the cards to be spaced out, but still have the same width and height, then you can use the .card-deck class instead of the .card-group one.
<div class="card-deck">
<div class="card">
...
</div>
<div class="card">
...
</div>
<div class="card">
...
</div>
</div>
Bootstrap 4 Card Columns
If you want the cards to be aligned align like the cards on Pinterest (the Masonry grid), you can achieve this in Bootstrap 4 with the card columns. If you wrap your cards into a <div> with the .card-columns class, the cards inside will align top to bottom, left to right. Here is an example:
<div class="card-columns">
<div class="card">
...
</div>
...
<div class="card">
...
</div>
</div>
Bootstrap 4 Custom Cards
Besides the classes and components that Bootstrap 4 provides for cards, I thought it might be useful to also create some custom cards. I have chosen some of the most popular choices: profile, blog, product, testimonial and pricing. They might provide a nice basis on which you can create the variations that you need.
Bootstrap 4 Profile Card
The profile card features a cover and profile photo together with the name and description. The information is centrally aligned with the .text-center utility. The profile photo needed a bit of extra styling in order for it to into the cover photo.
<div class="card">
<img class="card-img-top" src="..." alt="Bologna">
<div class="card-body text-center">
<img class="avatar rounded-circle" src="..." alt="Bologna">
<h4 class="card-title">Robert Downey Jr.</h4>
<h6 class="card-subtitle mb-2 text-muted">Famous Actor</h6>
<p class="card-text">... </p>
<a href="#" class="btn btn-info">Follow</a>
<a href="#" class="btn btn-outline-info">Message</a>
</div>
</div>
Bootstrap 4 Article Card
The article photo features an image with an overlay that shows the category. The body of the card shows a title and short description with a call-to-action-button. I have also added a footer with some blog statistics.
<div class="card">
<img class="card-img" src="..." alt="Bologna">
<div class="card-img-overlay">
<a href="#" class="btn btn-light btn-sm">Cooking</a>
</div>
<div class="card-body">
<h4 class="card-title">Pasta with Prosciutto</h4>
<small class="text-muted cat">
<i class="far fa-clock text-info"></i> 30 minutes
<i class="fas fa-users text-info"></i> 4 portions
</small>
<p class="card-text">I love quick, simple pasta dishes, and this is one of my favorite.</p>
<a href="#" class="btn btn-info">Read Recipe</a>
</div>
<div class="card-footer text-muted d-flex justify-content-between bg-transparent border-top-0">
<div class="views">Oct 20, 12:45PM
</div>
<div class="stats">
<i class="far fa-eye"></i> 1347
<i class="far fa-comment"></i> 12
</div>
</div>
</div>
Bootstrap 4 Product Card
For the product card, we have used a top image cap with a like button on overlay. The card body contains information about the product and highlights the price and buy button.
<div class="card">
<img class="card-img" src="..." alt="Vans">
<div class="card-img-overlay d-flex justify-content-end">
<a href="#" class="card-link text-danger like">
<i class="fas fa-heart"></i>
</a>
</div>
<div class="card-body">
<h4 class="card-title">Vans Sk8-Hi MTE Shoes</h4>
<h6 class="card-subtitle mb-2 text-muted">Style: VA33TXRJ5</h6>
<p class="card-text">...</p>
<div class="options d-flex flex-fill">
<select class="custom-select mr-1">
<option selected>Color</option>
<option value="1">Green</option>
<option value="2">Blue</option>
<option value="3">Red</option>
</select>
<select class="custom-select ml-1">
<option selected>Size</option>
<option value="1">41</option>
<option value="2">42</option>
<option value="3">43</option>
</select>
</div>
<div class="buy d-flex justify-content-between align-items-center">
<div class="price text-success"><h5 class="mt-4">$125</h5></div>
<a href="#" class="btn btn-danger mt-3"><i class="fas fa-shopping-cart"></i> Add to Cart</a>
</div>
</div>
</div>
Bootstrap 4 Testimonial Card
We have created an example testimonial card by placing a blockqoute over an image. Here is how it looks:
<div class="card">
<img class="card-img" src="..." alt="Bologna">
<div class="card-img-overlay text-white d-flex flex-column justify-content-center">
<blockquote class="blockquote text-right">
<p>...</p>
</blockquote>
<div class="author d-flex align-items-center">
<img class="avatar rounded-circle mx-2" src="..." alt="Bologna">
Carlos Ruiz Zafon
</div>
</div>
</div>
Bootstrap 4 Pricing Card
And the last custom card is the pricing card. It contains the price and a list of features for the plan it describes together with an action integrated in the footer:
<div class="card text-center">
<div class="card-header text-center border-bottom-0 bg-transparent text-success pt-4">
<h5>Pay as You Go</h5>
</div>
<div class="card-body">
<h1>$299</h1>
<h5 class="text-muted"><small>Taxes per Month</small></h5>
</div>
<ul class="list-group list-group-flush">
<li class="list-group-item"><i class="fas fa-male text-success mx-2"></i>Real-time fee reporting</li>
<li class="list-group-item"><i class="fas fa-venus text-success mx-2"></i>Pay only for what you use</li>
<li class="list-group-item"><i class="fas fa-gavel text-success mx-2"></i> No setup, monthly, or hidden fees</li>
</ul>
<div class="card-footer border-top-0">
<a href="#" class="text-muted text-uppercase">Create Account <i class="fas fa-arrow-right"></i></a>
</div>
</div>
And that is all for today! It has probably been one of the longest articles of the series. Congratulations for finishing it!
Photo credit to BabyJack for his shot.
Further Reading
All of today’s code is available on Codepen. You copy and paste it to your project or you can fork and edit it on Codepen. Let me know if you run into any kind of trouble and I can help. And let me know in the comments what you were able to accomplish with your new knowledge of Bootstrap 4 cards!
And if you have some spare time, you can check out:
Photo credit to Jon Delman for his shot.
