Responsive navigation header, the navbar. Includes support for branding, navigation, and more, including support for our collapse plugin. Read the Official Bootstrap Documentation for a full list of instructions and other options.
Here’s an example of all the sub-components included in a responsive light-themed navbar that automatically collapses at the
lg (large) breakpoint.
.navbar-brand can be applied to most elements, but an anchor works best as some elements might require utility classes or custom styles.
Adding images to the
.navbar-brand will likely always require custom styles or utilities to properly size. Here are some examples to demonstrate.
Place various form controls and components within a navbar with
Navbars may contain bits of text with the help of
.navbar-text. This class adjusts vertical alignment and horizontal spacing for strings of text.
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
Below the example of toggler