Skip to content
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.

Bootstrap class

.card

Common use cases

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

Variants and classes

VariantDescription and classes
Basic CardCard with header, body, and optional footer.card + card-header + card-body + card-title + card-text + card-footer
Image CardCard with top image, body content, and CTA link.card + card-img-top + card-body + card-title + card-text + btn
Horizontal CardImage on left, content on right, for list-style layouts.card + row g-0 + col-md-4 (image) + col-md-8 (body)
Card GroupMultiple cards of equal height in a horizontal row.card-group + card
Card with OverlayText overlaid on image using absolute positioning.card bg-dark text-white + card-img + card-img-overlay

Code example

HTML
<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 width="600" height="340" src="https://picsum.photos/seed/cb-blog-thumb/600/340" 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>

Live examples

Product Card

Standard product card with image area, title, price, and add-to-cart button.

Example 1

Testimonial Card

Card with avatar, quote, and star rating for social proof sections.

Example 2

Feature Card with Icon

Icon-top feature card commonly used in 3-column feature grids.

Example 3

Canvas template variants

Canvas Builder builds pages on the Canvas HTML template, which adds its own styled versions of Bootstrap 5 components. Variants you can ask for in a prompt:

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