Bootstrap 3 Navbars
Add a fully-functional, responsive navbar to your website with minimal code.
Bootstrap navbars allow you to create complex navbars that collapse in smaller viewports and become horizontal in larger viewports.
If you're viewing this on a large screen, the following navbar should appear expanded and horizontal. Otherwise it will be collapsed. In this example, the first link is highlighted (using
class="active") indicating that it's the current page or section.
This navbar is achieved using the following markup:
Navbars with Dropdowns
Navbar with Form Controls
You can include form controls by using
.navbar-form on the
<form> element. This Bootstrap class adjusts the vertical alignment and collapses the form in smaller viewports.
Forms within navbars also require one of the alignment classes to align the form controls within the navbar (see alignment below).
You can use
.navbar-right to align components within the navbar.
Here, we align the search form to the left, and Link 4 to the right.
Runs of text (typically inside a
<p> element) should have Bootstrap's
.navbar-text class applied. This ensures that the correct leading and color is applied to the text.
Non-nav links (i.e. links that are located within text and not within the navbar component) should have Bootstrap's
.navbar-link class applied. This ensures that the correct color is applied to the link.
Bootstrap provides the
.navbar-inverse class to invert the colors of the navbar. Simply replace
.navbar-inverse and it's done.
As with any Bootstrap component, you can modify the colors and other styles as you need.
You can fix a navbar to the top or bottom of the viewport by using either
Also, be sure to have a
.container-fluid so that the navbar is centered and padded appropriately.
When using fixed navbars, you will usually need to add padding to compensate for the height of the navbar. By default, the navbar is 50px high and this will overlay (hide) your content.
To fix this on "fixed top" navbars, it's suggested that you add:
For "fixed bottom" navbars, add:
You can adjust these values as required.
You can use
.navbar-static-top to make the navbar behave the opposite to the fixed one (i.e. it scrolls with the page).