Nearby lessons
21 of 39🧭 BS5 Navs
📌 What Are Bootstrap 5 Navs?
Navs are navigation link groups (tabs, pills, or plain links). Use .nav on a list and .nav-item / .nav-link on each item. Add .nav-tabs or .nav-pills for tab or pill style.
🔗 Base Nav (.nav, .nav-item, .nav-link)
.nav – removes list styling and lays out items. .nav-item – each list item. .nav-link – the link inside (use on <a>).
📑 Tabs (.nav-tabs)
.nav-tabs – tab look (underline for active). Add to the same element as .nav. Use .active on the current .nav-link.
💊 Pills (.nav-pills)
.nav-pills – pill-style buttons for each link. Add to the same element as .nav. Use .active for the current page.
📏 Fill and Justify (.nav-fill, .nav-justified)
.nav-fill – items share space evenly. .nav-justified – equal width. Add to the .nav element.
✅ Nav Best Practices
- Use .nav-tabs for tabbed content, .nav-pills for a pill bar.
- Mark the current page with .active on the .nav-link.
- Use .disabled on a .nav-link for non-clickable items.
🧠 Test Your Knowledge
3 QuestionsProgress: 0 / 3
Keep Going!BS5 Navbar