Bootstrap 4 Navbars
Add a fully-functional, responsive navbar to your website with minimal code.
The Bootstrap 4 navbar is a simple wrapper for positioning branding, navigation, and other elements into a navigation header.
Here's an explanation:
- Wrap everything inside a
navelement with the
.navbarclass and a
.navbar-toggleable-*class, along with a color scheme.
- For the togglable menu on smaller devices, use a
.navbar-toggler. This can optionally have
.navbar-toggler-rightto display the button on the right of the navbar. To display the "hamburger", use the
.navbar-toggler-iconclass on a
- For the list of links, use a
- For each individual list item, use
- For the individual links use
Navbars with Dropdowns
.active class to mark a link as the current page or section (apply it to the
Also add a
.sr-only to communicate this to screen readers.
Navbar with Form Controls
You can include form controls within a navbar by adding the
.form-inline to the
form element. Here we also use
. mr-auto on the previous element so that the form is aligned to the right.
View this example in a new window to see how it looks on a wider viewport.
You can use any of the spacing utilities (such as
mr-auto) or any of the flexbox alignment utilities (such as
.justify-content-end) to align elements within the navbar.
The flexbox classes take their names from the actual flexbox property/value declaration. This makes it easy to guess the name of the most appropriate class for a given situation.
You can also add a responsive abbreviation to effect an alignment only on certain viewport sizes. For example,
justify-content: end on large devices and up.
Bootstrap 4 vs Bootstrap 3
Bootstrap 3 used
.navbar-right for navbar alignment.
Bootstrap 4 uses the various helper classes.
Bootstrap provides various options for adding color to navbars. The way it works is, you specify light or dark (via
.navbar-inverse), then specify a color. Color can be specified either via one of Bootstrap's color classes (eg,
.bg-primary), or by specifying your own color with CSS (eg, using
The previous examples already specify the navbar color. Here are some more examples.
Here, we use
.bg-primary to set the navbar color. Everything else remains the same.
To specify your own custom color, omit any
.bg-* class (eg, remove
.bg-primary) and add your own color using CSS.
Bootstrap 4 vs Bootstrap 3
Bootstrap 4 introduced the
.navbar-light class, and allows the
.bg-* classes to be used on navbars.
Bootstrap 3 allows for inverse navbars but it doesn't support the other classes on navbars.
You can fix a navbar to the top or bottom of the viewport by using either
When using fixed navbars, you will usually need to add padding to compensate for the height of the navbar (otherwise the navbar will hide your content).
For example, for a "fixed top" navbar, try this:
And for "fixed bottom":
You can adjust these values as required.
Bootstrap 4 is currently in alpha release, therefore, do not use it in production yet. To be safe, refer to Bootstrap 3 Navbars until Bootstrap 4 becomes an official release.
Also check out the differences between Bootstrap v3 and v4.