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.

You can also configure navbars to collapse in smaller viewports and become horizontal in larger viewports.

Basic Navbar

Here's an explanation:

  • Wrap everything inside a <nav> element with the .navbar class, along with a color scheme. For example, class="navbar navbar-light bg-faded").
  • For the list of links, use a <ul> with class="nav navbar-nav".
  • For each individual list item, use <li> with class="nav-item".
  • For the individual links use <a> with class="nav-link".

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 a .pull-*-right class (.pull-sm-right) to align the form 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 .pull-*-left or .pull-*-right classes to align components within the navbar.

The responsive classes available for left alignment are .pull-xs-left, .pull-sm-left, .pull-md-left, .pull-lg-left, and .pull-xl-left.

The responsive classes available for right alignment are .pull-xs-right, .pull-sm-right, .pull-md-right, .pull-lg-right, and .pull-xl-right.

These classes float an element to the left or right based on the current viewport size.

You can also use the various .pull-*-none classes to disable floating.

Bootstrap 4 vs Bootstrap 3

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

Bootstrap 4 uses the various .pull-*-left, .pull-*-right, and .pull-*-none responsive 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-dark), 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.

In this case we used HTML's <style> tag to add the styles, but it's recommended that you place it in your external style sheet.

Bootstrap 4 vs Bootstrap 3

Bootstrap 4 introduced the .bg-* class, as well as the .navbar-light and .navbar-dark classes.

Bootstrap 3 allows for inverse navbars but it doesn't provide the other classes.

Fixed Navbars

You can fix a navbar to the top or bottom of the viewport by using either .navbar-fixed-top or .navbar-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:

body { padding-top: 70px; }

And for "fixed bottom":

body { padding-bottom: 70px; }

You can adjust these values as required.

Collapsible Content

You can make your navbar collapsible by adding .navbar-toggler and data-toggle="collapse" to the navbar, as well as the data-target attribute with a value of the ID of the content to collapse.

On the content container, add the .collapse class, and be sure to give it an ID.

Responsive Navbars

You use the .navbar-toggler class along with Bootstrap's .navbar-toggleable-* classes to create a responsive navbar that collapses at a given viewport width.

For example, you could use .navbar-toggleable-sm to turn the navbar into a togglable navbar on small viewports.

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.