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:
- Card Components
- Card Body
- Card Title
- Card Link
- Card Images
- Images Placed on Top
- Images Placed on Bottom
- Image Overlays
- Card Header
- Card Footer
- Card List Groups
- Card Navigation
- Navigation Tabs
- Navigation Pills
- Card Styling
- Text Alignment
- Background Color
- Borders
- Substractive Version
- Additive Version
- Colors
- Card Layouts
- Using the Grid System
- Using Sizing Utilities
- Using Custom CSS
- Card Groups
- Card Decks
- Card Columns
- Custom Cards
- Profile Card
- Article Card
- Product Card
- Testimonial Card
- Pricing Card
- Further Reading
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:
dark
Hello world!
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 .card-subtitle card on 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:
dark
Bologna
Emilia-Romagna Region, Italy
It is the seventh most populous city in Italy, at the heart of a metropolitan area of about one million people.
Card Links
To add links to your card, you can use the .card-link class on the tag. This ensures that your links are nicely aligned if you have more than one positioned on a single line. Here is an example:
dark
Bologna
Emilia-Romagna Region, Italy
It is the seventh most populous city in Italy, at the heart of a metropolitan area of about one million people.
Read More Book a Trip
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:
dark
Bologna
Emilia-Romagna Region, Italy
It is the seventh most populous city in Italy, at the heart of a metropolitan area of about one million people.
Read More Book a Trip
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 tag placed after the .card-body.
dark
Bologna
Emilia-Romagna Region, Italy
It is the seventh most populous city in Italy, at the heart of a metropolitan area of about one million people.
Read More Book a Trip
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.
dark
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
dark ... ... To add a footer to a card, you need the
dark It is the seventh most populous city in Italy, at the heart of a metropolitan area of about one million people. 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 If you want to add more components after the
dark It is the seventh most populous city in Italy, at the heart of a metropolitan area of about one million people. 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
dark ... ... ... 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
dark ... ... ... 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. 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
dark ... ... ... 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:
dark 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: Here is an example of a Bootstrap 4 card without borders:
dark Additive Version You can add borders to an element on all sides with the Contextual Colors Just like with all other contextual classes from Bootstrap 4, the options for context are
dark 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. 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:
dark 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:
dark And of course you can go ahead and specify your custom width. Here is a card set to
dark 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
dark If you want the cards to be spaced out, but still have the same width and height, then you can use the
dark 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
dark 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. The profile card features a cover and profile photo together with the name and description. The information is centrally aligned with the .
dark ... 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.
dark I love quick, simple pasta dishes, and this is one of my favorite. 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.
dark ... We have created an example testimonial card by placing a blockqoute over an image. Here is how it looks:
dark 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:
dark Photo credit to BabyJack for his shot. 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: The post Day 13: Bootstrap 4 Cards Tutorial and Examples appeared first on BootstrapBay..card-header to a .card-header class directly to a Bologna
Emilia-Romagna Region, Italy
City Breaks
Oslo
Oslofjord, Norway
Card Footer
.card-footer class. Here is how it looks:Bologna
Emilia-Romagna Region, Italy
Card List Groups
.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..list-group, you can add another .card-body container. There is no limit on the number of .card-bodys you can use.Bologna
Emilia-Romagna Region, Italy
Card Navigation
.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.Bologna
Emilia-Romagna Region, Italy
.card-header. And placed the panels inside the .card-body, activating them via JavaScript.Bologna
Emilia-Romagna Region, Italy
Bootstrap 4 Card Styling
Text Alignment
.text-left, .text-center and .text-right classes on the .card element or on smaller components. Here are some examples:Bologna
Emilia-Romagna Region, Italy
Oslo
Oslofjord, Norway
Berlin
Brandenburg, Germany
Background Color
Borders
.border-0 deletes all borders,.border-top-0 deletes the top border,.border-bottom-0 deletes the bottom border,.border-right-0 deletes the right border and.border-left-0 deleted the left border..border class. Of you can add borders just on a specific site with the classes .border-top, .border-bottom, .border-right, .border-left.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:Bootstrap 4 Card Layouts
Using the Grid system
Using Sizing Utilities
Using Custom CSS
20rem://html
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
.card-group class.
Bootstrap 4 Card Decks
.card-deck class instead of the .card-group one.Bootstrap 4 Card Columns
.card-columns class, the cards inside will align top to bottom, left to right. Here is an example:
Bootstrap 4 Custom Cards
Bootstrap 4 Profile Card
text-center utility. The profile photo needed a bit of extra styling in order for it to into the cover photo.Robert Downey Jr.
Famous Actor
Bootstrap 4 Article Card
Pasta with Prosciutto
30 minutes
4 portions
Bootstrap 4 Product Card
Vans Sk8-Hi MTE Shoes
Style: VA33TXRJ5
$125
Bootstrap 4 Testimonial Card
Bootstrap 4 Pricing Card
Pay as You Go
$299
Taxes per Month
And that is all for today! It has probably been one of the longest articles of the series. Congratulations for finishing it!
Further Reading
