Bootstrap 5 Card Tutorial — Complete Guide with Examples

The Bootstrap card is the most versatile component in the framework. It's a content container with flexible options for headers, footers, images and body content. Here's everything you need to know to use them well.

Card Anatomy

<div class="card">
  <!-- Optional image at top -->
  <img src="..." class="card-img-top" alt="...">

  <!-- Optional header -->
  <div class="card-header">Header</div>

  <!-- Main content area -->
  <div class="card-body">
    <h5 class="card-title">Card Title</h5>
    <h6 class="card-subtitle text-muted mb-2">Subtitle</h6>
    <p class="card-text">Card body text goes here.</p>
    <a href="#" class="btn btn-primary">Action</a>
  </div>

  <!-- Optional list group -->
  <ul class="list-group list-group-flush">
    <li class="list-group-item">Item 1</li>
    <li class="list-group-item">Item 2</li>
  </ul>

  <!-- Optional footer -->
  <div class="card-footer text-muted small">Footer text</div>
</div>

None of those sections are required. A card is just a styled container — use only what you need.

Clean Card (No Border, Shadow)

The pattern I use most in admin dashboards:

<div class="card border-0 shadow-sm">
  <div class="card-body p-4">
    <h5 class="fw-bold mb-2">Marvel Angular Dashboard</h5>
    <p class="text-muted small mb-3">
      Angular 21 + Bootstrap 5 admin template. 50+ components, dark mode and RTL support.
    </p>
    <div class="d-flex justify-content-between align-items-center">
      <span class="fw-bold" style="color:#fd4766;">$29</span>
      <a href="https://lettstartdesign.com"
        class="btn btn-sm text-white" style="background:#fd4766;">
        Buy Now
      </a>
    </div>
  </div>
</div>

border-0 removes the default border. shadow-sm adds a subtle shadow instead. This combination looks cleaner on white backgrounds than the default bordered card.

Image Card

<div class="card border-0 shadow-sm" style="max-width:320px;">
  <img src="https://picsum.photos/320/180?random=1"
    class="card-img-top" alt="Template preview">
  <div class="card-body p-3">
    <div class="d-flex justify-content-between align-items-start mb-2">
      <span class="badge" style="background:#fd4766;">Angular</span>
      <span class="text-muted small">⭐ 4.9</span>
    </div>
    <h6 class="fw-bold mb-1">Marvel Angular Dashboard</h6>
    <p class="text-muted small mb-3">Bootstrap 5 + Angular 21 admin template</p>
    <div class="d-flex justify-content-between align-items-center">
      <span class="fw-bold" style="color:#fd4766;">$29</span>
      <a href="https://lettstartdesign.com"
        class="btn btn-sm text-white" style="background:#fd4766;">Buy</a>
    </div>
  </div>
</div>

Horizontal Card

Cards with image on the left and content on the right — great for blog post lists:

<div class="card border-0 shadow-sm mb-3">
  <div class="row g-0">
    <div class="col-4">
      <img src="https://picsum.photos/200/150?random=2"
        class="img-fluid rounded-start h-100"
        style="object-fit:cover;" alt="">
    </div>
    <div class="col-8">
      <div class="card-body py-3 px-3">
        <span class="badge bg-light text-dark border mb-2" style="font-size:0.72rem;">Tutorial</span>
        <h6 class="card-title fw-bold mb-1">How to Build an Admin Dashboard</h6>
        <p class="card-text text-muted small mb-2">
          Step-by-step guide using Bootstrap 5 and vanilla JavaScript.
        </p>
        <a href="#" class="small fw-semibold text-decoration-none" style="color:#fd4766;">
          Read more →
        </a>
      </div>
    </div>
  </div>
</div>

Card Grid

Three-column responsive card grid:

