Skip to main content
Bootstrap
CHAPTER 10 Beginner

Bootstrap Cards

Updated: May 18, 2026
5 min read

# CHAPTER 10

Bootstrap Cards

1. Chapter Introduction

The Bootstrap Card is the most versatile and widely used component. Products, blog posts, user profiles, pricing plans, dashboard stats — almost every UI element that shows contained content in a box uses a card. Mastering cards means mastering 30% of all Bootstrap UIs.

2. Learning Objectives

  • Build basic cards with headers, bodies, and footers.
  • Add images to cards (top, bottom, overlays).
  • Create card groups and grids.
  • Build horizontal cards.
  • Build a product listing with cards.

3. Basic Card Structure

html
123456789 
<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">Card body text goes here. Explain your content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
    <a href="#" class="card-link">Another link</a>
  </div>
</div>

4. Card with Image

html
12345678910111213141516171819202122232425262728 
<!-- Image on top -->
<div class="card" style="width: 18rem;">
  <img src="https://picsum.photos/seed/card/400/200" class="card-img-top" alt="Card image" />
  <div class="card-body">
    <h5 class="card-title">Mountain View</h5>
    <p class="card-text">A beautiful landscape photo from the Alps.</p>
    <a href="#" class="btn btn-primary">View Details</a>
  </div>
</div>

<!-- Image on bottom -->
<div class="card">
  <div class="card-body">
    <h5 class="card-title">Image Below</h5>
    <p class="card-text">Content above the image.</p>
  </div>
  <img src="https://picsum.photos/seed/below/400/200" class="card-img-bottom" alt="..." />
</div>

<!-- Image overlay (text on top of image) -->
<div class="card text-white bg-dark border-0" style="max-width: 400px;">
  <img src="https://picsum.photos/seed/overlay/400/250" class="card-img" alt="..." />
  <div class="card-img-overlay d-flex flex-column justify-content-end">
    <h5 class="card-title">Overlay Title</h5>
    <p class="card-text">Text displayed over the image.</p>
    <a href="#" class="btn btn-light btn-sm">Read More</a>
  </div>
</div>

5. Card with Header and Footer

html
123456789101112131415161718192021222324 
<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.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
  <div class="card-footer text-muted">Updated 3 mins ago</div>
</div>

<!-- Styled header -->
<div class="card">
  <div class="card-header bg-primary text-white d-flex justify-content-between">
    <span>Order #1234</span>
    <span class="badge bg-warning text-dark">Pending</span>
  </div>
  <div class="card-body">
    <p class="card-text">Order details here...</p>
  </div>
  <div class="card-footer d-flex justify-content-between">
    <span class="text-muted small">Placed: May 18, 2026</span>
    <a href="#" class="btn btn-sm btn-outline-primary">Track Order</a>
  </div>
</div>

6. Horizontal Cards

html
1234567891011121314 
<div class="card mb-3" style="max-width: 540px;">
  <div class="row g-0">
    <div class="col-md-4">
      <img src="https://picsum.photos/seed/horiz/200/200" class="img-fluid rounded-start h-100" style="object-fit:cover" alt="..." />
    </div>
    <div class="col-md-8">
      <div class="card-body">
        <h5 class="card-title">Horizontal Card</h5>
        <p class="card-text">Image on the left, content on the right. Great for list-style layouts.</p>
        <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
      </div>
    </div>
  </div>
</div>

7. Card Utilities (Color Variants)

html
123456789101112 
<div class="card text-white bg-primary mb-3"><div class="card-body"><h5 class="card-title">Primary</h5></div></div>
<div class="card text-white bg-success mb-3"><div class="card-body"><h5 class="card-title">Success</h5></div></div>
<div class="card text-white bg-danger mb-3"><div class="card-body"><h5 class="card-title">Danger</h5></div></div>

<!-- Subtle colored cards (Bootstrap 5.3+) -->
<div class="card border-success bg-success-subtle mb-3">
  <div class="card-header text-success-emphasis border-success">Success subtle</div>
  <div class="card-body text-success-emphasis">
    <h5 class="card-title">Great job!</h5>
    <p class="card-text">Your operation completed successfully.</p>
  </div>
</div>

8. Mini Project: Product Cards Layout

