📌 Objective: Learn how to customize Bootstrap styles using SCSS variables and build a custom Bootstrap theme.

---

🔹 1. Introduction to Bootstrap SCSS Customization

Bootstrap is built using SCSS (Sassy CSS), which allows customization of colors, typography, spacing, and other styles.

💡 Why Use SCSS for Bootstrap Customization?
✔️ Modify Bootstrap colors, fonts, and layout without overriding CSS.
✔️ Improve performance by compiling only the necessary Bootstrap components.
✔️ Make your theme unique while using Bootstrap’s framework.

---

🔹 2. Setting Up Bootstrap SCSS

To customize Bootstrap, follow these steps:

1️⃣ Install Bootstrap with npm

✅ Run the following command:

🔹 What happens?

• This installs Bootstrap and its SCSS files in node_modules/bootstrap/.

---

2️⃣ Create a SCSS File for Customization

Inside your project, create a custom SCSS file (e.g., custom.scss).

✅ Example: Import Bootstrap in SCSS

🔹 What happens?

• Bootstrap variables are modified before importing Bootstrap styles.

---

🔹 3. Customizing Bootstrap Colors

Bootstrap uses SCSS variables to define colors.

✅ Example: Changing Bootstrap Colors

🔹 What happens?

• The primary color changes from blue to orange (#ff6600).

---

🔹 4. Customizing Bootstrap Typography

Modify Bootstrap’s default font family, sizes, and weights.

✅ Example: Custom Font & Typography

🔹 What happens?

• The default font changes to Poppins.
• H1 headers become larger.

---

🔹 5. Customizing Bootstrap Buttons

Bootstrap buttons are styled using SCSS variables.

✅ Example: Custom Button Styles

🔹 What happens?

• Buttons become larger and rounded.

---

🔹 6. Creating a Custom Theme

You can define a completely custom theme using SCSS.

✅ Example: Custom Theme

🔹 What happens?

• The entire site follows a custom theme with purple primary color.

---

🔹 7. Compiling SCSS to CSS

To apply your SCSS changes, compile SCSS into CSS.

✅ Example: Compile SCSS to CSS

🔹 What happens?

• The SCSS file compiles into a CSS file (custom.css).

---

🔹 8. Using Compiled CSS in HTML

Once compiled, link the custom CSS in your HTML file.

✅ Example: Using Custom Bootstrap Styles

🔹 What happens?

• Bootstrap now uses your customized styles.

---

📝 Lesson Recap Quiz

🎯 Test your knowledge of Bootstrap SCSS Customization.

📌 Multiple-Choice Questions (MCQs)

1️⃣ What command installs Bootstrap with SCSS?
a) npm install bootstrap
b) bootstrap install
c) sass install bootstrap
d) bootstrap-cli install

✅ Correct Answer: a) npm install bootstrap

---

2️⃣ Where should you override Bootstrap variables?
a) After importing Bootstrap
b) Before importing Bootstrap
c) Inside HTML
d) In JavaScript

✅ Correct Answer: b) Before importing Bootstrap

---

📌 True or False

3️⃣ Bootstrap’s SCSS variables can be customized without JavaScript.
✅ Answer: True

4️⃣ You must recompile SCSS whenever you change Bootstrap variables.
✅ Answer: True

---

🎯 Practical Challenge

✅ Modify Bootstrap’s primary color to #ff5722.
✅ Customize Bootstrap buttons to have rounded corners and a larger size.
✅ Set Bootstrap’s default font to “Roboto”.
✅ Post your solution in the discussion forum for feedback!

---

🎓 Lesson Summary

✅ Bootstrap SCSS customization allows deep style modifications.
✅ Variables ($primary, $font-family-sans-serif) control Bootstrap styles.
✅ SCSS must be compiled into CSS using sass or a build tool.
✅ Customizing Bootstrap SCSS makes your theme unique.