As mobile internet traffic continues to rise, developers and designers need lightweight solutions for building responsive websites.
Bootstrap CSS aims to address this problem, serving as a free, open-source, mobile-first framework for CSS. Bootstrap lets developers apply responsive built-in styling to page elements with special HTML classes. In this guide, we’ll be exploring one of these classes, Bootstrap's card element.
In web design, a card is essentially a container for other content. It’s an element that holds child elements like text, media (including images and videos), buttons, links, and more. Cards usually have a defined border, giving them the appearance of a physical playing card.
First introduced in Bootstrap 4, the Bootstrap card element allows users to quickly create a mobile-friendly content container. These cards are great for presenting pieces of related content and actions in a single page region. For example, you can use a card as a link to an article, complete with an image thumbnail, title, and preview text. Or, you could build a pricing table with multiple adjacent cards, each containing information for a tier.
To make cards, you’ll need some knowledge of Bootstrap’s card classes. Below, we’ll review the card class, as well as its most useful customizations and layouts. There’s quite a bit to cover, so let’s jump right in with the basics.
Bootstrap Card Basics
In its simplest form, a Bootstrap card is a .card class with the .card-body class nested inside. This creates a card with a rounded border inside which you can place text, images, links, and other Bootstrap elements.
Since cards are divs, they’ll span the entire width of the page by default. To set a width, you can apply CSS to your cards or place them in a grid, as we’ll see later. We also recommend adding margins to your cards — we’ll do so in future examples.
Like other Bootstrap classes, the .card class is mobile-friendly, simple, and customizable. Here’s what a more fleshed-out card might look like:
We’ll learn how to add each of these components (and more) below.
Bootstrap Card Titles and Text
The .card-title class makes a heading element into the card’s main title. To add a subtitle, use the .card-subtitle class. The .text-muted class helps visually distinguish the title from the subtitle.
We can also distinguish the body text of the card from the title using the .card-text class.
Bootstrap Card Links
Place links inside your card with the .card-link class. When included in an <a> tag, this class adds color, text-decoration, and hover styling to link text. It also spaces multiple adjacent links apart so they’re easier to distinguish.
Alternatively, you can turn your entire card into a clickable link with the .stretched-link class.
Bootstrap Card Text Alignment
To align elements inside your card, use Bootstrap’s alignment classes: text-center centers child elements, and text-end right-aligns child elements.
Bootstrap Card Header and Footer
Card headers and footers are shaded regions at the top or bottom of your card to draw attention to or provide more context for the card. Add a header with the .card-header class and a footer with the .card-footer class.
Bootstrap Card List
Here’s where we start to do some pretty cool things with cards. With the .list-group class, we can add a list of items to our card separated by borders. Add .list-group to the <ul> tag and .list-group-item to each nested <li> tag. I’ve also added the .list-group-flush class to <ul> to remove some extra border thickness.
Bootstrap Card Group
Cards can be arranged into list-like elements called card groups. A card group is a series of adjacent cards with equal widths that scale with the width of their container. To make a card group, enclose one or more .card classes inside a .card-group class.
Bootstrap Card Grid
You can also leverage the Bootstrap grid system to arrange your cards in a grid. Here, I have a .row element set to two columns wide. Each column contains two cards.
Bootstrap Card Colors
Tired of all-grey cards? Fair enough — let’s add some color. We can change the background color of our cards with Bootstrap’s background utilities.
Similarly, we can color our cards’ text and borders with Bootstrap’s .text-* and -border-* utility classes respectively.
Bootstrap Card Images
We’ve already seen some examples of images added to cards — just insert the <img> tag inside the .card class, and the image will take up the width of the card. You can add the class .card-img-top to the <img> tag to put the image at the top of the card, or .card-img-bottom to place the image at the bottom.
You can also create a card with a background image. First, include your image with the class .card-img. Then, add a div with the class .card-img-overlay — elements inside this div will be placed over the background image.
Horizontal Bootstrap Cards
Finally, we can change the orientation of our Bootstrap cards from vertical to horizontal with Bootstrap’s card classes and its row and column classes.
Declutter Your UI With Bootstrap Cards
As we’ve seen, cards are a flexible, adaptable, and mobile-friendly page element. They’re one ideal solution for presenting groups of related content, and users will appreciate the familiar look of cards on any site.
Bootstrap is one of the best ways to create mobile-first websites if you’re new to HTML and CSS. However, we recommend building a strong foundation of HTML and CSS concepts before exploring the framework. See our Beginner’s Guide to HTML and CSS below for everything marketers and new website owners should know to get started.