Cards are the workhorse of modern front-end layouts. Building a design portfolio, a multi-author blog, or an agency showcase all share the same constraint: the way you structure and style your Bootstrap 5 cards directly affects readability, perceived quality, and conversion. Bootstrap 5 ships with a solid .card component out of the box, but the default styling is intentionally minimal. The nine Bootstrap card layout patterns below go further, combining native utility classes, CSS custom properties, and small amounts of custom CSS to produce layouts that actually look finished. Each example includes copy-paste markup you can drop straight into any project, including the Canvas HTML Template.
Key Takeaways
- Bootstrap 5 card components are highly composable. Small utility class changes produce significantly different visual results.
- Horizontal cards, masonry grids, and overlay cards each suit different content types. Choosing the wrong pattern hurts UX.
- CSS custom properties (such as
--bs-card-border-radiusand--bs-card-bg) let you retheme cards without touching source Sass. - Accessible markup, lazy-loaded images, and semantic heading hierarchy matter as much as visual design for cards that rank and convert.
- All nine patterns are compatible with Bootstrap 5.3.x and work inside the Canvas template ecosystem with no conflicts.
1. Standard Three-Column Grid Card
The most common card design example for blogs: three equal-width cards in a row, each with a thumbnail, category label, title, excerpt, and a read-more link. Bootstrap’s .row-cols-* API keeps the markup clean and automatically wraps on smaller screens.
<div class="row row-cols-1 row-cols-md-3 g-4">
<div class="col">
<div class="card h-100 border-0 shadow-sm">
<img src="post-thumb.jpg" class="card-img-top" alt="Post title" loading="lazy">
<div class="card-body">
<span class="badge bg-primary mb-2">Design</span>
<h3 class="card-title h5">Post Title</h3>
<p class="card-text text-muted">A short excerpt that summarises the post content.</p>
</div>
<div class="card-footer bg-transparent border-0">
<a href="#" class="btn btn-link px-0">Read more</a>
</div>
</div>
</div>
</div>Use h-100 on every card so all cards in a row reach the same height. Drop border-0 shadow-sm to replace Bootstrap’s default border with a subtle shadow, a pattern covered in detail in The Complete Bootstrap 5 Utility Class Reference for 2026.
2. Horizontal Media Card for Featured Posts
Horizontal cards work well as featured article teasers at the top of a blog listing page, or as portfolio case study previews. The image occupies roughly 40% of the card width, with the text body beside it.
<div class="card border-0 shadow-sm mb-4">
<div class="row g-0">
<div class="col-md-5">
<img src="featured.jpg" class="img-fluid rounded-start h-100 object-fit-cover" alt="Featured post" loading="lazy">
</div>
<div class="col-md-7">
<div class="card-body d-flex flex-column h-100 justify-content-center p-4">
<span class="text-primary small fw-semibold mb-1">Featured</span>
<h2 class="card-title h4">Featured Article Title</h2>
<p class="card-text text-muted">Excerpt text goes here. Keep it to two to three sentences.</p>
<a href="#" class="btn btn-primary mt-auto align-self-start">Read Article</a>
</div>
</div>
</div>
</div>The object-fit-cover utility (added in Bootstrap 5.3) prevents the image from distorting when viewport width changes.
3. Full-Image Overlay Card for Portfolios
Portfolio grids often use a full-bleed image with text overlaid at the bottom. Bootstrap provides .card-img-overlay for exactly this purpose. Add a dark gradient via a small inline style to keep text legible over any photo.
<div class="card border-0 overflow-hidden" style="--bs-card-border-radius: 0.75rem;">
<img src="project.jpg" class="card-img" alt="Project name" style="height: 380px; object-fit: cover;">
<div class="card-img-overlay d-flex flex-column justify-content-end"
style="background: linear-gradient(to top, rgba(0,0,0,0.7) 0%, transparent 60%);">
<h3 class="card-title text-white mb-1">Project Name</h3>
<p class="card-text text-white-50 small">Branding, Web Design</p>
</div>
</div>
4. Masonry-Style Pinterest Grid
Bootstrap 5.3 introduced the .masonry CSS Grid helper via the data-masonry attribute (backed by Masonry.js). Cards of varying height fill a multi-column grid without awkward whitespace gaps. That makes it a practical fit for photography portfolios or mixed-length blog posts.
<div class="row" data-masonry='{"percentPosition": true}'>
<div class="col-sm-6 col-lg-4 mb-4">
<div class="card border-0 shadow-sm">
<img src="img-tall.jpg" class="card-img-top" alt="Tall image">
<div class="card-body">
<p class="card-text">A longer excerpt that makes this card taller than its neighbours.</p>
</div>
</div>
</div>
<div class="col-sm-6 col-lg-4 mb-4">
<div class="card border-0 shadow-sm">
<img src="img-short.jpg" class="card-img-top" alt="Short image">
<div class="card-body">
<p class="card-text">Short excerpt.</p>
</div>
</div>
</div>
</div>data-masonry requires the Masonry.js library. If you are avoiding third-party dependencies, use a CSS-only multi-column layout with column-count instead, accepting that card order runs top-to-bottom rather than left-to-right.
5. Hover-Lift Card with CSS Transition
A subtle lift on hover communicates interactivity without JavaScript. This is especially effective on portfolio grids where every card leads to a case study. The transform and box-shadow change are GPU-accelerated and have negligible Core Web Vitals cost.
<style>
.card-lift {
transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.card-lift:hover {
transform: translateY(-6px);
box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.12) !important;
}
</style>
<div class="card card-lift border-0 shadow-sm h-100">
<img src="work.jpg" class="card-img-top" alt="Work preview" loading="lazy">
<div class="card-body">
<h3 class="card-title h6 mb-1">Project Title</h3>
<p class="card-text text-muted small">UI Design, Motion</p>
</div>
</div>6. Author Bio Card for Multi-Author Blogs
Author cards humanise a blog and improve E-E-A-T signals. Combine a circular avatar, name, role, short bio, and social links in a compact card. Use the .text-center variant for standalone author profiles, or a horizontal layout (see pattern 2) for inline attribution at the bottom of articles.
<div class="card border-0 shadow-sm text-center p-4">
<img src="avatar.jpg" class="rounded-circle mx-auto mb-3"
width="80" height="80" alt="Author name" style="object-fit: cover;">
<div class="card-body p-0">
<h4 class="card-title h6 mb-0">Jane Smith</h4>
<p class="text-muted small mb-2">Senior Front-End Developer</p>
<p class="card-text small">Jane writes about CSS architecture and design systems.</p>
<a href="#" class="btn btn-outline-secondary btn-sm">View Profile</a>
</div>
</div>7. Metric and Stat Card for Agency Portfolios
Agencies and SaaS landing pages frequently display key numbers in cards: clients served, projects completed, years in business. A minimal stat card pairs an icon, a large number, and a short label. Keep the palette consistent with your brand by overriding --bs-card-bg.
<div class="card border-0 text-center p-4"
style="--bs-card-bg: var(--bs-primary); --bs-card-color: #fff;">
<div class="card-body">
<div class="display-5 fw-bold">240+</div>
<p class="mb-0 opacity-75">Projects Delivered</p>
</div>
</div>For more on structuring team and credential sections, the guide to Canvas Team Section Blocks for About Pages shows how Canvas packages these patterns with pre-built block variations.
8. Filterable Portfolio Grid with Data Attributes
Filtering lets visitors narrow a portfolio by category without a page reload. The technique uses data-category attributes on each card wrapper and a small vanilla JS filter function. No jQuery required in Bootstrap 5.
<div class="d-flex gap-2 mb-4">
<button class="btn btn-primary btn-sm filter-btn" data-filter="all">All</button>
<button class="btn btn-outline-secondary btn-sm filter-btn" data-filter="branding">Branding</button>
<button class="btn btn-outline-secondary btn-sm filter-btn" data-filter="web">Web</button>
</div>
<div class="row g-4" id="portfolio-grid">
<div class="col-md-4 portfolio-item" data-category="branding">
<div class="card border-0 shadow-sm card-lift">
<img src="brand.jpg" class="card-img-top" alt="Branding project" loading="lazy">
<div class="card-body"><h3 class="card-title h6">Brand Identity</h3></div>
</div>
</div>
<div class="col-md-4 portfolio-item" data-category="web">
<div class="card border-0 shadow-sm card-lift">
<img src="web.jpg" class="card-img-top" alt="Web project" loading="lazy">
<div class="card-body"><h3 class="card-title h6">Website Redesign</h3></div>
</div>
</div>
</div>
<script>
document.querySelectorAll('.filter-btn').forEach(btn => {
btn.addEventListener('click', () => {
const filter = btn.dataset.filter;
document.querySelectorAll('.portfolio-item').forEach(item => {
item.style.display = (filter === 'all' || item.dataset.category === filter) ? '' : 'none';
});
});
});
</script>9. Dark-Mode Aware Card Using CSS Variables
Bootstrap 5.3 introduced a native data-bs-theme attribute for component-level dark mode. Cards respond automatically when the theme is toggled, provided you use semantic colour utilities rather than hardcoded hex values. For a deeper look at theming strategy, see SCSS vs CSS Variables for Theming Bootstrap 5.
<!-- Force dark appearance on a single card -->
<div class="card border-0 shadow" data-bs-theme="dark">
<div class="card-body">
<h3 class="card-title">Dark Card Title</h3>
<p class="card-text">This card uses Bootstrap 5.3 component-level theming.
It renders dark regardless of the page theme setting.</p>
<a href="#" class="btn btn-primary">Action</a>
</div>
</div>Avoid mixing bg-dark text-white utility overrides with data-bs-theme. Using both creates specificity conflicts, a pattern flagged in 8 Common Bootstrap 5 Mistakes (and How to Fix Them).
Frequently Asked Questions
Add h-100 to the .card element and row-cols-* to the parent row. The h-100 class sets height: 100%, so each card stretches to match the tallest card in the row when its parent column is a flex child. If you use .card-footer, also add mt-auto to it so the footer sticks to the bottom of every card regardless of content length.
Yes. Canvas extends Bootstrap 5’s card component rather than replacing it. All native Bootstrap card classes work as documented. Canvas adds supplementary modifier classes such as .card-hover and .card-shadow that layer on top of the base component. You can freely mix native Bootstrap card utilities with Canvas-specific modifiers.
Write a small CSS rule targeting a custom class (see pattern 5 above). Use transition: transform 0.25s ease, box-shadow 0.25s ease on the default state and apply transform: translateY(-6px) on the :hover state. Because transform triggers GPU compositing, the animation is smooth even on mid-range mobile devices.
Masonry.js reorders elements visually without changing DOM order, which can create a mismatch between reading order and tab order for keyboard users. To mitigate this, ensure the logical reading order in your HTML matches the visual left-to-right, top-to-bottom expectation, or use a CSS-only column approach. Always test with a keyboard and a screen reader before shipping.
For creative portfolios, the overlay card (pattern 3) and the filterable grid (pattern 8) are the strongest choices. The overlay card maximises image impact, which matters when the work itself is the selling point. The filterable grid lets visitors self-segment by discipline, reducing cognitive load. Combine both: use overlay cards inside a filterable grid for maximum effect.
Looking for a production-ready Bootstrap 5 HTML template? Browse Canvas Template demos and find the perfect starting point for your next project.
If you’re building with the Canvas HTML Template and want to ship production-ready Bootstrap 5 layouts faster, try Canvas Builder free — the visual builder that exports clean Canvas-ready markup in minutes.
Skip the setup and build it free
Spin up a complete Bootstrap 5 site, blog included, with Canvas Builder. No coding, no cost.
Canvas Team
Tutorials and tips for building beautiful Bootstrap 5 websites with the Canvas HTML Template and Canvas Builder.
More from the Canvas Blog