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

Asmobile internet traffic continues to rise, developers and designers need lightweight solutions for building responsive websites.

靴子trap CSSaims 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 HTMLclasses. In this guide, we’ll be exploring one of these classes, Bootstrap's card element.

在网页设计中,卡本质上是一个容器or 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.

靴子trap Card Basics

In its simplest form, a Bootstrap card is a.cardclass with the .card-bodyclass 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靴子trap Card: Basic 1by Christina Perricone (@hubspot) onCodePen.

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.cardclass is mobile-friendly, simple, and customizable. Here’s what a more fleshed-out card might look like:

See the Pen靴子trap Card: Basic 2by Christina Perricone (@hubspot) onCodePen.

We’ll learn how to add each of these components (and more) below.

靴子trap Card Titles and Text

The.card-titleclass makes a heading element into the card’s main title. To add a subtitle, use the.card-subtitleclass. The.text-mutedclass helps visually distinguish the title from the subtitle.

We can also distinguish the body text of the card from the title using the.card-textclass.

See the Pen靴子trap Card: title and subtitleby Christina Perricone (@hubspot) onCodePen.

靴子trap Card Links

Place links inside your card with the.card-linkclass. When included in antag, 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靴子trap Card: linkby Christina Perricone (@hubspot) onCodePen.

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

See the Pen靴子trap Card: stretched linkby Christina Perricone (@hubspot) onCodePen.

靴子trap Card Text Alignment

To align elements inside your card, use Bootstrap’s alignment classes:text-centercenters child elements, andtext-endright-aligns child elements.

See the Pen靴子trap Card: text alignby Christina Perricone (@hubspot) onCodePen.

靴子trap 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-headerclass and a footer with the.card-footerclass.

See the Pen靴子trap Card: header and footerby Christina Perricone (@hubspot) onCodePen.

靴子trap Card List

Here’s where we start to do some pretty cool things with cards. With the.list-groupclass, we can add a list of items to our card separated by borders. Add.list-groupto the

tag and.list-group-itemto each nested
• tag. I’ve also added the.list-group-flushclass to
  to remove some extra border thickness.

  See the Pen靴子trap Card: listby Christina Perricone (@hubspot) onCodePen.

  靴子trap 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.cardclasses inside a .card-groupclass.

  See the Pen靴子trap Card: card groupby Christina Perricone (@hubspot) onCodePen.

  靴子trap Card Grid

  You can also leverage the Bootstrap grid system to arrange your cards in a grid. Here, I have a.rowelement set to two columns wide. Each column contains two cards.

  See the Pen靴子trap Cards: card gridby Christina Perricone (@hubspot) onCodePen.

  靴子trap 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靴子trap Cards: background colorby Christina Perricone (@hubspot) onCodePen.

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

  See the Pen靴子trap Cards: text and border colorby Christina Perricone (@hubspot) onCodePen.

  靴子trap Card Images

  We’ve already seen some examples of images added to cards — just insert thetag inside the.cardclass, and the image will take up the width of the card. You can add the class.card-img-topto thetag to put the image at the top of the card, or.card-img-bottomto place the image at the bottom.

  See the Pen靴子trap Card: image top and bottomby Christina Perricone (@hubspot) onCodePen.

  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靴子trap Card: image overlayby Christina Perricone (@hubspot) onCodePen.

  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靴子trap Cards: Horizontal Cardby Christina Perricone (@hubspot) onCodePen.

  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.

  靴子trap 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

  Topics:

  靴子trap & CSS

  Don't forget to share this post!