Bootstrap Cards — Flexible Content Containers

DodaTech Updated 2026-06-28 6 min read

In this tutorial, you will learn about Bootstrap Cards. We cover key concepts, practical examples, and best practices to help you master this topic.

Bootstrap cards replace panels, wells, and thumbnails from earlier versions with a single flexible content container supporting headers, footers, images, and layout options.

What You'll Learn

You will learn how to build cards with headers, bodies, and footers, add images to cards, create card groups, grids, and decks, and customize card styling.

Why It Matters

Cards organize content visually. DodaTech's blog uses card grids for article previews, product cards for the store, and user profile cards for the community section.

Real-World Use

Doda Browser's extension gallery displays each extension in a card with icon, name, description, rating, and install button — all within a responsive card grid.

flowchart LR
    A[Navs & Tabs] --> B[Cards]
    B --> C[Basic Card]
    B --> D[Card Image]
    B --> E[Card Groups]
    B --> F[Card Layouts]
    B --> G[Styling]
    style B fill:#7952b3,stroke:#563d7c,color:#fff
    style C fill:#22c55e,stroke:#16a34a,color:#fff

Basic Card

<div class="card" style="width: 18rem;">
  <div class="card-body">
    <h5 class="card-title">Card Title</h5>
    <h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    <a href="#" class="card-link">Card link</a>
    <a href="#" class="card-link">Another link</a>
  </div>
</div>

Expected output: A card with title, subtitle, body text, and two links in the body section.

Card with Header and Footer

<div class="card">
  <div class="card-header">
    Featured
  </div>
  <div class="card-body">
    <h5 class="card-title">Special title treatment</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
  <div class="card-footer text-muted">
    2 days ago
  </div>
</div>

Expected output: A card with a gray header bar, body content with button, and a muted footer.

Card Images

<div class="card" style="width: 18rem;">
  <img src="https://via.placeholder.com/286x180" class="card-img-top" alt="Card image">
  <div class="card-body">
    <h5 class="card-title">Image Card</h5>
    <p class="card-text">This card has an image at the top.</p>
    <a href="#" class="btn btn-primary">View</a>
  </div>
</div>

<div class="card mt-3" style="width: 18rem;">
  <div class="card-body">
    <h5 class="card-title">Image Overlay</h5>
    <p class="card-text">This card has an image behind the text.</p>
  </div>
  <img src="https://via.placeholder.com/286x180" class="card-img-bottom" alt="Card bottom image">
</div>

Expected output: First card has an image above the body. Second card has an image below the body.

Image Overlay

<div class="card text-white" style="width: 18rem;">
  <img src="https://via.placeholder.com/286x180" class="card-img" alt="Background">
  <div class="card-img-overlay">
    <h5 class="card-title">Overlay Title</h5>
    <p class="card-text">Text appears on top of the background image.</p>
  </div>
</div>

Expected output: Text overlaid on top of a background image within the card.

Card Groups

<div class="card-group">
  <div class="card">
    <img src="https://via.placeholder.com/286x180" class="card-img-top" alt="Card 1">
    <div class="card-body">
      <h5 class="card-title">Card 1</h5>
      <p class="card-text">All cards in a group have equal height.</p>
    </div>
  </div>
  <div class="card">
    <img src="https://via.placeholder.com/286x180" class="card-img-top" alt="Card 2">
    <div class="card-body">
      <h5 class="card-title">Card 2</h5>
      <p class="card-text">Cards share height and remove gaps between them.</p>
    </div>
  </div>
  <div class="card">
    <img src="https://via.placeholder.com/286x180" class="card-img-top" alt="Card 3">
    <div class="card-body">
      <h5 class="card-title">Card 3</h5>
      <p class="card-text">Useful for equal-height card rows.</p>
    </div>
  </div>
</div>

Expected output: Three cards side by side with equal heights, joined together without gaps.

Card Grids with CSS Columns

