Quick answer: A Bootstrap card is <div class="card"> with a card-body inside; a responsive card grid is row + row-cols-* classes — row-cols-1 row-cols-md-2 row-cols-lg-3 gives you one card per row on mobile, two on tablets, three on desktop, and equal-height cards automatically. This beats counting individual column classes and is the pattern for pricing sections, blog listings and product grids.
Table of Contents
The basic card
<div class="card shadow-sm h-100">
<img src="cover.jpg" class="card-img-top" alt="Course cover">
<div class="card-body">
<h5 class="card-title">React Basics</h5>
<p class="card-text">Components, props and state in two weeks.</p>
<a href="#" class="btn btn-primary">Start learning</a>
</div>
</div>Pieces worth knowing: card-img-top rounds the image to the card’s corners; h-100 stretches the card to its row height (the equal-height trick); card-title/card-text handle internal spacing. Headers and footers are card-header and card-footer siblings of the body.
The responsive grid: row-cols beats col classes
<div class="row row-cols-1 row-cols-md-2 row-cols-lg-3 g-4">
<div class="col">[card]</div>
<div class="col">[card]</div>
<div class="col">[card]</div>
<div class="col">[card]</div>
</div>Every child is just col — the row-cols-* classes on the parent decide how many fit per row at each breakpoint, and g-4 sets the gutter. Compare with the manual approach in our Materialize grid guide: same result, less arithmetic.
Card variations you will actually use
| Variation | Recipe |
|---|---|
| Horizontal card | card mb-3 + row g-0 inside: image col-md-4 + body col-md-8 |
| Entire card clickable | Wrap content normally, add stretched-link on the main link |
| Colored card | text-bg-primary (5.3) on the card — text auto-contrasts |
| Card with list | list-group list-group-flush inside the card |
| Image overlay text | card-img-overlay div over card-img-top-style full image |
For animations on cards — hover lifts, ripple effects — see our card animation guide; the CSS translates to Bootstrap cards directly.
Building a portfolio or course site and want live feedback on your layouts? Ampersand Academy teaches front-end development one-to-one.
Buttons on a card, including size and outline variants, are covered in our Bootstrap buttons guide.
Official documentation
For the full reference behind this guide, read the Bootstrap 5.3 card documentation. It is the source the details above are drawn from, and the first place to check when an option or attribute name changes.
Frequently asked questions
How do I make Bootstrap cards the same height in a row?
Add h-100 to each card and make sure the parent uses the grid (row with cols). The flexbox row stretches all cards to the tallest one’s height.
How do I make a whole Bootstrap card clickable?
Put your link inside the card and add the stretched-link class to it. The link’s clickable area then expands to cover the entire card. Keep the card position-relative (default) and avoid overflow settings.
What does row-cols do in Bootstrap?
row-cols-N sets how many equal columns each row holds, so you never hand-count col-md-4 style classes. Combine breakpoints like row-cols-1 row-cols-md-3 for responsive card grids.
How do I add a hover shadow to Bootstrap cards?
Add shadow-sm by default and your own CSS: .card:hover { box-shadow: 0 .5rem 1rem rgba(0,0,0,.15); transform: translateY(-2px); transition: all .3s; }
Bootstrap card or Materialize card – which should I use?
Whichever framework your site already uses – they solve the same problem. Bootstrap cards are more customizable via utilities; Materialize cards ship Material Design shadows and ripples by default.
Last updated on · Written by Dinesh Kumar R
