bootstrap-4-cards

Day 13: Bootstrap 4 Cards Tutorial and Examples

 

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!

bootstrap-4-cards-start

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:

dark



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:

dark


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:

dark


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



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.

dark



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 .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.

dark


To add a footer to a card, you need the .card-footer class. Here is how it looks:

dark


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.

dark


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.

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 .card-header. And placed the panels inside the .card-body, activating them via JavaScript.

dark


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:

dark


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:

dark


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-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.

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 .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:

dark


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:

dark


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:

dark


Using Custom CSS

And of course you can go ahead and specify your custom width. Here is a card set to 20rem:

dark



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.

dark


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.

dark


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:

dark


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.

dark


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.

dark


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.

dark


Bootstrap 4 Testimonial Card

We have created an example testimonial card by placing a blockqoute over an image. Here is how it looks:

dark


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:

dark



And that is all for today! It has probably been one of the longest articles of the series. Congratulations for finishing it!

bootstrap-4-cards-end

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:

 

 

Sharing is caring!

Cristina Conacel

Cristina is a web developer and the owner of BootstrapBay. She likes foxes, clean design, writing blog posts and creating themes that are useful to other developers.