📌 Objective: Learn how to use Bootstrap Icons & SVGs to enhance your UI with vector graphics.

---

🔹 1. Introduction to Bootstrap Icons & SVGs

Icons and SVGs improve visual clarity and navigation. Bootstrap provides a free icon library with over 1,800+ icons.

💡 Why Use Bootstrap Icons & SVGs?
✔️ Lightweight & Scalable – No pixelation on zoom.
✔️ Customizable with CSS – Change size, color, and effects.
✔️ Compatible with Bootstrap components – Works in buttons, navbars, alerts, etc.

---

🔹 2. Using Bootstrap Icons

Bootstrap Icons require a simple <i> tag with a class.

✅ Example: Adding a Bootstrap Icon

🔹 What happens?

• The house icon appears next to the “Home” text.

---

1️⃣ Using Bootstrap Icons in Buttons

Icons inside buttons make them more interactive and visually appealing.

✅ Example: Button with an Icon

🔹 What happens?

• The download icon appears inside the button.

---

2️⃣ Bootstrap Icons in Links & Navigation

✅ Example: Navbar with Icons

🔹 What happens?

• The “Home” and “Profile” links include icons for clarity.

---

3️⃣ Changing Icon Size & Color

Icons can be styled with CSS.

✅ Example: Custom Icon Size & Color

🔹 What happens?

• The heart icon is larger and red.

---

4️⃣ Animated Icons

Bootstrap supports rotating and spinning icons.

✅ Example: Spinning Icon

🔹 What happens?

• The icon rotates continuously.

---

🔹 3. Using SVGs in Bootstrap

SVGs (Scalable Vector Graphics) are resolution-independent images.

✅ Example: Basic SVG

🔹 What happens?

• A blue circle appears inside the SVG container.

---

1️⃣ Customizing SVGs with Bootstrap Classes

SVGs can be styled using Bootstrap’s utility classes.

✅ Example: SVG with Bootstrap Colors

🔹 What happens?

• The rectangle takes Bootstrap’s “success” (green) color.

---

2️⃣ Using Bootstrap Icons as Inline SVGs

Icons can be embedded as SVGs for customization.

✅ Example: Inline SVG Icon

🔹 What happens?

• The heart icon appears as an SVG.

---

3️⃣ Resizing SVGs Dynamically

✅ Example: Responsive SVGs

🔹 What happens?

• The SVG resizes dynamically to fit the container.

---

🔹 4. Combining Icons & SVGs in UI Components

1️⃣ Icons in Alerts

✅ Example: Alert with an Icon

🔹 What happens?

• The warning icon appears inside the alert box.

---

2️⃣ Icons in Form Inputs

✅ Example: Input Field with an Icon

🔹 What happens?

• The user icon appears inside the input field.

---

3️⃣ Icons in Dropdowns

✅ Example: Dropdown with Icons

🔹 What happens?

• The dropdown options have icons next to them.

---

📝 Lesson Recap Quiz

🎯 Test your knowledge of Bootstrap Icons & SVGs.

📌 Multiple-Choice Questions (MCQs)

1️⃣ What Bootstrap class is used to display an icon?
a) .icon
b) .bootstrap-icon
c) .bi
d) .svg-icon

✅ Correct Answer: c) .bi

---

2️⃣ How can you change an icon’s size?
a) font-size: 2rem;
b) size: large;
c) .icon-large
d) .bi-xl

✅ Correct Answer: a) font-size: 2rem;

---

📌 True or False

3️⃣ Bootstrap Icons require an external font library.
✅ Answer: False (Bootstrap Icons are built-in.)

4️⃣ SVGs can be resized dynamically using .img-fluid.
✅ Answer: True

---

🎯 Practical Challenge

✅ Create a button with an icon (.bi-download) inside it.
✅ Add icons to a navigation menu (.bi-house, .bi-person).
✅ Design a Bootstrap alert box with an SVG warning icon.
✅ Post your solution in the discussion forum for feedback!

---

🎓 Lesson Summary

✅ Bootstrap Icons (.bi) provide scalable, customizable vector graphics.
✅ Icons can be styled using CSS (font-size, color).
✅ SVGs are resolution-independent and can be customized with Bootstrap classes.
✅ Icons work in buttons, dropdowns, alerts, forms, and navigation.