Here’s what you need to know before getting started with the navbar:

Navbars require a wrapping .navbar with .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-print to 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 a role="navigation" to every navbar to explicitly identify it as a landmark region for users of assistive technologies.

Theming the navbar has never been easier thanks to the combination of theming classes and background-color utilities. Choose from .navbar-light for use with light background colors, or .navbar-dark for dark background colors. Then, customize with .bg-* utilities.