Bootstrap 5 Cards Tutorial

Flexible content containers for profiles, products, blogs, dashboards, and modern UI layouts.

What are Bootstrap Cards?

Cards are flexible, extensible content containers that can include headers, footers, images, text, lists, and buttons. They replace the old "panels," "wells," and "thumbnails" from Bootstrap 3, providing a unified, modern container system.

1. Basic Card

The simplest card with just a body and text.

<div class="card" style="width: 18rem;">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <h6 class="card-subtitle mb-2 text-body-secondary">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>

Components:

.card - Main container
.card-body - Padding container for content
.card-title - Title text
.card-subtitle - Subtitle text (often muted)
.card-text - Regular text content
.card-link - Styled links

2. Cards with Images

Image at the Top

<div class="card" style="width: 18rem;">
  <img src="https://via.placeholder.com/300x200" class="card-img-top" alt="Card image">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">Some quick example text to build on the card title.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

Image at the Bottom

<div class="card" style="width: 18rem;">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">Some quick example text to build on the card title.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
  <img src="https://via.placeholder.com/300x200" class="card-img-bottom" alt="Card image">
</div>

Image Overlay (Text on top of image)

<div class="card text-white" style="width: 18rem;">
  <img src="https://via.placeholder.com/300x200" class="card-img" alt="Background image">
  <div class="card-img-overlay">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">This text sits on top of the image.</p>
    <p class="card-text"><small>Last updated 3 mins ago</small></p>
  </div>
</div>

3. Card Header and Footer

<div class="card" style="width: 18rem;">
  <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-body-secondary">
    2 days ago
  </div>
</div>

Header with Navigation Tabs

<div class="card text-center">
  <div class="card-header">
    <ul class="nav nav-tabs card-header-tabs">
      <li class="nav-item">
        <a class="nav-link active" href="#">Active</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" aria-disabled="true">Disabled</a>
      </li>
    </ul>
  </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>

4. Card with List Groups

Combine cards with list groups for menu-like layouts.

<div class="card" style="width: 18rem;">
  <div class="card-header">
    Featured
  </div>
  <ul class="list-group list-group-flush">
    <li class="list-group-item">An item</li>
    <li class="list-group-item">A second item</li>
    <li class="list-group-item">A third item</li>
  </ul>
  <div class="card-footer">
    Card footer
  </div>
</div>

List Group with Links inside Card

<div class="card" style="width: 18rem;">
  <img src="https://via.placeholder.com/300x150" class="card-img-top" alt="...">
  <div class="card-body">
    <h5 class="card-title">User Profile</h5>
    <p class="card-text">Some quick example text.</p>
  </div>
  <ul class="list-group list-group-flush">
    <li class="list-group-item">
      <i class="bi bi-envelope"></i> john@example.com
    </li>
    <li class="list-group-item">
      <i class="bi bi-phone"></i> (555) 123-4567
    </li>
    <li class="list-group-item">
      <i class="bi bi-geo-alt"></i> New York, NY
    </li>
  </ul>
  <div class="card-body">
    <a href="#" class="card-link">Edit Profile</a>
    <a href="#" class="card-link">Settings</a>
  </div>
</div>

5. Horizontal Cards

Create cards with image and content side-by-side.

<div class="card mb-3" style="max-width: 540px;">
  <div class="row g-0">
    <div class="col-md-4">
      <img src="https://via.placeholder.com/200x200" class="img-fluid rounded-start" alt="...">
    </div>
    <div class="col-md-8">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content.</p>
        <p class="card-text"><small class="text-body-secondary">Last updated 3 mins ago</small></p>
      </div>
    </div>
  </div>
</div>

6. Card Grid System

Using Grid 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/300x150" class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title 1</h5>
        <p class="card-text">This is a longer card with supporting text below.</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">
      <img src="https://via.placeholder.com/300x150" class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title 2</h5>
        <p class="card-text">This card has supporting text below.</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">
      <img src="https://via.placeholder.com/300x150" class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title 3</h5>
        <p class="card-text">This is a wider card with supporting text below.</p>
      </div>
      <div class="card-footer">
        <small class="text-body-secondary">Last updated 3 mins ago</small>
      </div>
    </div>
  </div>
