Bootstrap 5 TutorialLesson 23Free preview

BS5 Navbar

This lesson is part of Bootstrap · All levels

Summary

Navbar is a responsive navigation bar that can contain brands, links, dropdowns, and search forms. The basic class is .navbar with .navbar-expand-lg so that the menu is straight on the big screen and arranged under the button toggle on the small screen. The vertical menu uses .navbar-nav and the hamburger button uses .navbar-toggler.

Key points

.navbar is the main packaging and .navbar-brand for the logo or site name.
It determines when the menu appears straight. (.navbar-expand-)
The navigation collapse hides the menu on the small screen.
.navbar-toggler opens the menu through the data-bs-toggle="collapse".
.navbar-dark with .bg-* set the color of the navbar theme.

Full lesson

Code examples and quizzes

Full lessons, code examples, and quizzes are available to subscribers. 5 questions.