How to Create Cards in Bootstrap CSS [+ Code Examples]

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.

See the Pen Bootstrap Card: Basic 1 by Christina Perricone (@hubspot) on CodePen.

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:

See the Pen Bootstrap Card: Basic 2 by Christina Perricone (@hubspot) on CodePen.

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.

See the Pen Bootstrap Card: title and subtitle by Christina Perricone (@hubspot) on CodePen.

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.

See the Pen Bootstrap Card: link by Christina Perricone (@hubspot) on CodePen.

Alternatively, you can turn your entire card into a clickable link with the .stretched-link class.

See the Pen Bootstrap Card: stretched link by Christina Perricone (@hubspot) on CodePen.

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.

See the Pen Bootstrap Card: text align by Christina Perricone (@hubspot) on CodePen.

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.

See the Pen Bootstrap Card: header and footer by Christina Perricone (@hubspot) on CodePen.

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.

See the Pen Bootstrap Card: list by Christina Perricone (@hubspot) on CodePen.

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.

See the Pen Bootstrap Card: card group by Christina Perricone (@hubspot) on CodePen.

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.

See the Pen Bootstrap Cards: card grid by Christina Perricone (@hubspot) on CodePen.

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.

See the Pen Bootstrap Cards: background color by Christina Perricone (@hubspot) on CodePen.

Similarly, we can color our cards’ text and borders with Bootstrap’s .text-* and -border-* utility classes respectively.

See the Pen Bootstrap Cards: text and border color by Christina Perricone (@hubspot) on CodePen.

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.

See the Pen Bootstrap Card: image top and bottom by Christina Perricone (@hubspot) on CodePen.

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.

See the Pen Bootstrap Card: image overlay by Christina Perricone (@hubspot) on CodePen.

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.

See the Pen Bootstrap Cards: Horizontal Card by Christina Perricone (@hubspot) on CodePen.

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.