<div class="row row-cols-1 row-cols-sm-2 row-cols-lg-3 g-4">
  <div class="col">
    <div class="card border-0 shadow-sm h-100">
      <img src="https://picsum.photos/300/160?random=10" class="card-img-top" alt="">
      <div class="card-body p-3">
        <h6 class="fw-bold mb-1">Template Name</h6>
        <p class="text-muted small mb-0">Short description here.</p>
      </div>
      <div class="card-footer bg-white border-top-0 d-flex justify-content-between">
        <span class="fw-bold" style="color:#fd4766;">$29</span>
        <a href="#" class="btn btn-sm text-white" style="background:#fd4766;">Buy</a>
      </div>
    </div>
  </div>
  <!-- repeat .col -->
</div>

row-cols-1 row-cols-sm-2 row-cols-lg-3 gives 1 column on mobile, 2 on tablet, 3 on desktop. h-100 on the card makes all cards in a row equal height.

Card with Stretched Link

Makes the entire card clickable — the clean accessible way:

<div class="card border-0 shadow-sm h-100" style="cursor:pointer;">
  <img src="https://picsum.photos/300/160?random=20" class="card-img-top" alt="">
  <div class="card-body p-3">
    <h6 class="fw-bold mb-1">
      <a href="#" class="stretched-link text-decoration-none text-dark">
        Marvel Angular Dashboard
      </a>
    </h6>
    <p class="text-muted small mb-0">Click anywhere on the card to navigate.</p>
  </div>
</div>

stretched-link creates an invisible ::after overlay that covers the entire card. Only use one stretched-link per card.

Card with Hover Effect

<style>
  .hover-card {
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    cursor: pointer;
  }
  .hover-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 32px rgba(0,0,0,0.12) !important;
  }
  .hover-card .card-img-top {
    transition: transform 0.4s ease;
    overflow: hidden;
  }
  .hover-card:hover .card-img-top {
    transform: scale(1.05);
  }
</style>

<div class="card border-0 shadow-sm hover-card overflow-hidden" style="max-width:300px;">
  <img src="https://picsum.photos/300/160?random=30"
    class="card-img-top" alt="">
  <div class="card-body p-3">
    <h6 class="fw-bold mb-1">PORTO Bootstrap Template</h6>
    <p class="text-muted small mb-2">Bootstrap 5 multipurpose template.</p>
    <span class="fw-bold" style="color:#fd4766;">$19</span>
  </div>
</div>

For the image zoom to work, overflow:hidden must be on the card, not the img itself.

Card Color Variants

<!-- Solid color cards -->
<div class="card text-white mb-2" style="background:#fd4766;">
  <div class="card-body">
    <h5 class="card-title">Brand color card</h5>
    <p class="card-text opacity-75">White text on brand background.</p>
  </div>
</div>

<!-- Subtle tinted cards (Bootstrap 5.3) -->
<div class="card border-0 bg-primary-subtle mb-2">
  <div class="card-body">
    <h5 class="card-title text-primary-emphasis">Subtle primary card</h5>
    <p class="card-text text-body-secondary">Soft tint that works in light and dark mode.</p>
  </div>
</div>

<!-- Border accent cards -->
<div class="card border-0 shadow-sm border-start border-4 mb-2" style="border-color:#fd4766!important;">
  <div class="card-body ps-3">
    <h6 class="fw-bold mb-1">Left border accent</h6>
    <p class="text-muted small mb-0">Accent border on left edge only.</p>
  </div>
</div>

Card Header and Footer

<div class="card border-0 shadow-sm">
  <div class="card-header bg-white d-flex align-items-center justify-content-between">
    <h6 class="fw-bold mb-0">Recent Orders</h6>
    <a href="#" class="btn btn-sm text-white" style="background:#fd4766;">View All</a>
  </div>
  <div class="card-body p-0">
    <!-- table or list content -->
  </div>
  <div class="card-footer bg-white border-top d-flex justify-content-between">
    <span class="text-muted small">Showing 5 of 48 orders</span>
    <a href="#" class="small text-decoration-none" style="color:#fd4766;">Load more →</a>
  </div>
</div>

bg-white on header/footer overrides Bootstrap's default gray tint. border-0 on the card removes the outer border for a cleaner look when used with shadow-sm.