📌 Objective: Learn how to build a fully responsive navigation bar (navbar) using Bootstrap.

---

🔹 1. Introduction to Bootstrap Navbar

A navigation bar (navbar) is a key UI component in websites, allowing users to navigate between pages.
Bootstrap provides a prebuilt navbar structure with mobile-friendly behavior.

💡 Why Use Bootstrap Navbar?
✔️ Pre-styled and customizable
✔️ Mobile-first and responsive
✔️ Supports dropdowns, brand logos, and search forms

---

🔹 2. Basic Bootstrap Navbar Structure

A Bootstrap navbar is created using the .navbar class.

✅ Example: Basic Navbar

🔹 What happens?

• The brand/logo appears on the left.
• The menu collapses into a hamburger button on small screens.

---

🔹 3. Customizing Navbar Colors & Themes

You can change the navbar color scheme using .navbar-light and .navbar-dark.

✅ Example: Dark Navbar with a Blue Background

🔹 What happens?

• The navbar background turns blue (bg-primary).
• The text is white (navbar-dark) for better contrast.

---

🔹 4. Adding a Dropdown Menu

Dropdown menus allow users to select options from a list.

✅ Example: Navbar with a Dropdown

🔹 What happens?

• The “Services” menu expands on hover to show more options.

---

🔹 5. Adding a Search Box to the Navbar

A search input field can be placed inside the navbar.

✅ Example: Navbar with a Search Box

🔹 What happens?

• A search bar appears on the right of the navbar.
• The search button uses .btn-outline-success.

---

🔹 6. Making the Navbar Sticky or Fixed

You can make the navbar stick to the top of the page when scrolling.

1️⃣ Sticky Navbar

Use .sticky-top to keep the navbar always visible at the top.

✅ Example: Sticky Navbar

🔹 What happens?

• The navbar remains at the top when scrolling.

---

2️⃣ Fixed Navbar

Use .fixed-top to always keep the navbar at the top.

✅ Example: Fixed Navbar

🔹 What happens?

• The navbar stays fixed at the top, even when scrolling.

---

📝 Lesson Recap Quiz

🎯 Test your knowledge of Bootstrap Navbar.

📌 Multiple-Choice Questions (MCQs)

1️⃣ What Bootstrap class makes a navbar responsive?
a) .navbar-fixed
b) .navbar-responsive
c) .navbar-expand-lg
d) .navbar-mobile

✅ Correct Answer: c) .navbar-expand-lg

---

2️⃣ What class is used to make a navbar sticky when scrolling?
a) .fixed-navbar
b) .sticky-navbar
c) .navbar-top
d) .sticky-top

✅ Correct Answer: d) .sticky-top

---

3️⃣ How do you add a dropdown menu inside a Bootstrap navbar?
a) .navbar-dropdown
b) .dropdown-menu
c) .menu-dropdown
d) .navbar-toggle

✅ Correct Answer: b) .dropdown-menu

---

📌 True or False

4️⃣ The .navbar-dark class makes navbar text light-colored.
✅ Answer: True

5️⃣ The .navbar-toggler class is required to make a navbar collapsible on mobile.
✅ Answer: True

---

🎯 Practical Challenge

✅ Create a fully responsive Bootstrap navbar with:

• A brand/logo
• A dropdown menu for “Services”
• A search box inside the navbar
• A sticky navbar at the top
  ✅ Post your solution in the discussion forum for feedback!

---

🎓 Lesson Summary

✅ Bootstrap Navbar (.navbar) provides mobile-friendly navigation.
✅ .navbar-expand-lg makes the navbar expand on larger screens.
✅ Dropdowns (.dropdown-menu) add extra menu options.
✅ .sticky-top and .fixed-top keep the navbar visible when scrolling.