Skip to content

Bootstrap Cards Explained — Flexible Content Containers

DodaTech Updated 2026-06-28 1 min read

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

Bootstrap cards are flexible content containers with optional header, footer, images, and body sections, supporting various layouts from single cards to grid groups.

What You'll Learn

  • Card structure and parts
  • Card images and overlays
  • Card groups and decks
  • Grid card layouts
  • Card customization

Why It Matters

Cards are the most versatile Bootstrap component for displaying content collections. They compose well with the grid system for responsive layouts.

<div class="container mt-4">
  <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/300x200" class="card-img-top" alt="...">
        <div class="card-body">
          <h5 class="card-title">Card Title</h5>
          <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content.</p>
        </div>
        <div class="card-footer">
          <small class="text-body-secondary">Last updated 3 mins ago</small>
        </div>
      </div>
    </div>
    <div class="col">
      <div class="card h-100">
        <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.</p>
          <a href="#" class="btn btn-primary">Go somewhere</a>
        </div>
      </div>
    </div>
    <div class="col">
      <div class="card h-100 text-bg-dark">
        <div class="card-body">
          <h5 class="card-title">Dark Card</h5>
          <p class="card-text">This card uses text-bg-dark for inverted colors.</p>
        </div>
      </div>
    </div>
  </div>
</div>

Expected output: Three responsive cards in a grid: image card with footer, header card with button, and dark-themed card.

← Previous Bootstrap Tables Explained — Styled Data Tables Next → Bootstrap Navbar Explained — Navigation Components

Built by the developers of DodaTech

Doda Browser, DodaZIP & Durga Antivirus Pro

Home Browse Bootstrap