Cards
Learn Bootstrap's .card component: card-body, card-title, card images, headers, footers, and grouping cards together.
Introduction
Cards are Bootstrap's flexible content container — a bordered, padded box that can hold nearly anything: text, images, lists, buttons, or forms. They're the building block behind product grids, blog previews, pricing tables, and dashboard widgets across countless real-world sites.
- The core .card / .card-body structure.
- Adding titles, text, links, and images to a card.
- Card headers, footers, and list groups.
- Laying out multiple cards with card groups and the grid.
Basic Card Structure
Every card starts with a `.card` wrapper (which provides the border and rounded corners) and a `.card-body` inside it (which provides consistent padding around the content).
<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 inside the card body.</p> </div></div>Click Run to see what this code prints.
Card Titles, Text & Links
Inside `.card-body`, use `.card-title` for the heading, `.card-subtitle` for a smaller secondary heading, `.card-text` for paragraphs, and `.card-link` for inline links with correct spacing between them.
<div class="card-body"> <h5 class="card-title">Bootstrap Course</h5> <h6 class="card-subtitle mb-2 text-muted">30 Lessons</h6> <p class="card-text">Master the grid, components, and utilities.</p> <a href="#" class="card-link">Enroll Now</a> <a href="#" class="card-link">View Syllabus</a></div>Click Run to see what this code prints.
Card Images
Place an `<img>` with `.card-img-top` as the first child of `.card` (before `.card-body`) to have it span the full card width with only the top corners rounded, matching the card's shape.
<div class="card" style="width: 18rem;"> <img src="course-cover.jpg" class="card-img-top" alt="Bootstrap course cover"> <div class="card-body"> <h5 class="card-title">Bootstrap Course</h5> <p class="card-text">Learn responsive design from scratch.</p> </div></div>Click Run to see what this code prints.
Card Headers & Footers
`.card-header` and `.card-footer` add a visually distinct strip above and below `.card-body`, typically shaded slightly darker — useful for card titles that need extra emphasis, or metadata like a timestamp.
<div class="card"> <div class="card-header">Featured</div> <div class="card-body"> <h5 class="card-title">Special Offer</h5> <p class="card-text">Get 20% off this month only.</p> </div> <div class="card-footer text-muted">Updated 2 days ago</div></div>Click Run to see what this code prints.
Card Lists
A `.list-group` with `.list-group-flush` can sit inside a card, between or instead of a card body, to show a clean list of related items without extra borders/margins clashing with the card's own border.
<div class="card"> <div class="card-header">Course Modules</div> <ul class="list-group list-group-flush"> <li class="list-group-item">Grid System</li> <li class="list-group-item">Components</li> <li class="list-group-item">Utilities</li> </ul></div>Click Run to see what this code prints.
Sizing & Layout Cards
By default a card grows to fill its parent's width. Set an explicit width with an inline style or utility class, or drop cards inside grid columns to control their size responsively.
<div class="row"> <div class="col-md-4"> <div class="card"><div class="card-body">Card A</div></div> </div> <div class="col-md-4"> <div class="card"><div class="card-body">Card B</div></div> </div> <div class="col-md-4"> <div class="card"><div class="card-body">Card C</div></div> </div></div>Click Run to see what this code prints.
Card Groups & Grids
For a tight row of equal-height, edge-to-edge cards, wrap them in `.card-group`. For a responsive multi-column grid of cards with consistent gutters, combine `.row`, `.row-cols-*`, and `.g-4` instead.
<div class="row row-cols-1 row-cols-md-3 g-4"> <div class="col"><div class="card h-100"><div class="card-body">Course 1</div></div></div> <div class="col"><div class="card h-100"><div class="card-body">Course 2</div></div></div> <div class="col"><div class="card h-100"><div class="card-body">Course 3</div></div></div></div>Click Run to see what this code prints.
Common Mistakes
- Placing .card-img-top after .card-body instead of before it, breaking the intended visual order.
- Forgetting h-100 on cards inside a row, causing uneven card heights when text length varies.
- Nesting .card-body inside .card-header by mistake, losing the header's distinct shading.
- Overloading a single card with too much unrelated content instead of splitting into multiple cards.
Best Practices
- Use row-cols-* with g-* for responsive card grids rather than manually sizing every card.
- Add h-100 to cards inside a row so uneven content doesn't create ragged heights.
- Keep card content focused — one card, one idea (a single product, article, or stat).
- Use list-group-flush inside cards instead of a plain <ul> to keep spacing consistent.
- Reserve card-header/card-footer for metadata or actions, not primary content.
Frequently Asked Questions
.card-group joins cards edge-to-edge with shared borders and equal height automatically, while a grid (row + row-cols) gives you responsive gutters and column counts that adapt per breakpoint.
Yes, forms work fine inside .card-body just like any other content — a card is simply a styled container.
Add h-100 to each .card element inside a flex row (like Bootstrap's .row, which is a flex container by default) so they stretch to match the tallest card.
Yes, add the .border-0 utility class to .card to remove its border while keeping the padding and rounded corners.
Key Takeaways
- .card + .card-body is the minimal structure for any card.
- .card-title, .card-text, and .card-link style common content inside a card body.
- .card-img-top must come before .card-body to render correctly at the top of the card.
- .card-header and .card-footer add visually distinct strips above/below the body.
- .list-group-flush integrates a list cleanly inside a card without extra borders.
- row-cols-* combined with g-* builds a responsive grid of equal-width cards.
Summary
Cards are one of the most reused components you'll build with in real Bootstrap projects, from blog post previews to pricing tiers to dashboard stats. Now that you can compose rich content inside a card, it's time to look at two smaller but equally common components: alerts and badges.