Back to Bootstrap HubPractice BootstrapInterview Bootstrap

Nearby lessons

21 of 39
BS5 DropdownsBS5 CollapseBS5 NavsBS5 NavbarBS5 Carousel

🧭 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>).

Example02
Loading editor…

📑 Tabs (.nav-tabs)

.nav-tabs – tab look (underline for active). Add to the same element as .nav. Use .active on the current .nav-link.

Example03
Loading editor…

💊 Pills (.nav-pills)

.nav-pills – pill-style buttons for each link. Add to the same element as .nav. Use .active for the current page.

Example04
Loading editor…

📏 Fill and Justify (.nav-fill, .nav-justified)

.nav-fill – items share space evenly. .nav-justified – equal width. Add to the .nav element.

Example05
Loading editor…

✅ 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 Questions
Progress: 0 / 3