📌 Objective: Learn how to use Bootstrap’s buttons, badges, and alert components to create interactive and visually appealing UI elements.

---

🔹 1. Introduction to Bootstrap Buttons, Badges & Alerts

Bootstrap provides pre-styled UI components that make it easy to create interactive elements.

💡 Why Use Bootstrap Buttons, Badges & Alerts?
✔️ Consistent styling across all browsers.
✔️ Customizable with utility classes.
✔️ Interactive elements that enhance the user experience.

---

🔹 2. Bootstrap Buttons

1️⃣ Basic Button Styles

Bootstrap buttons are styled using the .btn class along with a color class (.btn-primary, .btn-secondary, etc.).

✅ Example: Different Button Variants

🔹 What happens?

• Buttons get predefined colors matching Bootstrap’s theme.

---

2️⃣ Outline Buttons

Use .btn-outline-* classes to create bordered buttons with transparent backgrounds.

✅ Example: Outline Buttons

🔹 What happens?

• The buttons only have borders and take the background color on hover.

---

3️⃣ Button Sizes

Use .btn-lg for larger buttons and .btn-sm for smaller buttons.

✅ Example: Button Sizes

---

4️⃣ Block-Level Buttons

Make a button full width using .d-block w-100.

✅ Example: Full-Width Button

---

5️⃣ Button Groups

Group multiple buttons together using .btn-group.

✅ Example: Button Group

---

🔹 3. Bootstrap Badges

Badges display notifications, labels, or status indicators.

1️⃣ Basic Badges

Use .badge to create a badge.

✅ Example: Adding a Badge

🔹 What happens?

• A red badge appears next to “Notifications” showing 5.

---

2️⃣ Pill-Shaped Badges

Use .rounded-pill to create rounded badges.

✅ Example: Pill Badges

🔹 What happens?

• The badge is pill-shaped instead of square.

---

3️⃣ Badges in Buttons

You can place badges inside buttons.

✅ Example: Button with Badge

🔹 What happens?

• A notification counter appears inside the button.

---

🔹 4. Bootstrap Alerts

Alerts are used to display important messages, warnings, or success notifications.

1️⃣ Basic Alert Styles

Use .alert with color classes (.alert-primary, .alert-success, etc.).

✅ Example: Different Alerts

---

2️⃣ Dismissible Alerts

Make alerts closable by adding .alert-dismissible and a close button.

✅ Example: Dismissible Alert

🔹 What happens?

• The alert has a close button, and clicking it hides the alert.

---

3️⃣ Alerts with Links

Make alert messages interactive by adding links.

✅ Example: Alert with Link

---

4️⃣ Colored Alerts with Icons

Bootstrap 5.3 allows icons inside alerts.

✅ Example: Alert with Icon

🔹 What happens?

• An icon appears inside the alert.

---

📝 Lesson Recap Quiz

🎯 Test your understanding of Bootstrap buttons, badges, and alerts.

📌 Multiple-Choice Questions (MCQs)

1️⃣ What class is used to create a Bootstrap button?
a) .button
b) .btn
c) .button-primary
d) .bootstrap-button

✅ Correct Answer: b) .btn

---

2️⃣ How do you create an outline button in Bootstrap?
a) .btn-outline
b) .btn-border
c) .btn-outline-primary
d) .btn-bordered

✅ Correct Answer: c) .btn-outline-primary

---

3️⃣ What class adds a dismissible close button to an alert?
a) .alert-close
b) .dismiss-button
c) .alert-dismissible
d) .alert-closeable

✅ Correct Answer: c) .alert-dismissible

---

📌 True or False

4️⃣ Badges can be used inside buttons.
✅ Answer: True

5️⃣ .btn-group allows multiple buttons to be grouped together.
✅ Answer: True

---

🎯 Practical Challenge

✅ Create a button with a badge that shows the number of unread messages.
✅ Add a dismissible success alert with a close button.
✅ Create three different button types (.btn-primary, .btn-outline-danger, .btn-lg).
✅ Post your solution in the discussion forum for feedback!

---

🎓 Lesson Summary

✅ Bootstrap buttons (.btn, .btn-outline-*) provide interactive elements.
✅ Badges (.badge) display counters, labels, and statuses.
✅ Alerts (.alert, .alert-dismissible) show notifications and warnings.
✅ Bootstrap allows buttons, alerts, and badges to be easily styled and customized.