Bootstrap 4 Navbar


Navigation bars

A navigation bar is a navigation header that appears at the top of a page.


Basic Navbar

In bootstrap, navigation bars are extended or collapsed. this depends on the screen size.

Creating a bootstrap navigation bar requires a .navbar class to make it responsive you need .navbar-extend-xl | lg | md | sm.

If you want to add a link inside the navbar, you have to add the .navbar-nav class inside the <ul>, the .nav-item class inside the <li>, and the .nav-link class inside the <a>.

Example Code

<nav class="navbar navbar-expand-xl bg-light">
<ul class="navbar-nav">
<li class="nav-item">
<a href="#" class="nav-link">Link 1</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">Link 2</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">Link 3</a>
</li>
</ul>
</nav>

Vertical Navbar

In bootstrap, navigation bars are extended or collapsed. this depends on the screen size.

Remove the .navbar-extend-xl | lg | md | sm classes then create a vertical navigation bar.

Example Code

<nav class="navbar bg-light">
<ul class="navbar-nav">
<li class="nav-item">
<a href="#" class="nav-link">Link 1</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">Link 2</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">Link 3</a>
</li>
</ul>
</nav>

Centered Navbar

When you create centered navbar then you add .justify-content-center class inside in the <nav> tag.

Example Code

<nav class="navbar justify-content-center navbar-expand-sm bg-light">
<ul class="navbar-nav">
<li class="nav-item">
<a href="#" class="nav-link">Link 1</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">Link 2</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">Link 3</a>
</li>
</ul>
</nav>

Right Aligned Navbar

When you create right aligned navbar then you add .justify-content-end class inside in the <nav> tag.

Example Code

<nav class="navbar justify-content-end navbar-expand-sm bg-light">
<ul class="navbar-nav">
<li class="nav-item">
<a href="#" class="nav-link">Link 1</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">Link 2</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">Link 3</a>
</li>
</ul>
</nav>

Colored Navbar

To add a background color in the navbar, use contextual classes .bg-primary,.bg-success,.bg-secondary,.bg-info,.bg-warning,.bg-light,.bg-danger and .bg-dark.

Note:

Example Code

<nav class="navbar navbar-expand-sm bg-primary navbar-dark">
<a href="#" class="navbar-brand">LOGO</a>
<ul class="navbar-nav">
<li class="nav-item">
<a href="#" class="nav-link">Link 1</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">Link 2</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">Link 3</a>
</li>
</ul>
</nav>

Add Logo on Navbar

Add Logo on the navbar then you add .navbar-brand.

Note:

You add this .navbar-brand class outside of the <ul> tag.

Example Code

<nav class="navbar navbar-expand-sm bg-primary navbar-dark">
<a href="#" class="navbar-brand">LOGO</a>
<ul class="navbar-nav">
<li class="nav-item">
<a href="#" class="nav-link">Link 1</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">Link 2</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">Link 3</a>
</li>
</ul>
</nav>

Dropdown on Navbar

Example Code

<nav class="navbar navbar-expand-sm bg-primary navbar-dark">
<a href="#" class="navbar-brand">LOGO</a>
<ul class="navbar-nav">
<li class="nav-item">
<a href="#" class="nav-link">Link 1</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">Link 2</a>
</li>
<li class="nav-item dropdown">
<a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown">Dropdown</a>
<div class="dropdown-menu">
<a href="#" class="dropdown-item">Link 3</a>
<a href="#" class="dropdown-item">Link 4</a>
</div>
</li>
</ul>
</nav>

Adding Form & Button Navbar

Example Code

<nav class="navbar navbar-expand-xl bg-dark">
<form class="form-inline">
<input class="form-control mr-sm-2" type="text" placeholder="Search">
<button class="btn btn-success" type="submit">Search</button>
</form>
</nav>

Collapsible Navbar

Example Code

<nav class="navbar navbar-expand-md bg-dark navbar-dark">
<a href="#" class="navbar-brand">LOGO</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbarExample">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="collapsibleNavbarExample">
<ul class="navbar-nav">
<li class="nav-item">
<a href="#" class="nav-link">Link 1</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">Link 2</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">Link 3</a>
</li>
</div>
</ul>
</nav>

Fixed Navbar

Example Code

<nav class="navbar navbar-expand-xl bg-light fixed-top">
<ul class="navbar-nav">
<li class="nav-item">
<a href="#" class="nav-link">Link 1</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">Link 2</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">Link 3</a>
</li>
</ul>
</nav>