html
1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Product Listing</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" />
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.0/font/bootstrap-icons.css" />
  <style>
    .product-card:hover { transform: translateY(-4px); transition: .2s; }
    .product-img { height: 220px; object-fit: cover; }
  </style>
</head>
<body class="bg-light">
  <div class="container py-5">
    <h2 class="text-center mb-2">Our Products</h2>
    <p class="text-center text-muted mb-5">Handpicked for you</p>
    <div class="row g-4">

      <div class="col-12 col-sm-6 col-lg-3">
        <div class="card product-card h-100 border-0 shadow-sm">
          <img src="https://picsum.photos/seed/prod1/400/300" class="card-img-top product-img" alt="Laptop" />
          <div class="card-body">
            <span class="badge bg-primary-subtle text-primary mb-2">Electronics</span>
            <h6 class="card-title">MacBook Pro 14"</h6>
            <div class="d-flex align-items-center gap-2 mb-2">
              <span class="fs-5 fw-bold text-dark">$1,999</span>
              <span class="text-muted text-decoration-line-through small">$2,499</span>
            </div>
            <div class="text-warning small mb-3">★★★★★ <span class="text-muted">(128)</span></div>
          </div>
          <div class="card-footer bg-white border-0 pb-3">
            <div class="d-grid gap-2">
              <button class="btn btn-primary btn-sm"><i class="bi bi-cart-plus me-1"></i>Add to Cart</button>
              <button class="btn btn-outline-secondary btn-sm"><i class="bi bi-heart me-1"></i>Wishlist</button>
            </div>
          </div>
        </div>
      </div>

      <div class="col-12 col-sm-6 col-lg-3">
        <div class="card product-card h-100 border-0 shadow-sm">
          <div class="position-relative">
            <img src="https://picsum.photos/seed/prod2/400/300" class="card-img-top product-img" alt="Phone" />
            <span class="badge bg-danger position-absolute top-0 end-0 m-2">SALE</span>
          </div>
          <div class="card-body">
            <span class="badge bg-success-subtle text-success mb-2">Smartphones</span>
            <h6 class="card-title">iPhone 15 Pro</h6>
            <div class="d-flex align-items-center gap-2 mb-2">
              <span class="fs-5 fw-bold text-dark">$999</span>
              <span class="text-muted text-decoration-line-through small">$1,199</span>
            </div>
            <div class="text-warning small mb-3">★★★★☆ <span class="text-muted">(94)</span></div>
          </div>
          <div class="card-footer bg-white border-0 pb-3">
            <div class="d-grid gap-2">
              <button class="btn btn-primary btn-sm"><i class="bi bi-cart-plus me-1"></i>Add to Cart</button>
              <button class="btn btn-outline-secondary btn-sm"><i class="bi bi-heart me-1"></i>Wishlist</button>
            </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>

9. Common Mistakes

  • Not using h-100 in grid card layouts: Without h-100, cards in a grid row won't be equal height. Always add h-100 to cards inside grid columns.
  • card-img-top without object-fit: Images of different aspect ratios will distort. Add style="object-fit:cover" or a fixed height.

10. MCQs

Question 1

What class is the direct parent of card content?

Question 2

Image on top of a card?

Question 3

Equal height cards in a row?

Question 4

Text displayed over a card image?

Question 5

Horizontal card uses?

Question 6

Card footer class?

Question 7

Primary colored card?

Question 8

g-0 on .row inside a card does?

Question 9

Card subtitle class?

Question 10

.card-link creates?

11. Interview Questions

  • Q: How do you make all cards in a Bootstrap grid row equal height?
  • Q: Explain the difference between card-img-top and card-img-overlay.

12. Summary

Bootstrap Cards are the most versatile layout component. They handle product listings, blog previews, user profiles, stat panels, and pricing displays. The key techniques are: h-100 for equal heights, card-img-top for media, card-img-overlay for text-over-image, and horizontal cards using the grid inside a card.

13. Next Chapter Recommendation

In Chapter 11: Bootstrap Navbar and Navigation, we build the most important layout component — a fully responsive navigation bar that collapses to a hamburger menu on mobile.

Finish this Chapter

Save your progress on your learning path and prepare for coding interview challenges.

Previous Chapter Bootstrap Tables
Next Chapter Bootstrap Navbar and Navigation

Discussion

Join the discussion

Log in or create a free account to participate.

Sort: ·

Explore More

📖 Related Tutorials 6

❓ Related Quizzes 1