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-brandwill likely always require custom styles or utilities to properly size.
Navbar navigation links build on our .navoptions 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 .form-inline.
Navbars may contain bits of text with the help of .navbar-text.
Theming the navbar using theming classes and background-color utilities. Choose from .navbar-lightfor use with light background colors, or .navbar-darkfor dark background colors. Then, customize with .bg-*utilities.
Wrap a navbar in a .containerto 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!