Bootstrap 5 – Cards: Flexible Content Containers with Custom Layouts

Introduction – Why Use Cards in Bootstrap 5?

Cards are versatile containers that hold images, text, buttons, or any content in a consistent layout. Bootstrap 5 cards are fully responsive, easy to customize, and support headers, footers, alignment, and grid layouts—making them ideal for portfolios, blog posts, product listings, and dashboards.

In this guide, you’ll learn:

• How to build basic and advanced card layouts
• Use card headers, footers, and body sections
• Add images, overlays, and list groups to cards
• Arrange cards in responsive columns or decks

Example 1 – Basic Card with Text

<div class="card" style="width: 18rem;">
  <div class="card-body">
    <h5 class="card-title">Simple Card</h5>
    <p class="card-text">This is a basic Bootstrap 5 card example with a title and text.</p>
    <a href="#" class="btn btn-primary">Go Somewhere</a>
  </div>
</div>

Explanation:

• .card: Base wrapper for the card layout
• .card-body: Contains the main content
• .card-title, .card-text: Typography helpers inside the card
• style="width: 18rem;": Optional fixed width (can be omitted in fluid layouts)

Example 2 – Card with Image Top

<div class="card" style="width: 18rem;">
  <img src="img.jpg" class="card-img-top" alt="...">
  <div class="card-body">
    <h5 class="card-title">Card with Image</h5>
    <p class="card-text">Add media content at the top using `.card-img-top`.</p>
  </div>
</div>

Explanation:

• .card-img-top: Adds responsive image at the top of the card
• Supports .img-fluid inside if needed

Example 3 – Card with Header and Footer

<div class="card text-center">
  <div class="card-header">
    Featured
  </div>
  <div class="card-body">
    <h5 class="card-title">Card with Header & Footer</h5>
    <p class="card-text">You can include sections for extra structure.</p>
    <a href="#" class="btn btn-success">Learn More</a>
  </div>
  <div class="card-footer text-muted">
    2 days ago
  </div>
</div>

Explanation:

• .card-header & .card-footer: Optional semantic sections
• Useful for timestamps, categories, or tags

Example 4 – Card with List Group

<div class="card" style="width: 18rem;">
  <div class="card-header">
    Features
  </div>
  <ul class="list-group list-group-flush">
    <li class="list-group-item">Responsive</li>
    <li class="list-group-item">Lightweight</li>
    <li class="list-group-item">Modular</li>
  </ul>
</div>

Use Case:

• Combine list items with cards for feature lists, FAQs, or tasks

Example 5 – Cards in a Grid (Responsive Deck)

<div class="row row-cols-1 row-cols-md-3 g-4">
  <div class="col">
    <div class="card h-100">
      <img src="img1.jpg" class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card 1</h5>
        <p class="card-text">Equal height card using `.h-100` in a grid layout.</p>
      </div>
    </div>
  </div>
  <!-- Repeat for other cards -->
</div>

Explanation:

• row-cols-*: Creates responsive column count (1 for xs, 3 for md and up)
• g-4: Adds gutter spacing
• .h-100: Ensures equal height for cards in a row

Best Practices for Bootstrap 5 Cards

Summary – Build Stunning Layouts with Bootstrap Cards

Bootstrap 5 cards allow you to create elegant containers with flexible content alignment, headers, footers, images, and grids. They are modular, responsive, and compatible with any Bootstrap component.

Key Takeaways:

• Use .card, .card-body, .card-header, .card-footer to structure content
• Include .card-img-top or .card-img-overlay for media support
• Cards can be stacked into columns using .row-cols-* and .g-*
• Ideal for listings, blog posts, dashboards, and landing pages

Combine with buttons, icons, modals, and badges to build rich UI components.

FAQs – Bootstrap 5 Cards

What is the use of .card-body in Bootstrap 5?
It wraps the main content and provides default padding and spacing.

How can I make all cards the same height?
Add .h-100 to the card and ensure parent columns are in a grid layout.

Can I use buttons or links inside cards?
Yes! Place them inside .card-body or .card-footer for CTAs.

How do I align multiple cards in a row?
Use a Bootstrap grid:

<div class="row row-cols-1 row-cols-md-3 g-4">...</div>

Can cards be responsive?
Absolutely! Cards adapt to screen size using Bootstrap’s responsive grid and utility classes.