Navbar

To build a navbar in Bootstrap we need to start with adding a .navbar container class to the outer element mostly the nav tag. Inside the .navbar container we need to add an element with the navbar navigation class .navbar-nav which will contain the links for our navigation, mostly the ul tag.

For the links we have to use the .nav-item and .nav-link classes, both these classes can be on the anchor tag. If we are using the unordered list of links then the .nav-itemwill be added on the list items and .nav-link on the anchor tag.

By default the navbar will display the links in a column, to display the links horizontally we need to use the class of .navbar-expand to use this properly we can specify a breakpoint at which the navigation should expand by using .navbar-expand-BREAKPOINT such as .navbar-expand-sm which will expand or make the links horizontal at the small breakpoint and above.

<!-- Example without unordered list, expanding at small breakpoint -->
<nav class="navbar navbar-expand-sm">
  <div class="navbar-nav">
    <a class="nav-item nav-link" href="#">Home</a>
    <a class="nav-item nav-link" href="#">About</a>
    <a class="nav-item nav-link" href="#">Contact</a>
  </div>
</nav>

<!-- Example with unordered list, expanding at medium breakpoint  -->
<nav class="navbar navbar-expand-md">
  <ul class="navbar-nav">
    <li class="nav-item"><a class=" nav-link" href="#">Home</a></li>
    <li class="nav-item"><a class=" nav-link" href="#">About</a></li>
    <li class="nav-item"><a class=" nav-link" href="#">Contact</a></li>
  </ul>
</nav>

In addition to the basic classes for defining the navbar structure we need to define a few styling classes for our navbar. Starting with the background color we can use the .bg-COLOR class to use the colours such as primary, secondary, info, etc. In addition to that we need to use one of the common color classes to tell Bootstrap weather we are using a light or dark background for our navbar by using one of the following classes .navbar-light or .navbar-dark

<!-- Example with dark background, expanding at medium breakpoint  -->
<nav class="navbar bg-dark navbar-dark navbar-expand-md">
  <ul class="navbar-nav">
    <li class="nav-item"><a class=" nav-link" href="#">Home</a></li>
    <li class="nav-item"><a class=" nav-link" href="#">About</a></li>
    <li class="nav-item"><a class=" nav-link" href="#">Contact</a></li>
  </ul>
</nav>

# Navbar