Cards are the most reused component in any Bootstrap landing page, yet most developers stop at the default image-title-button stack. Used well, Bootstrap 5 cards become a flexible system for features, pricing, testimonials, blog teasers and portfolio items.
- Combine row-cols- with h-100 on each card to get equal-height responsive grids without custom CSS.
- Use stretched-link and object-fit-cover to make whole cards clickable and keep images consistent.
- Override Bootstrap’s
--bs-card-variables and Canvas’s--cnvs-themecolorinstead of fighting specificity. - Bootstrap 5 has no built-in masonry layout, so choose cards in a grid when you need predictable rows.
Card Anatomy and the Markup That Matters
A Bootstrap card is a bordered flex column container with optional header, image, body, list group and footer. The only required parts are .card and, usually, .card-body. Everything else is opt-in, which is what makes the component so adaptable for a Bootstrap content layout.
<div class="card" style="max-width: 22rem;">
<img src="images/feature.jpg" class="card-img-top" alt="Dashboard preview">
<div class="card-body">
<h3 class="card-title h5">Analytics Dashboard</h3>
<p class="card-text">Track traffic, conversions and revenue in one view.</p>
<a href="#" class="btn btn-primary">View details</a>
</div>
</div>Notice the h5 utility class on an h3. Card titles should follow your page’s heading hierarchy for SEO and accessibility, while the visual size is handled separately. The Bootstrap 5 typography guide covers these size utilities in more depth.
Building Responsive Card Grids with row-cols
The fastest way to lay out cards is the row-cols system. Declare how many columns you want per breakpoint on the row, and Bootstrap sizes every child column for you. Add h-100 to each card and all cards in a row match the tallest one.
<div class="container py-5">
<div class="row row-cols-1 row-cols-md-2 row-cols-lg-3 g-4">
<div class="col">
<div class="card h-100">
<div class="card-body">
<h3 class="card-title h5">Fast Setup</h3>
<p class="card-text">Launch a page in minutes, not days.</p>
</div>
</div>
</div>
<div class="col">
<div class="card h-100">
<div class="card-body">
<h3 class="card-title h5">Responsive</h3>
<p class="card-text">Looks right from 320px to 1920px.</p>
</div>
</div>
</div>
<div class="col">
<div class="card h-100">
<div class="card-body">
<h3 class="card-title h5">Customisable</h3>
<p class="card-text">Change colours and fonts from one place.</p>
</div>
</div>
</div>
</div>
</div>The gutter class g-4 handles spacing in both directions, so you never need manual margins between cards. The Bootstrap Grid Calculator is a quick sanity check for how columns divide at each width. For how md and lg map to real screen widths, see the Bootstrap 5 breakpoints explained guide.
Card Patterns for a Bootstrap Landing Page
Different landing page sections need different card behaviour. These four patterns cover most real projects:
- Feature cards: icon, short title, two lines of copy. No border, no button. Keep them scannable.
- Pricing cards: a header with the plan name, a list group of inclusions, and a full-width button in the footer. Highlight the recommended plan with
border-primaryor a themed border. - Testimonial cards: a
blockquotein the body and a name with avatar in the footer. - Content teasers: image on top, category label, title, and a clickable area spanning the whole card.
For the teaser pattern, stretched-link extends the link’s clickable area across the entire card. That matters for mobile tap targets, where a small “Read more” link is genuinely hard to hit:
<div class="card h-100 border-0 shadow-sm">
<div class="ratio ratio-16x9">
<img src="images/post.jpg" class="card-img-top object-fit-cover" alt="Team reviewing a layout">
</div>
<div class="card-body">
<span class="badge text-bg-light mb-2">Guide</span>
<h3 class="card-title h5">
<a href="/blog/post" class="stretched-link text-decoration-none text-reset">How to plan a landing page</a>
</h3>
<p class="card-text text-body-secondary">A section-by-section checklist.</p>
</div>
</div>The ratio wrapper plus object-fit-cover (available in Bootstrap 5.3) keeps every thumbnail the same shape even when source images differ. One important constraint: only use one stretched-link per card. Multiple links in the same card compete for the same clickable area. If you are using cards for work samples, the same teaser pattern drives the grid in our portfolio website tutorial.
Customising Cards Without Fighting Specificity
Since Bootstrap 5.2, the card component exposes CSS variables such as --bs-card-spacer-y, --bs-card-spacer-x, --bs-card-border-radius and --bs-card-bg. Override those on a modifier class rather than rewriting selectors. In the Canvas HTML Template, brand colour comes from --cnvs-themecolor (with an RGB twin, --cnvs-themecolor-rgb), so your hover states stay in sync with the rest of the site.
.card-feature {
--bs-card-spacer-y: 1.75rem;
--bs-card-spacer-x: 1.5rem;
--bs-card-border-radius: 1rem;
border-color: transparent;
transition: transform .2s ease, box-shadow .2s ease;
}
.card-feature:hover {
transform: translateY(-4px);
box-shadow: 0 .75rem 1.5rem rgba(var(--cnvs-themecolor-rgb), .18);
}
.card-feature .card-title a:hover {
color: var(--cnvs-themecolor);
}
@media (prefers-reduced-motion: reduce) {
.card-feature { transition: none; }
.card-feature:hover { transform: none; }
}Because Canvas bundles Bootstrap 5, do not add a separate Bootstrap CDN link to use any of this. Add your overrides to a custom stylesheet loaded after style.css. To fine-tune the shadow value visually, the CSS Box Shadow Generator saves guesswork.
Limits of Cards and When to Choose Something Else
Cards are not always the right container. Know the constraints before committing:
- No masonry: Bootstrap 5 dropped its card-columns masonry layout. If your cards have wildly different heights and you want them packed tightly, you need the Masonry JS library or CSS grid, otherwise you get uneven gaps.
- Too many cards flatten hierarchy: if every section is a grid of three identical boxes, nothing stands out. Alternate cards with full-width bands, split layouts and large typography.
- Long text: cards suit 20 to 40 words of body copy. Longer content belongs in a standard column or an accordion.
- Mobile stacking: a six-card grid becomes six screens of scrolling at
row-cols-1. Considerrow-cols-2on small screens for compact items such as logos or icons.
Hand-coding every variant is where time disappears. With Canvas Builder, you describe the section you need and get Canvas-ready markup using the right classes and variables, which is a faster route than assembling cards by hand for every page.
Frequently Asked Questions
How do I make all Bootstrap 5 cards the same height?
Place the cards in a row with row-cols-* classes and add h-100 to each .card. The columns stretch to equal height and the cards fill them.
What is the difference between card-group and a row of cards?
.card-group joins cards into one attached unit with equal heights and no gutters, and it collapses to a vertical stack on small screens. A grid with row-cols gives you gutters, per-breakpoint column counts and more control, so it is the better choice for most landing pages.
Can I make an entire card clickable?
Yes. Add the stretched-link class to one link inside the card, and make sure the card has position: relative, which Bootstrap applies by default. Avoid placing other interactive elements in the card unless you raise their z-index.
How do I change card colours to match my brand in Canvas?
Set your brand colour through --cnvs-themecolor and reference it in your card hover and accent styles. Use --cnvs-themecolor-rgb when you need transparency, as in rgba(var(--cnvs-themecolor-rgb), .15).
Are Bootstrap cards good for SEO?
Cards are just semantic-neutral containers, so SEO depends on your content. Use real heading tags for titles, descriptive alt text on images and crawlable links. Our guide to SEO-optimised HTML landing pages covers the wider checklist.
If you’re working with the Canvas HTML Template and want to generate production-ready layouts faster, try Canvas Builder free and see how much time you save on every project.
Build it by describing it
Canvas Builder turns a plain-English description into a complete, responsive website in minutes, then hands you the clean Bootstrap 5 HTML to host anywhere.