</div>

Using Card Groups (Equal height, connected)

<div class="card-group">
  <div class="card">
    <img src="https://via.placeholder.com/300x150" class="card-img-top" alt="...">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This is a wider card with supporting text below.</p>
    </div>
    <div class="card-footer">
      <small class="text-body-secondary">Last updated 3 mins ago</small>
    </div>
  </div>
  <div class="card">
    <img src="https://via.placeholder.com/300x150" class="card-img-top" alt="...">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This card has supporting text below.</p>
    </div>
    <div class="card-footer">
      <small class="text-body-secondary">Last updated 3 mins ago</small>
    </div>
  </div>
  <div class="card">
    <img src="https://via.placeholder.com/300x150" class="card-img-top" alt="...">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This is a wider card with supporting text below.</p>
    </div>
    <div class="card-footer">
      <small class="text-body-secondary">Last updated 3 mins ago</small>
    </div>
  </div>
</div>

Masonry-like Card Columns

<div class="card-columns">
  <!-- Note: card-columns is removed in Bootstrap 5, use CSS columns instead -->
  <div class="card" style="width: 18rem;">
    <img src="..." class="card-img-top" alt="...">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">Some quick example text.</p>
    </div>
  </div>
  <!-- Add more cards here -->
</div>

Alternative for Bootstrap 5 (CSS Masonry):

.card-masonry {
  column-count: 3;
  column-gap: 1.5rem;
}
.card-masonry .card {
  break-inside: avoid;
  margin-bottom: 1.5rem;
}

7. Card Background and Text Colors

Use contextual classes to change card appearance.

<!-- Primary card -->
<div class="card text-white bg-primary mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Primary card title</h5>
    <p class="card-text">Some quick example text to build on the card title.</p>
  </div>
</div>

<!-- Success card -->
<div class="card text-white bg-success mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Success card title</h5>
    <p class="card-text">Some quick example text to build on the card title.</p>
  </div>
</div>

<!-- Danger card -->
<div class="card text-white bg-danger mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Danger card title</h5>
    <p class="card-text">Some quick example text to build on the card title.</p>
  </div>
</div>

<!-- Warning card (dark text) -->
<div class="card text-dark bg-warning mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Warning card title</h5>
    <p class="card-text">Some quick example text to build on the card title.</p>
  </div>
</div>

<!-- Info card -->
<div class="card text-dark bg-info mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Info card title</h5>
    <p class="card-text">Some quick example text to build on the card title.</p>
  </div>
</div>

<!-- Dark card -->
<div class="card text-white bg-dark mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Dark card title</h5>
    <p class="card-text">Some quick example text to build on the card title.</p>
  </div>
</div>

Available background classes:

.bg-primary
.bg-secondary
.bg-success
.bg-danger
.bg-warning
.bg-info
.bg-light
.bg-dark

8. Card Borders and Styling

Border Colors

<div class="card border-primary mb-3" style="max-width: 18rem;">
  <div class="card-header bg-transparent border-primary">Header</div>
  <div class="card-body text-primary">
    <h5 class="card-title">Primary card title</h5>
    <p class="card-text">Some quick example text to build on the card title.</p>
  </div>
  <div class="card-footer bg-transparent border-primary">Footer</div>
</div>

Cards with Shadows

<div class="card shadow-sm mb-3" style="width: 18rem;">
  <div class="card-body">
    <h5 class="card-title">Small shadow</h5>
    <p class="card-text">Some text here.</p>
  </div>
</div>

<div class="card shadow mb-3" style="width: 18rem;">
  <div class="card-body">
    <h5 class="card-title">Medium shadow</h5>
    <p class="card-text">Some text here.</p>
  </div>
