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

As a programmer, I've been keeping a close eye on the rapid increase in mobile internet traffic. Using assets like Bootstrap, you can create things like Bootstrap cards, which offer many benefits. With this rise, developers and designers need lightweight solutions to build responsive websites. One such solution is Bootstrap CSS, a free and open-source mobile-first framework for CSS.

Bootstrap CSS offers a range of features, including responsive styling for page elements using special HTML classes. In this guide, I'll explore Bootstrap's card element, which serves as a container for various types of content in web design. Cards hold text, media, buttons, links, and more, resembling physical playing cards with a defined border.

Introduced in Bootstrap 4, Bootstrap cards facilitate the quick creation of mobile-friendly content containers. They are perfect for presenting related content and actions in a single-page region, such as linking to an article with an image thumbnail, title, and preview text, or creating a pricing table with multiple cards for each tier.

Bootstrap Card Basics

After researching and talking to professional developers, like Hubspot's Athena Ozanich, I've gained valuable insights about Bootstrap cards. As a student and mentor, I've come to appreciate the flexibility and consistency of Bootstrap cards. Let's now dive into the basics of working with Bootstrap cards.

To create Bootstrap cards, you need to understand the card class and its customizations and layouts. A basic Bootstrap card consists of a .card class with the .card-body class, allowing you to add text, images, links, and other Bootstrap elements within a rounded border.

Let's look at some interactive code pens demonstrating how these are used.

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

You 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 you can start to do some pretty cool things with cards. With the .list-group class, you 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. You 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, you 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, you 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

By utilizing Bootstrap's card element, you can declutter your user interface and present related content in an organized and visually appealing manner. Cards offer a flexible and mobile-friendly solution that users will appreciate on any website. Bootstrap is an excellent framework for creating mobile-first websites, especially if you're new to HTML and CSS. However, I recommend building a solid foundation of HTML and CSS concepts before diving into Bootstrap. If you're starting from scratch, be sure to check out our Beginner's Guide to HTML and CSS for a comprehensive understanding of the essentials.

In summary, Bootstrap cards are a powerful tool for creating responsive UI elements, and understanding their various classes and customization options allows developers and designers to create visually appealing and user-friendly websites.