How to Create Navigation Bar using Bootstrap

To start with, navbars require three things - a wrapping .navbar with .navbar-expand{-sm|-md|-lg|-xl} for responsive collapsing and color scheme classes. You can use spacing and flex utility classes for controlling spacing and alignment within navbars.

How to Create Navigation Bar using Bootstrap

For accessibility, either use a <nav> element or, if you are using a more generic element such as a <div>, add a role="navigation" to every navbar to clearly identify it as a navigation.

For example, a responsive light-themed navbar that automatically collapses at the lg (large) breakpoint.

<nav class="navbar navbar-expand-lg navbar-light bg-light">

Color Schemes

Use combination of theming classes and background-color utilities.

  1. .navbar-light for use with light background colors
  2. .navbar-dark for use with dark background colors

Then, customize with .bg-* utilities.

  1. bg-light
  2. bg-dark
  3. bg-primary
  4. style="background-color: #e3f2fd;"

Content in Navbar

A navbar can have following content:

  1. .navbar-brand for company, product, project or any other brand name.
  2. .navbar-nav for a full-height and lightweight navigation (including drop downs).
  3. .navbar-toggler for use with collapse plugin and other navigation toggling behaviors.
  4. .form-inline for any form controls and actions.
  5. .navbar-text for adding vertically centered strings of text.

1. Brand

Use it as an anchor element. For example,

<a class="navbar-brand" href="#">Navbar</a>

2. Nav

You can use it as list items. For example,

<ul class="navbar-nav">
 <li class="nav-item active"><a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a></li>
 <li class="nav-item"><a class="nav-link" href="#">Features</a></li>
 <li class="nav-item"><a class="nav-link" href="#">Pricing</a></li>
 <li class="nav-item"><a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
 </li>
</ul>

There are three classes applied - one each at <ul> tag, <li> tag and <a> tag:

  1. .navbar-nav at <ul> tag
  2. .nav-item at <li> tag, active is used for current item, dropdown is used for drop downs
  3. .nav-link at <a> tag

You can also avoid the list-based approach and use div instead of ul.

3. Dropdown Navigation

Add .dropdown class to <li> tag to enable drop down navigation. For example,

<li class="nav-item dropdown">
 <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
 Dropdown link
 </a>
 <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
 <a class="dropdown-item" href="#">Action</a>
 <a class="dropdown-item" href="#">Another action</a>
 <a class="dropdown-item" href="#">Something else here</a>
 </div>
 </li>

4. Forms

Place various form controls and components within a navbar with .form-inline. For example,

<form class="form-inline">
 <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
 <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>

5. Text

Navbars can contain some text with the help of .navbar-text class. This class adjusts vertical alignment and horizontal spacing for strings of text. For example,

<span class="navbar-text">
 Navbar text with an inline element
</span>

Placement of Navbar

Add the necessary class to the <nav> element. You can choose from fixed to the top, fixed to the bottom, or stickied to the top:

  1. .fixed-top
  2. .fixed-bottom
  3. sticky-top

Responsive Navbar

Navbars can utilize .navbar-toggler, .navbar-collapse, and .navbar-expand{-sm|-md|-lg|-xl} classes to change when their content collapses behind a button. In combination with other utilities, you can easily choose when to show or hide particular elements.

1. Navbar Toggler

<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation">
 <span class="navbar-toggler-icon"></span>
</button>

2. Navbar Collapse

<div class="collapse navbar-collapse" id="navbarTogglerDemo01">
...
...
</div>

The .collapse class indicates a collapsible element, the content that will be shown or hidden with a click of a button. To control the collapsible content, add the data-toggle="collapse" attribute to an <a> or a <button> element. Then, add the data-target="#id" attribute to connect the button with the collapsible content.