</div>

<div class="card shadow-lg" style="width: 18rem;">
  <div class="card-body">
    <h5 class="card-title">Large shadow</h5>
    <p class="card-text">Some text here.</p>
  </div>
</div>

Cards with Custom Border Radius

<div class="card rounded-0" style="width: 18rem;">
  <div class="card-body">
    <h5 class="card-title">Square corners</h5>
    <p class="card-text">No border radius.</p>
  </div>
</div>

<div class="card rounded-pill" style="width: 18rem;">
  <div class="card-body">
    <h5 class="card-title">Pill shape</h5>
    <p class="card-text">Completely rounded.</p>
  </div>
</div>

9. Interactive Cards (Clickable)

Card as a Link

<a href="#" class="card text-decoration-none" style="width: 18rem;">
  <div class="card-body">
    <h5 class="card-title">Clickable card</h5>
    <p class="card-text">This entire card is clickable.</p>
  </div>
</a>

Card with Hover Effect

<style>
  .card-hover {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
  }
  .card-hover:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.2);
  }
</style>

<div class="card card-hover" style="width: 18rem;">
  <img src="https://via.placeholder.com/300x150" class="card-img-top" alt="...">
  <div class="card-body">
    <h5 class="card-title">Hover effect</h5>
    <p class="card-text">This card lifts up when you hover over it.</p>
    <a href="#" class="btn btn-primary">Learn More</a>
  </div>
</div>

10. Product Card Example (E-commerce)

<div class="card" style="width: 20rem;">
  <div class="position-relative">
    <img src="https://via.placeholder.com/400x300" class="card-img-top" alt="Product">
    <span class="position-absolute top-0 end-0 badge bg-danger m-2">Sale!</span>
  </div>
  <div class="card-body">
    <div class="d-flex justify-content-between align-items-center mb-2">
      <h5 class="card-title mb-0">Product Name</h5>
      <div class="text-warning">
        <i class="bi bi-star-fill"></i>
        <i class="bi bi-star-fill"></i>
        <i class="bi bi-star-fill"></i>
        <i class="bi bi-star-fill"></i>
        <i class="bi bi-star-half"></i>
      </div>
    </div>
    <p class="card-text text-muted">This is a great product with amazing features.</p>
    <div class="d-flex justify-content-between align-items-center">
      <div>
        <span class="h4 text-primary">$99.99</span>
        <span class="text-muted text-decoration-line-through">$149.99</span>
      </div>
      <button class="btn btn-primary">
        <i class="bi bi-cart-plus"></i> Add to Cart
      </button>
    </div>
  </div>
</div>

11. User Profile Card Example

<div class="card text-center" style="width: 22rem;">
  <div class="card-header bg-primary text-white">
    <i class="bi bi-person-circle fs-1"></i>
  </div>
  <div class="card-body">
    <img src="https://via.placeholder.com/100" class="rounded-circle mb-3" alt="Profile" width="100" height="100">
    <h5 class="card-title">John Doe</h5>
    <p class="card-text text-muted">Senior Full Stack Developer</p>
    <p class="card-text">Passionate about creating amazing web experiences with modern technologies.</p>
    <div class="d-flex justify-content-around mb-3">
      <div>
        <h6 class="mb-0">Projects</h6>
        <small class="text-muted">24</small>
      </div>
      <div>
        <h6 class="mb-0">Followers</h6>
        <small class="text-muted">1.2K</small>
      </div>
      <div>
        <h6 class="mb-0">Following</h6>
        <small class="text-muted">342</small>
      </div>
    </div>
    <div class="d-grid gap-2">
      <button class="btn btn-primary">
        <i class="bi bi-envelope"></i> Message
      </button>
      <button class="btn btn-outline-secondary">
        <i class="bi bi-linkedin"></i> Connect
      </button>
    </div>
  </div>
  <div class="card-footer text-muted">
    <i class="bi bi-geo-alt"></i> San Francisco, CA
  </div>
