📌 Objective: Learn how to use Bootstrap’s Breadcrumbs & Pagination components to improve navigation and user experience.

---

🔹 1. Introduction to Breadcrumbs & Pagination

Breadcrumbs and pagination help users navigate large websites efficiently.

💡 Why Use Breadcrumbs & Pagination?
✔️ Breadcrumbs show the user’s current location within the site.
✔️ Pagination divides large content into multiple pages for better usability.

---

🔹 2. Bootstrap Breadcrumbs

Breadcrumbs display hierarchical navigation, helping users track their path on a website.

✅ Example: Simple Breadcrumb Navigation

🔹 What happens?

• The breadcrumb links show the navigation hierarchy.
• The current page (“Article”) is bold and non-clickable.

---

1️⃣ Breadcrumb with Icons

✅ Example: Breadcrumb with Icons

🔹 What happens?

• Icons are added next to breadcrumb items.

---

2️⃣ Styling Breadcrumbs with Backgrounds

✅ Example: Colored Breadcrumbs

🔹 What happens?

• The breadcrumb has a light background (bg-light).
• The current page is highlighted in blue (text-primary).

---

🔹 3. Bootstrap Pagination

Pagination helps users navigate large datasets by breaking them into multiple pages.

✅ Example: Simple Pagination

🔹 What happens?

• Users navigate between multiple pages using numbered links.

---

1️⃣ Pagination with Active & Disabled States

✅ Example: Pagination with Active Page & Disabled Button

🔹 What happens?

• The “Previous” button is disabled.
• The current page (2) is highlighted as active.

---

2️⃣ Pagination with Icons

✅ Example: Pagination Using Icons

🔹 What happens?

• The “Previous” and “Next” buttons have arrow icons instead of text.

---

3️⃣ Large & Small Pagination

✅ Example: Small & Large Pagination

🔹 What happens?

• The first pagination is large (pagination-lg).
• The second pagination is small (pagination-sm).

---

4️⃣ Centered Pagination

✅ Example: Centering Pagination

🔹 What happens?

• The pagination is centered (justify-content-center).

---

📝 Lesson Recap Quiz

🎯 Test your knowledge of Bootstrap Breadcrumbs & Pagination.

📌 Multiple-Choice Questions (MCQs)

1️⃣ What Bootstrap class is used for breadcrumbs?
a) .breadcrumb-bar
b) .breadcrumb
c) .nav-breadcrumb
d) .breadcrumb-list

✅ Correct Answer: b) .breadcrumb

---

2️⃣ How do you highlight the current breadcrumb item?
a) .breadcrumb-current
b) .active
c) .highlighted
d) .breadcrumb-selected

✅ Correct Answer: b) .active

---

3️⃣ What Bootstrap class is used for pagination links?
a) .pagination-list
b) .pagination
c) .pager
d) .nav-pagination

✅ Correct Answer: b) .pagination

---

📌 True or False

4️⃣ Bootstrap pagination can be made larger or smaller using .pagination-lg or .pagination-sm.
✅ Answer: True

5️⃣ Breadcrumbs automatically track a user’s navigation.
✅ Answer: False (Breadcrumbs need to be manually set up.)

---

🎯 Practical Challenge

✅ Create a breadcrumb navigation with:

• Icons for each breadcrumb item
• A highlighted active page
  ✅ Build a pagination component with:
• “Previous” and “Next” buttons
• Centered alignment (justify-content-center)
• An active page indicator
  ✅ Post your solution in the discussion forum for feedback!

---

🎓 Lesson Summary

✅ Breadcrumbs (.breadcrumb) improve website navigation.
✅ Pagination (.pagination) divides large datasets into pages.
✅ .active highlights the current page or breadcrumb.
✅ .pagination-lg and .pagination-sm adjust the pagination size.