Navbars come with built-in support for a handful of sub-components. Here’s an example of all the sub-components included in a responsive light-themed navbar.
Adding images to the
.navbar-brand will likely always require custom styles or utilities to properly size.
Navbar navigation links build on our
.nav options with their own modifier class and require the use of toggler classes for proper responsive styling.
Place various form controls and components within a navbar with
Navbars may contain bits of text with the help of
Theming the navbar using 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
Wrap a navbar in a
.container to center it on a page or add one within to only center the contents of a fixed or static top navbar.
Navbar togglers are left-aligned by default, but should they follow a sibling element like a .navbar-brand, they’ll automatically be aligned to the far right. Reversing your markup will reverse the placement of the toggler.
Sometimes you want to use the collapse plugin to trigger hidden content elsewhere on the page. It works on the id and data-target matching, that’s easily done!