Bootstrap Cards

Cards are flexible, self-contained content containers used throughout modern web UIs. This lesson covers card structure, headers, footers, images, and grouping cards together.

Bootstrap Cards Overview

A card starts with the .card wrapper, which provides a bordered, rounded container with a light background. Inside, .card-body holds the main content, while optional .card-header and .card-footer sections add structure above and below the body.

Cards commonly include .card-img-top for a full-width image above the body, .card-title and .card-text for typography, and can be arranged into responsive grids using the standard row/column system or grouped edge-to-edge with .card-group.

Concept	Description	Common Usage
.card	Bordered, rounded content container	Base wrapper for any card-based UI
.card-body	Padded inner content area	Titles, text, and actions inside a card
.card-header / .card-footer	Optional top and bottom sections	Titles, actions, or metadata outside the main body
.card-img-top	Full-width image at the top of a card	Product photos, blog thumbnails
Card grids / card-group	Multiple cards arranged responsively	Product listings, feature highlights

Bootstrap Cards Example

<div class="card" style="max-width: 20rem;">
  <img src="product.jpg" class="card-img-top" alt="Product photo">
  <div class="card-body">
    <h5 class="card-title">Wireless Headphones</h5>
    <p class="card-text">Noise-cancelling, 30-hour battery life, and a comfortable over-ear fit.</p>
    <a href="/product/headphones" class="btn btn-primary">View Details</a>
  </div>
  <div class="card-footer text-muted">
    Updated 2 days ago
  </div>
</div>

The card-img-top displays a full-width product image, the card-body holds the title, description, and call-to-action button, and the card-footer adds muted metadata below the main content, all within a single bordered card container.

Top 10 Bootstrap Cards Examples

These are the card structural classes you'll combine to build almost any card-based UI.

#	Example	Syntax
1	Basic card	`<div class="card"><div class="card-body">Content</div></div>`
2	Card with title and text	`<h5 class="card-title">Title</h5><p class="card-text">Text</p>`
3	Card with header	`<div class="card-header">Featured</div>`
4	Card with footer	`<div class="card-footer text-muted">Updated today</div>`
5	Card image top	`<img class="card-img-top" src="a.jpg" alt="...">`
6	Card with button action	`<a href="#" class="btn btn-primary">Go</a>`
7	Card list group	`<div class="card"><ul class="list-group list-group-flush"><li class="list-group-item">Item</li></ul></div>`
8	Card grid with grid columns	`<div class="row g-4"><div class="col-md-4"><div class="card">...</div></div></div>`
9	Card group (edge-to-edge)	`<div class="card-group"><div class="card">A</div><div class="card">B</div></div>`
10	Colored card background	`<div class="card bg-primary text-white">...</div>`

Popular Real-World Bootstrap Cards Examples

These card patterns are the backbone of product listings, dashboards, and content grids.

Scenario	Pattern
Product listing grid	`<div class="row g-4"><div class="col-md-4"><div class="card">...</div></div></div>`
Pricing plan card	`<div class="card text-center border-primary"><div class="card-header">Pro Plan</div></div>`
Blog post preview card	`<div class="card"><img class="card-img-top" src="post.jpg"><div class="card-body"><h5 class="card-title">Title</h5></div></div>`
Dashboard stat card	`<div class="card text-center"><div class="card-body"><h2 class="card-title">1,204</h2><p class="card-text">Active Users</p></div></div>`
Team member profile card	`<div class="card text-center"><img class="card-img-top rounded-circle mx-auto mt-3" style="width:96px;" src="avatar.jpg"></div>`
Notification/alert card	`<div class="card border-warning"><div class="card-body">Your trial ends soon.</div></div>`
Card with list of features	`<div class="card"><ul class="list-group list-group-flush"><li class="list-group-item">Feature A</li></ul></div>`
Horizontal media card	`<div class="card flex-row"><img src="a.jpg" style="width: 33%;"><div class="card-body">Text</div></div>`

Best Practices

Keep card content focused on a single item or idea for scannable grids.
Use card-img-top consistently sized across a grid so cards align visually.
Pair card-title with a heading element (h5 by default) for proper document structure.
Use card-footer for metadata or timestamps that are secondary to the main content.
Combine cards with the grid system (row/col) rather than card-group for responsive wrapping.
Keep call-to-action buttons inside card-body consistent in placement across a grid.
Use border color utilities (border-primary) to highlight a featured or recommended card.

Common Mistakes

Mixing card-group with the grid system, which can cause unexpected width behavior since card-group doesn't wrap responsively.
Using inconsistent image aspect ratios across a card grid, causing uneven layouts.
Forgetting alt text on card-img-top images.
Overloading a single card with too much unrelated content instead of splitting into multiple cards.
Not using list-group-flush inside a card, leaving mismatched borders between list items and the card edge.
Applying fixed heights that clip content instead of letting cards grow naturally.

Key Takeaways

card, card-body, card-header, and card-footer form the core card structure.
card-img-top adds a full-width image above the card body.
Cards combine naturally with the grid system for responsive card layouts.
card-group creates edge-to-edge cards, while grid columns create spaced, wrapping grids.
Consistent sizing and structure across a card grid keeps layouts visually aligned.

Pro Tip

When building a card grid, use row-cols-* utilities with a consistent gutter (g-4) instead of manually setting col-md-4 on every card, so adjusting the grid density later only requires changing one class on the row.