Bootstrap 5Content

Bootstrap 5 Card

The Bootstrap 5 card is a flexible content container with optional header, footer, body, and image sections. Cards are one of the most versatile Bootstrap components — used for blog post previews, team member profiles, pricing tiers, product listings, and feature showcases.

Primary Class

.card

Common Use Cases

→Blog post preview grid
→Team member profiles
→Product listing cards
→Feature showcase
→Pricing tiers
→Testimonial cards
→Portfolio items

Variants & Classes

Variant	Description	Classes
Basic Card	Card with header, body, and optional footer.	`card + card-header + card-body + card-title + card-text + card-footer`
Image Card	Card with top image, body content, and CTA link.	`card + card-img-top + card-body + card-title + card-text + btn`
Horizontal Card	Image on left, content on right — for list-style layouts.	`card + row g-0 + col-md-4 (image) + col-md-8 (body)`
Card Group	Multiple cards of equal height in a horizontal row.	`card-group > .card per item`
Card with Overlay	Text overlaid on image using absolute positioning.	`card bg-dark text-white + card-img + card-img-overlay`

Code Example

<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="/blog-thumb.jpg" class="card-img-top" alt="Blog post title" loading="lazy">
      <div class="card-body">
        <span class="badge bg-primary mb-2">Tutorial</span>
        <h5 class="card-title fw-bold">How to build a SaaS landing page</h5>
        <p class="card-text text-muted small">Learn the components, copy framework, and conversion patterns of top-performing SaaS pages.</p>
      </div>
      <div class="card-footer bg-transparent border-0">
        <a href="/blog/saas-landing-page" class="btn btn-sm btn-outline-dark">Read More →</a>
      </div>
    </div>
  </div>
</div>

Canvas Framework Variants

The Canvas template extends Bootstrap 5 with 1,658+ component variants. Generate any of these using Canvas Builder:

✓Icon card with coloured icon box
✓Testimonial card with avatar and star rating
✓Stat card with large number and label
✓Feature card with border-left accent
✓Flip card with hover animation

Best Practices

Always use h-100 in card grids

When cards are in a responsive grid, add h-100 to each .card element to make all cards stretch to equal height within their row. Without it, cards with different content lengths will be different heights.

Use shadow-sm for subtle elevation

Cards without any shadow or border can look flat on white backgrounds. A shadow-sm class adds a subtle elevation that separates the card from the background without being heavy.

Remove default border with border-0 for custom styling

Bootstrap cards have a default 1px border. Adding border-0 removes it — useful when you want to control border styling entirely via Sass variables or custom CSS.

FAQ

What is the difference between card-group and a row with col cards?

card-group makes all cards equal height and removes the gutters between them (cards touch edge-to-edge). A row with col and card gives you individual cards with gutters (gap-3 or g-4). For most layouts, the row approach gives more flexibility.

How do I make Bootstrap 5 cards equal height?

Add h-100 to each .card and use align-items-stretch (or no alignment override) on the parent .row. The flex row stretches all cards to the height of the tallest card automatically.