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

---

Share Now :