📌 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

🔹 What happens?

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

2️⃣ Cards with Headers & Footers

✅ Example: Adding Headers & Footers

🔹 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

🔹 What happens?

A progress bar fills up 50% of its width.

2️⃣ Colored Progress Bars

✅ Example: Adding Color

🔹 What happens?

The progress bar turns green (bg-success).

3️⃣ Striped & Animated Progress Bars

✅ Example: Striped & Animated Progress Bar

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

Tag: Lesson 12: Cards

Lesson 12: Cards, Accordions & Progress Bars in Bootstrap

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

Module 9: Final Project – Building a Real-World Website

🔹 1. Introduction to Cards, Accordions & Progress Bars

🔹 2. Bootstrap Cards

1️⃣ Basic Card Structure

2️⃣ Cards with Headers & Footers

3️⃣ Card Grid Layout

🔹 3. Bootstrap Accordions

1️⃣ Basic Accordion Structure

2️⃣ Multiple Accordion Items

🔹 4. Bootstrap Progress Bars

1️⃣ Basic Progress Bar

2️⃣ Colored Progress Bars

3️⃣ Striped & Animated Progress Bars

📝 Lesson Recap Quiz

📌 Multiple-Choice Questions (MCQs)

📌 True or False

🎯 Practical Challenge

🎓 Lesson Summary