Navbars combine branding, navigation links, and toggles. Core classes: navbar, navbar-expand-lg (collapse below lg), navbar-brand, and navbar-nav on a <ul>.
Collapse pattern
Below the expand breakpoint, links hide inside .collapse.navbar-collapse. The toggler button uses data-bs-toggle="collapse" and data-bs-target—Bootstrap JS handles the interaction. Always include aria-controls and aria-expanded for accessibility.
Important interview questions and answers
- Q: What does navbar-expand-md mean?
A: Navbar is expanded (horizontal) from md up; below md, content collapses behind the toggler. - Q: Why is JS required?
A: Collapse toggling, dropdown menus in nav, and scrollspy are behavior plugins—not pure CSS. - Q: Navbar vs nav?
A:.navstyles a list of links;.navbaradds layout, brand slot, toggler, and responsive collapse shell.
Self-check
- Which attribute connects the toggler to the collapsible region?
- What class keeps nav links horizontal on large screens?
Challenge
Collapsible nav
- Use navbar + toggler markup from the lesson.
- Resize below
lgand open the menu.
Done when: collapse toggler reveals nav links on small screens.