Estimated reading: 5 minutes 48 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 :