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.

Basic Navbar

Here's an explanation:

Navbars with Dropdowns

You can add dropdown menus to your navbar. Just add the dropdown code to a li element with the .dropdown class applied.

Current Page

Use the .active class to mark a link as the current page or section (apply it to the li).

Also add a span with .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.

Alignment

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-lg-end applies justify-content: end on large devices and up.

Bootstrap 4 vs Bootstrap 3

Bootstrap 3 used .navbar-left and .navbar-right for navbar alignment.

Bootstrap 4 uses the various helper classes.

Colors

Bootstrap provides various options for adding color to navbars. The way it works is, you specify light or dark (via .navbar-light or .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 background-color).

The previous examples already specify the navbar color. Here are some more examples.

Inverted

Primary Color

Here, we use .bg-primary to set the navbar color. Everything else remains the same.

Custom Color

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.

Fixed Navbars

You can fix a navbar to the top or bottom of the viewport by using either .fixed-top or .fixed-bottom.

Fixed Top

Fixed Bottom

Padding Required

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.

Alpha Release

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.