Navbar
Includes support for branding, navigation, and more, including support for our collapse plugin.
Navbar navigation links build on our .nav options with their own modifier class and require the use of toggler classes for proper responsive styling. Navigation in navbars will also grow to occupy as much horizontal space as possible to keep your navbar contents securely aligned.
# Navbar style 01
Container layout. Basic.
# Navbar style 02
Full width layout. Topbar. Contact infor. Account setting. Social Network...
# Navbar style 03
Container layout. Center navigation.
Here???s what you need to know before getting started with the navbar:
- Navbars require a wrapping
.navbarwith.navbar-expand{-sm|-md|-lg|-xl}for responsive collapsing and color scheme classes. - Navbars and their contents are fluid by default. Use optional containers to limit their horizontal width.
- Use our spacing and flex utility classes for controlling spacing and alignment within navbars.
- Navbars are responsive by default, but you can easily modify them to change that. Responsive behavior depends on our Collapse JavaScript plugin.
- Navbars are hidden by default when printing. Force them to be printed by adding
.d-printto the.navbar. See the display utility class. - Ensure accessibility by using a
<nav>element or, if using a more generic element such as a<div>, add arole="navigation"to every navbar to explicitly identify it as a landmark region for users of assistive technologies.