Bootstrap4 Navbar

The navbar is usually placed at the top of the page.

We can use the.navbarclass to create a standard navbar, followed by:.navbar-expand-xl|lg|md|smclass to create a responsive navbar (spread horizontally on large screens, stacked vertically on small screens).

The options on the navbar can use the<ul>element and addclass="navbar-nav"class.<li>add on the.nav-itemclass,<a>use on the.nav-linkclass:

Example

<!--On small screens, the horizontal navbar will switch to vertical.--> <nav class="navbar navbar-expand-sm bg-light"> <!-- Links --> <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>

Try it yourself »

Vertical Navbar

By deleting the.navbar-expand-xl|lg|md|smclass to create a vertical navbar:

Example

<!--Vertical Navbar--> <nav class="navbar bg-light"> <!-- Links --> <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>

Try it yourself »

Centered Navbar

By adding the.justify-content-centerclass to create a centered navbar:

Example

<nav class="navbar navbar-expand-sm bg-light justify-content-center"> ... </nav>

Try it yourself »

Navbar with Different Colors

You can use the following classes to create navbars with different colors:.bg-primary, .bg-success, .bg-info, .bg-warning, .bg-danger, .bg-secondary, .bg-darkand.bg-light)。

Tip:For dark backgrounds, set the text color to light; for light backgrounds, set the text color to dark.

Example

<!--Gray background with black text--> <nav class="navbar navbar-expand-sm bg-light navbar-light"> <ul class="navbar-nav"> <li class="nav-item active"> <a class="nav-link" href="#">Active</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link</a> </li> <li class="nav-item"> <a class="nav-link disabled" href="#">Disabled</a> </li> </ul> </nav> <!--Black background with white text--> <nav class="navbar navbar-expand-sm bg-dark navbar-dark">...</nav> <!--Blue background with white text--> <nav class="navbar navbar-expand-sm bg-primary navbar-dark">...</nav>

Try it yourself »

Active and Disabled States: You can<a>add on the element.activeclass to highlight the selected option..disabledclass is used to make the link unclickable.

Brand/Logo

.navbar-brandclass is used to highlight the brand/logo:

Example

<nav class="navbar navbar-expand-sm bg-dark navbar-dark"> <a class="navbar-brand" href="#">Logo</a> ... </nav>

Try it yourself »

You can use the.navbar-brandclass to make the image responsive in the navbar.

Example

<nav class="navbar navbar-expand-sm bg-dark navbar-dark"> <a class="navbar-brand" href="#"> <img src="bird.jpg" alt="Logo" style="width:40px;"> </a> ... </nav>

Try it yourself »

Collapsible Navbar

Usually, on small screens we collapse the navbar and show the navigation options by clicking.

To create a collapsible navbar, you can add to the buttonclass="navbar-toggler", data-toggle="collapse" and data-target="#thetarget"class. Then on the div that has theclass="collapse navbar-collapse"class, wrap the navigation content (links) in the div, and the div element's id matches the button'sdata-targetid specified in the data-target:

Example

<nav class="navbar navbar-expand-md bg-dark navbar-dark"> <!-- Brand --> <a class="navbar-brand" href="#">Navbar</a> <!-- Toggler/collapsibe Button --> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar"> <span class="navbar-toggler-icon"></span> </button> <!-- Navbar links --> <div class="collapse navbar-collapse" id="collapsibleNavbar"> <ul class="navbar-nav"> <li class="nav-item"> <a class="nav-link" href="#">Link</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link</a> </li> </ul> </div> </nav>

Try it yourself »

Navbar with Dropdown Menu

You can set a dropdown menu on the navbar:

Example

<nav class="navbar navbar-expand-sm bg-dark navbar-dark"> <!-- Brand --> <a class="navbar-brand" href="#">Logo</a> <!-- Links --> <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> <!-- Dropdown --> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown"> Dropdown link </a> <div class="dropdown-menu"> <a class="dropdown-item" href="#">Link 1</a> <a class="dropdown-item" href="#">Link 2</a> <a class="dropdown-item" href="#">Link 3</a> </div> </li> </ul> </nav>

Try it yourself »

Navbar Forms and Buttons

Navbar Form<form>The element uses theclass="form-inline"class to arrange the input and button:

Example

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

Try it yourself »

You can also use other input classes, such as.input-group-addonclass is used to add a small label in front of the input field.

Example

<nav class="navbar navbar-expand-sm bg-dark navbar-dark"> <form class="form-inline" action="/action_page.php"> <div class="input-group"> <div class="input-group-prepend"> <span class="input-group-text">@</span> </div> <input type="text" class="form-control" placeholder="Username"> </div> </form> </nav>

Try it yourself »

Navbar Text

Use the.navbar-textclass to set non-link text on the navbar, ensuring horizontal alignment, and the same color and padding.

Example

<nav class="navbar navbar-expand-sm bg-dark navbar-dark"> <!-- Links --> <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> </ul> <!-- Navbar text--> <span class="navbar-text"> Navbar text </span> </nav>

Try it yourself »

Fixed Navbar

The navigation bar can be fixed at the top or bottom.

We use.fixed-topclass to fix the navigation bar:

Example

<nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-top"> ... </nav>

Try it Yourself »

.fixed-bottomclass is used to set the navigation bar fixed at the bottom:

Example

<nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-bottom"> ... </nav>

Try it Yourself »
Other extensions