</div>

12. Blog Post Card Example

<div class="card mb-4">
  <div class="row g-0">
    <div class="col-md-4">
      <img src="https://via.placeholder.com/400x300" class="img-fluid rounded-start h-100 object-fit-cover" alt="Blog image">
    </div>
    <div class="col-md-8">
      <div class="card-body">
        <div class="d-flex justify-content-between align-items-center mb-2">
          <span class="badge bg-primary">Technology</span>
          <small class="text-muted">5 min read</small>
        </div>
        <h5 class="card-title">Understanding Bootstrap 5 Cards</h5>
        <p class="card-text">Learn how to create beautiful, responsive card layouts using Bootstrap 5's powerful card component...</p>
        <div class="d-flex justify-content-between align-items-center">
          <div class="d-flex align-items-center">
            <img src="https://via.placeholder.com/40" class="rounded-circle me-2" width="30" height="30" alt="Author">
            <small>John Doe</small>
          </div>
          <a href="#" class="btn btn-sm btn-outline-primary">Read More →</a>
        </div>
      </div>
    </div>
  </div>
</div>

13. Card Sizing Options

Width Utilities

<div class="card w-25">25% width</div>
<div class="card w-50">50% width</div>
<div class="card w-75">75% width</div>
<div class="card w-100">100% width</div>

Using Grid for Card Width

<div class="row">
  <div class="col-sm-6">
    <div class="card">Half width on small screens</div>
  </div>
  <div class="col-sm-6">
    <div class="card">Half width on small screens</div>
  </div>
</div>

14. Advanced Card Features

Card with Form Elements

<div class="card" style="width: 24rem;">
  <div class="card-header bg-primary text-white">
    <h5 class="mb-0">Login Form</h5>
  </div>
  <div class="card-body">
    <form>
      <div class="mb-3">
        <label for="email" class="form-label">Email address</label>
        <input type="email" class="form-control" id="email" placeholder="Enter email">
      </div>
      <div class="mb-3">
        <label for="password" class="form-label">Password</label>
        <input type="password" class="form-control" id="password" placeholder="Password">
      </div>
      <div class="mb-3 form-check">
        <input type="checkbox" class="form-check-input" id="remember">
        <label class="form-check-label" for="remember">Remember me</label>
      </div>
      <button type="submit" class="btn btn-primary w-100">Login</button>
    </form>
  </div>
  <div class="card-footer text-center">
    <a href="#">Forgot password?</a> | <a href="#">Create account</a>
  </div>
</div>

Card with Progress Bar

<div class="card" style="width: 18rem;">
  <div class="card-body">
    <h5 class="card-title">Project Progress</h5>
    <p class="card-text">Website Redesign</p>
    <div class="progress mb-2">
      <div class="progress-bar" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">75%</div>
    </div>
    <p class="card-text">Mobile App Development</p>
    <div class="progress mb-2">
      <div class="progress-bar bg-success" role="progressbar" style="width: 45%" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100">45%</div>
    </div>
    <button class="btn btn-sm btn-outline-primary mt-2">View Details</button>
  </div>
</div>

Quick Reference Table

Class	Purpose
`.card`	Main container
`.card-body`	Padding container for content
`.card-header`	Top section of card
`.card-footer`	Bottom section of card
`.card-title`	Heading/title text
`.card-subtitle`	Secondary title text
`.card-text`	Paragraph text
`.card-link`	Styled link
`.card-img-top`	Image at top of card
`.card-img-bottom`	Image at bottom of card
`.card-img-overlay`	Overlay text on image
`.card-group`	Equal height, connected cards
`.h-100`	Full height card (for grids)
`.bg-*`	Background color classes
`.border-*`	Border color classes
`.shadow-*`	Shadow utilities

Complete Demo Page

