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.
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.
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.