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

​x
 
<nav class="navbar navbar-expand-sm navbar-light bg-faded">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#nav-content" aria-controls="nav-content" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
​
<!-- Brand -->
<a class="navbar-brand" href="#">Logo</a>
​
<!-- Links -->
<div class="collapse navbar-collapse" id="nav-content">   
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Link 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link 2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link 3</a>
</li>
</ul>
</div>
</nav>

View Output

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.

xxxxxxxxxx
 
<nav class="navbar navbar-expand-sm navbar-light bg-faded">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#nav-content" aria-controls="nav-content" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
​
<!-- Brand -->
<a class="navbar-brand" href="#">Logo</a>
​
<!-- Links -->
<div class="collapse navbar-collapse" id="nav-content">   
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Link 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link 2</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-toggle="dropdown" id="Preview" href="#" role="button" aria-haspopup="true" aria-expanded="false">
Dropdown
</a>
<div class="dropdown-menu" aria-labelledby="Preview">
<a class="dropdown-item" href="#">Dropdown Link 1</a>
<a class="dropdown-item" href="#">Dropdown Link 2</a>
<a class="dropdown-item" href="#">Dropdown Link 3</a>
</div>
</li>
</ul>
</div>
</nav>

View Output

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.

xxxxxxxxxx
 
<nav class="navbar navbar-expand-sm navbar-light bg-faded">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#nav-content" aria-controls="nav-content" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
​
<!-- Brand -->
<a class="navbar-brand" href="#">Logo</a>
​
<!-- Links -->
<div class="collapse navbar-collapse" id="nav-content">   
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Link 1</a>
</li>
<li class="nav-item active">
<a class="nav-link" href="#">Link 2 <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link 3</a>
</li>
</ul>
</nav>

View Output

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.

xxxxxxxxxx
 
<nav class="navbar navbar-expand-sm navbar-light bg-faded">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#nav-content" aria-controls="nav-content" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
​
<!-- Brand -->
<a class="navbar-brand" href="#">Logo</a>
​
<!-- Links -->
<div class="collapse navbar-collapse" id="nav-content">   
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link" href="#">Link 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link 2</a>
</li>
</ul>
​
<!-- Search -->
<form class="form-inline" role="search">
<input type="text" class="form-control">
<button type="submit" class="btn btn-secondary">Search</button>
</form>
</nav>

View Output

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.

xxxxxxxxxx
 
<nav class="navbar navbar-expand-sm navbar-light bg-faded">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#nav-content" aria-controls="nav-content" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
​
<!-- Brand -->
<a class="navbar-brand" href="#">Logo</a>
​
<!-- Links -->
<div class="collapse navbar-collapse justify-content-end" id="nav-content">   
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Link 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link 2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link 3</a>
</li>
</ul>
</nav>

View Output

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-dark), then specify a color. Color can be specified either via one of Bootstrap's color classes (eg, .bg-primary, .bg-dark), 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.

Primary Color, Light

Here, we use .bg-primary along with .navbar-light:

xxxxxxxxxx
 
<nav class="navbar navbar-expand-sm navbar-light bg-primary">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#nav-content" aria-controls="nav-content" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
​
<!-- Brand -->
<a class="navbar-brand" href="#">Logo</a>
​
<!-- Links -->
<div class="collapse navbar-collapse" id="nav-content">   
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Link 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link 2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link 3</a>
</li>
</ul>
</nav>

View Output

Primary Color, Dark

Here, we use .bg-primary along with .navbar-dark:

xxxxxxxxxx
 
<nav class="navbar navbar-expand-sm navbar-dark bg-primary">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#nav-content" aria-controls="nav-content" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
​
<!-- Brand -->
<a class="navbar-brand" href="#">Logo</a>
​
<!-- Links -->
<div class="collapse navbar-collapse" id="nav-content">   
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Link 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link 2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link 3</a>
</li>
</ul>
</nav>

View Output

Custom Color

To specify your own custom color, omit any .bg-* class (eg, remove .bg-primary) and add your own color using CSS.

xxxxxxxxxx
 
<nav class="navbar navbar-expand-sm navbar-dark" style="background: coral;">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#nav-content" aria-controls="nav-content" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
​
<!-- Brand -->
<a class="navbar-brand" href="#">Logo</a>
​
<!-- Links -->
<div class="collapse navbar-collapse" id="nav-content">   
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Link 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link 2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link 3</a>
</li>
</ul>
​
</nav>

View Output

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

xxxxxxxxxx
 
<nav class="navbar fixed-top navbar-expand-sm navbar-dark bg-dark">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#nav-content" aria-controls="nav-content" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
​
<!-- Brand -->
<a class="navbar-brand" href="#">Logo</a>
​
<!-- Links -->
<div class="collapse navbar-collapse" id="nav-content">   
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Link 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link 2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link 3</a>
</li>
</ul>
</nav>
​
<!-- Set body height so that scrollbars grow -->
<style scoped>
body {
height:2000px;
background-image:url('/pix/samples/bubble1.gif');
}
</style>

View Output

Fixed Bottom

xxxxxxxxxx
 
<nav class="navbar fixed-bottom navbar-expand-sm navbar-dark bg-dark">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#nav-content" aria-controls="nav-content" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
​
<!-- Brand -->
<a class="navbar-brand" href="#">Logo</a>
​
<!-- Links -->
<div class="collapse navbar-collapse" id="nav-content">   
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Link 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link 2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link 3</a>
</li>
</ul>
</nav>
​
<!-- Set body height so that scrollbars grow -->
<style scoped>
body {
height:2000px;
background-image:url('/pix/samples/bubble2.gif');
}
</style>

View Output

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:

xxxxxxxxxx
 
body { padding-top: 70px; }

And for "fixed bottom":

xxxxxxxxxx
 
body { padding-bottom: 70px; }

You can adjust these values as required.