Lesson 12: Cards, Accordions & Progress Bars in Bootstrap

—

by

admin
in
Module 1: Introduction to Bootstrap 2025

Module 2: Bootstrap Grid System & Responsive Layouts

Module 3: Bootstrap Components & UI Elements

Module 4: Navigation & Menus in Bootstrap

Module 5: Advanced Bootstrap Features

Module 6: Forms, Authentication & Data Handling

Module 7: Bootstrap & JavaScript Integration

Module 8: Bootstrap with React, Vue, and Angular

📌 Objective: Learn how to use Bootstrap’s Cards, Accordions, and Progress Bars to create structured content layouts, collapsible sections, and visual progress indicators.

🔹 1. Introduction to Cards, Accordions & Progress Bars

Bootstrap provides pre-styled UI components to enhance the visual structure of your website.

💡 Why Use These Components?
✔️ Cards help create flexible content containers with images, text, and buttons.
✔️ Accordions allow collapsible sections for FAQs and hidden content.
✔️ Progress Bars visually indicate loading, downloads, or task progress.

🔹 2. Bootstrap Cards

Cards are versatile content containers that can include titles, text, images, buttons, and footers.

1️⃣ Basic Card Structure

✅ Example: Simple Card

html
<div class="container">
<div class="card" style="width: 18rem;">
<img src="https://via.placeholder.com/150" class="card-img-top" alt="Placeholder Image">
<div class="card-body">
<h5 class="card-title">Card Title</h5>
<p class="card-text">This is a basic Bootstrap card with an image, text, and a button.</p>
<a href="#" class="btn btn-primary">Learn More</a>
</div>
</div>
</div>

🔹 What happens?

  • A styled card appears with an image, title, text, and button.

2️⃣ Cards with Headers & Footers

✅ Example: Adding Headers & Footers

html
<div class="card">
<div class="card-header">Featured</div>
<div class="card-body">
<h5 class="card-title">Special Card</h5>
<p class="card-text">This card has a header and a footer.</p>
</div>
<div class="card-footer text-muted">Updated 2 days ago</div>
</div>

🔹 What happens?

  • A header and footer appear inside the card.

3️⃣ Card Grid Layout

You can align multiple cards in a row using Bootstrap’s grid system.

✅ Example: Card Columns

html
<div class="container">
<div class="row">
<div class="col-md-4">
<div class="card">
<div class="card-body">
<h5 class="card-title">Card 1</h5>
<p class="card-text">This is the first card.</p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card">
<div class="card-body">
<h5 class="card-title">Card 2</h5>
<p class="card-text">This is the second card.</p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card">
<div class="card-body">
<h5 class="card-title">Card 3</h5>
<p class="card-text">This is the third card.</p>
</div>
</div>
</div>
</div>
</div>

🔹 What happens?

  • The three cards are displayed in a row on larger screens and stacked on small screens.

🔹 3. Bootstrap Accordions

Accordions create collapsible sections, perfect for FAQs and content toggles.

1️⃣ Basic Accordion Structure

✅ Example: Simple Accordion

html
<div class="container">
<div class="accordion" id="accordionExample">
<div class="accordion-item">
<h2 class="accordion-header">
<button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne">
Accordion Item #1
</button>
</h2>
<div id="collapseOne" class="accordion-collapse collapse show" data-bs-parent="#accordionExample">
<div class="accordion-body">
This is the content of the first accordion panel.
</div>
</div>
</div>
</div>
</div>

🔹 What happens?

  • The first panel is expanded by default, and clicking toggles it.

2️⃣ Multiple Accordion Items

✅ Example: Multi-Item Accordion

html
<div class="accordion" id="faqAccordion">
<div class="accordion-item">
<h2 class="accordion-header">
<button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#faq1">
Question 1
</button>
</h2>
<div id="faq1" class="accordion-collapse collapse show" data-bs-parent="#faqAccordion">
<div class="accordion-body">Answer to Question 1.</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#faq2">
Question 2
</button>
</h2>
<div id="faq2" class="accordion-collapse collapse" data-bs-parent="#faqAccordion">
<div class="accordion-body">Answer to Question 2.</div>
</div>
</div>
</div>

🔹 What happens?

  • Each accordion collapses when another is opened, creating an FAQ-style effect.

🔹 4. Bootstrap Progress Bars

Progress bars visually indicate task completion or loading progress.

1️⃣ Basic Progress Bar

✅ Example: Simple Progress Bar

html
<div class="container">
<div class="progress">
<div class="progress-bar" style="width: 50%;">50%</div>
</div>
</div>

🔹 What happens?

  • A progress bar fills up 50% of its width.

2️⃣ Colored Progress Bars

✅ Example: Adding Color

html
<div class="progress">
<div class="progress-bar bg-success" style="width: 75%;">75%</div>
</div>

🔹 What happens?

  • The progress bar turns green (bg-success).

3️⃣ Striped & Animated Progress Bars

✅ Example: Striped & Animated Progress Bar

html
<div class="progress">
<div class="progress-bar progress-bar-striped progress-bar-animated bg-warning" style="width: 60%;">Loading...</div>
</div>

🔹 What happens?

  • The progress bar animates while filling up.

📝 Lesson Recap Quiz

🎯 Test your understanding of Bootstrap Cards, Accordions & Progress Bars.

📌 Multiple-Choice Questions (MCQs)

1️⃣ What class is used to create a Bootstrap card?
a) .bootstrap-card
b) .card
c) .card-container
d) .box

✅ Correct Answer: b) .card

2️⃣ What attribute makes an accordion collapse when another opens?
a) data-bs-close
b) data-bs-toggle="collapse"
c) data-bs-parent="#accordionExample"
d) data-bs-accordion

✅ Correct Answer: c) data-bs-parent="#accordionExample"

3️⃣ How can you animate a Bootstrap progress bar?
a) .progress-animate
b) .progress-bar-moving
c) .progress-bar-striped progress-bar-animated
d) .progress-speed

✅ Correct Answer: c) .progress-bar-striped progress-bar-animated

📌 True or False

4️⃣ Bootstrap cards can contain images, text, and buttons.
✅ Answer: True

5️⃣ The .progress-bar class is required to display a progress bar.
✅ Answer: True

🎯 Practical Challenge

✅ Create a card with an image, title, and button.
✅ Build an FAQ section using an accordion.
✅ Create a striped animated progress bar at 80%.
✅ Post your solution in the discussion forum for feedback!

🎓 Lesson Summary

✅ Cards (.card) structure content with images, text, and buttons.
✅ Accordions (.accordion) create collapsible sections.
✅ Progress bars (.progress-bar) visually represent loading and completion status.

Comments

Leave a Reply

Your email address will not be published. Required fields are marked *