Estimated reading: 5 minutes 298 views

Bootstrap 5 Cards & Components Demo – Layout, Content Blocks & UI Examples

Introduction – Build Flexible UI Blocks with Bootstrap 5 Cards

Bootstrap 5 Cards are modular content containers used for displaying text, images, buttons, and structured layouts in a clean, responsive format. Combined with components like headers, footers, buttons, list groups, and grids, they are perfect for dashboards, product displays, and user profiles.

In this guide, you’ll learn:

How to structure Bootstrap cards using .card, .card-body, .card-img-*, and .card-footer
Create cards with images, buttons, headers, and list groups
Use grid and flex utilities inside cards
Stack cards for responsive, repeatable layouts

Example 1 – Basic Card with Title and Text

<div class="card" style="width: 18rem;">
  <div class="card-body">
    <h5 class="card-title">Card Title</h5>
    <p class="card-text">This is a basic card using Bootstrap 5 components.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

Class	Description
`.card`	Container for card content
`.card-body`	Wraps all inner text or elements
`.card-title`	Adds heading-like text
`.card-text`	Standard paragraph styling inside cards

A basic layout for informational or clickable content blocks.

Example 2 – Card with Image on Top

<div class="card" style="width: 18rem;">
  <img src="https://via.placeholder.com/286x160" class="card-img-top" alt="...">
  <div class="card-body">
    <h5 class="card-title">Card with Image</h5>
    <p class="card-text">Image appears on top, followed by content.</p>
  </div>
</div>

Class	Description
`.card-img-top`	Displays image above card body

This structure is ideal for showcasing products, blog posts, or profiles.

Example 3 – Cards with Header and Footer

<div class="card text-center">
  <div class="card-header">
    Featured
  </div>
  <div class="card-body">
    <h5 class="card-title">Special Offer</h5>
    <p class="card-text">Use this card to highlight featured content.</p>
    <a href="#" class="btn btn-success">Claim Now</a>
  </div>
  <div class="card-footer text-muted">
    2 days left
  </div>
</div>

Class	Description
`.card-header`	Top section for labels or tabs
`.card-footer`	Bottom section for meta or actions

Great for promotions, alerts, or status-based layouts.

Example 4 – Card with List Group Items

<div class="card" style="width: 18rem;">
  <div class="card-header">
    Featured Items
  </div>
  <ul class="list-group list-group-flush">
    <li class="list-group-item">Item One</li>
    <li class="list-group-item">Item Two</li>
    <li class="list-group-item">Item Three</li>
  </ul>
</div>

Class	Description
`.list-group-flush`	Removes border-radius around list
`.list-group-item`	Adds styled list items inside the card

Ideal for feature lists, menus, notifications, or profiles.

Example 5 – Responsive Card Grid

<div class="row row-cols-1 row-cols-md-3 g-4">
  <div class="col">
    <div class="card h-100">
      <img src="https://via.placeholder.com/286x160" class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card 1</h5>
        <p class="card-text">This card has supporting text below.</p>
      </div>
    </div>
  </div>
  <!-- Repeat for other cards -->
</div>

Class	Description
`.row-cols-*`	Sets how many cards per row by breakpoint
`.g-4`	Adds gutter spacing between cards
`.h-100`	Ensures all cards have equal height

A grid of equal-height cards perfect for galleries or product listings.

Bootstrap 5 Card Utility Reference

Feature	Class	Description
Container	`.card`	Base wrapper for all card content
Image	`.card-img-top` / `.card-img-bottom`	Adds image above or below card body
Body	`.card-body`	Inner content container
Header/Footer	`.card-header`, `.card-footer`	Optional header/footer sections
Layout	`.row-cols-`, `.h-100`, `.g-`	Responsive grid and equal height controls
List Items	`.list-group`, `.list-group-item`	Display structured list inside card

Best Practices for Cards & Components

Tip	Why It’s Effective
Use `.h-100` for uniform card heights	Improves grid alignment across multiple cards
Combine `.row-cols-*` for layouts	Creates responsive multi-column card groups
Keep cards modular	Reusable for blog posts, products, profiles, etc.
Apply shadows, borders via utilities	Enhances visual separation without custom CSS

Summary – Recap & Next Steps

Bootstrap 5 cards are a modular UI pattern ideal for organizing content into readable, aesthetic blocks. Combined with components like headers, footers, images, and list groups, they can serve nearly any layout use case.

Key Takeaways:

Use .card and .card-body to structure content
Add images with .card-img-top or .card-img-bottom
Include headers, footers, and list groups for rich card components
Arrange cards in rows using .row-cols-* and .g-* for spacing

Perfect for blog previews, product grids, testimonials, feature boxes, and dashboards.

FAQs – Bootstrap 5 Cards & UI Components

Can I stack buttons or images inside cards?
Yes. Combine .btn, .card-img-top, and other elements inside .card-body.

How do I equalize card height in a grid?
Use .h-100 on .card and ensure parent uses .row with .g-*.

Can cards be used inside modals or tabs?
Absolutely. Cards are flexible and can live inside any component or layout section.

How do I add hover effects or shadows to cards?
Use .shadow, .hover-shadow, or custom CSS. Bootstrap 5 supports utility-based shadow classes.

« Previous Next »

Share Now :