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:
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.
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.
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.
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.
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.
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.
Originally published Jun 16, 2021 7:00:00 AM, updated August 23 2021