Here's a complete HTML page with all card variations:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Bootstrap 5 Cards - Complete Tutorial</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.0/font/bootstrap-icons.css">
  <style>
    body { 
      background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
      padding: 2rem;
    }
    .demo-section {
      background: white;
      padding: 2rem;
      margin-bottom: 2rem;
      border-radius: 12px;
      box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    }
    .demo-section h2 {
      margin-bottom: 1.5rem;
      color: #333;
      border-left: 4px solid #0d6efd;
      padding-left: 1rem;
    }
  </style>
</head>
<body>
  <div class="container">
    <h1 class="text-center mb-5 display-4">Bootstrap 5 Cards Tutorial</h1>
    
    <!-- Basic Card Section -->
    <div class="demo-section">
      <h2>1. Basic Card</h2>
      <div class="card" style="width: 18rem;">
        <div class="card-body">
          <h5 class="card-title">Basic Card</h5>
          <h6 class="card-subtitle mb-2 text-muted">Subtitle</h6>
          <p class="card-text">This is a basic card with title, subtitle, text, and links.</p>
          <a href="#" class="card-link">Card link</a>
          <a href="#" class="card-link">Another link</a>
        </div>
      </div>
    </div>
    
    <!-- Image Cards Section -->
    <div class="demo-section">
      <h2>2. Cards with Images</h2>
      <div class="row">
        <div class="col-md-4">
          <div class="card">
            <img src="https://via.placeholder.com/300x150" class="card-img-top" alt="...">
            <div class="card-body">
              <h5 class="card-title">Image Top</h5>
              <p class="card-text">Image appears above the content.</p>
              <a href="#" class="btn btn-primary">Button</a>
            </div>
          </div>
        </div>
        <div class="col-md-4">
          <div class="card text-white">
            <img src="https://via.placeholder.com/300x150" class="card-img" alt="...">
            <div class="card-img-overlay">
              <h5 class="card-title">Image Overlay</h5>
              <p class="card-text">Text overlaid on image.</p>
            </div>
          </div>
        </div>
        <div class="col-md-4">
          <div class="card">
            <div class="card-body">
              <h5 class="card-title">Image Bottom</h5>
              <p class="card-text">Image appears below content.</p>
            </div>
            <img src="https://via.placeholder.com/300x150" class="card-img-bottom" alt="...">
          </div>
        </div>
      </div>
    </div>
    
    <!-- Card Grid Section -->
    <div class="demo-section">
      <h2>3. Card Grid System</h2>
      <div class="row row-cols-1 row-cols-md-3 g-4">
        <div class="col">
          <div class="card h-100">
            <div class="card-body">
              <h5 class="card-title">Card 1</h5>
              <p class="card-text">This is a longer card with more content to demonstrate equal heights.</p>
            </div>
          </div>
        </div>
        <div class="col">
          <div class="card h-100">
            <div class="card-body">
              <h5 class="card-title">Card 2</h5>
              <p class="card-text">Shorter content.</p>
            </div>
          </div>
        </div>
        <div class="col">
          <div class="card h-100">
            <div class="card-body">
              <h5 class="card-title">Card 3</h5>
              <p class="card-text">Medium length content that still aligns properly with the grid system.</p>
            </div>
          </div>
        </div>
      </div>
    </div>
    
    <!-- Colored Cards Section -->
    <div class="demo-section">
      <h2>4. Colored Cards</h2>
      <div class="row">
        <div class="col-md-4">
          <div class="card text-white bg-primary mb-3">
            <div class="card-body">
              <h5 class="card-title">Primary Card</h5>
              <p class="card-text">Blue themed card.</p>
            </div>
          </div>
        </div>
        <div class="col-md-4">
          <div class="card text-white bg-success mb-3">
            <div class="card-body">
              <h5 class="card-title">Success Card</h5>
              <p class="card-text">Green themed card.</p>
            </div>
          </div>
        </div>
        <div class="col-md-4">
          <div class="card text-white bg-danger mb-3">
            <div class="card-body">
              <h5 class="card-title">Danger Card</h5>
              <p class="card-text">Red themed card.</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>