<div class="row row-cols-1 row-cols-md-3 g-4">
  <div class="col">
    <div class="card h-100">
      <img src="https://via.placeholder.com/286x180" class="card-img-top" alt="Card">
      <div class="card-body">
        <h5 class="card-title">Card in Grid</h5>
        <p class="card-text">Cards inside grid columns with equal height.</p>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card h-100">
      <img src="https://via.placeholder.com/286x180" class="card-img-top" alt="Card">
      <div class="card-body">
        <h5 class="card-title">Equal Height</h5>
        <p class="card-text">h-100 makes cards fill the column height equally.</p>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card h-100">
      <img src="https://via.placeholder.com/286x180" class="card-img-top" alt="Card">
      <div class="card-body">
        <h5 class="card-title">Responsive Grid</h5>
        <p class="card-text">Use row-cols-* for responsive card columns.</p>
      </div>
    </div>
  </div>
</div>

Expected output: Three cards in a responsive grid with equal heights.

Card Styles

<div class="card text-white bg-primary mb-3" style="max-width: 18rem;">
  <div class="card-header">Primary Card</div>
  <div class="card-body">
    <h5 class="card-title">Primary card title</h5>
    <p class="card-text">Card with primary background.</p>
  </div>
</div>

<div class="card border-danger mb-3" style="max-width: 18rem;">
  <div class="card-header">Danger Border</div>
  <div class="card-body text-danger">
    <h5 class="card-title">Danger card title</h5>
    <p class="card-text">Card with danger border and text.</p>
  </div>
</div>

Expected output: A card with primary background and white text, and a card with a danger-colored border and text.

List Groups in Cards

<div class="card" style="width: 18rem;">
  <div class="card-header">Notifications</div>
  <ul class="list-group list-group-flush">
    <li class="list-group-item">New version available</li>
    <li class="list-group-item">Scan complete</li>
    <li class="list-group-item">Update required</li>
  </ul>
</div>

Expected output: A card with a header and a flush list group as the body content.

Common Mistakes

1. Not Setting a Width on Cards

Cards without explicit width collapse to full container width. Use style="width: 18rem;", w-* classes, or place cards in grid columns.

2. Using Card Groups Without Equal Height Content

Card groups force equal height. If cards have different content amounts, shorter cards get stretched, which may look unbalanced.

3. Forgetting h-100 in Grid Columns

When placing cards in grid columns, the card does not automatically fill the column height. Add h-100 to the card.

4. Overlapping Images in card-img-overlay

Overlay text needs enough contrast against the background image. Use text shadow or dark gradient overlays for readability.

5. Missing card-header and card-footer Semantics

Card headers and footers are purely visual. The HTML5 <header> or <footer> elements provide better semantics when used inside cards.

Practice Questions

What are the three main parts of a card? card-header (optional), card-body (required for content), and card-footer (optional).
How do you make cards in a grid have equal heights? Add h-100 class to each card and place them in equal-height grid columns using row-cols-*.
What is the difference between card-group and a grid of cards? card-group removes gutters between cards and forces equal height. Grid cards keep gutters and use row-cols-* for responsive behavior.
How do you add an image behind card text? Use card-img on the image and wrap text in card-img-overlay div.
What class creates a card with a colored background? bg-primary, bg-success, bg-dark, etc. on the card element change the background color.

Challenge

Create a blog article preview using cards in a responsive grid. Each card should have an image, category badge, title, excerpt, author, and date. Use row-cols-1 row-cols-md-2 row-cols-lg-3 for responsive columns.

FAQ

Can cards contain other Bootstrap components?

Yes. Cards can contain buttons, lists, forms, images, and any other Bootstrap component inside the card-body.

How do I create a horizontal card?

Use d-flex on the card and remove card-img-top. Add a column div for the image and another for the body.

Can I use card-deck in Bootstrap 5?

card-deck was removed in Bootstrap 5. Use card-group or grid with row-cols-* instead.

How do I add a badge to a card?

Place a badge inside the card-header or card-body using .

Can cards be clickable?

Yes. Wrap card content in an tag with stretched-link class on a link inside the card body.

Mini Project

Build a pricing page with three plan cards (Free, Pro, Enterprise) in a responsive grid. Highlight the Pro plan with a primary border, add a popular badge, and include a feature list with list-group-flush.

What's Next

Learn Modals for dialog overlays. Then explore Carousel for image sliders.

← Previous Bootstrap Navs & Tabs — Tabbed and Pill Navigation Next → Bootstrap Modals — Dialog and Overlay Components

Built by the developers of DodaTech

Doda Browser, DodaZIP & Durga Antivirus Pro

Home Browse Bootstrap