Bootstrap Navbar Tutorial & Examples

In this article, we are going to see about the bootstrap navbar. Basically Navbar is the navigation section in an any Webpage/website. In the modern semantic web the menubar is identified by <nav> tag and placed in the top of the webpage.

Lets start with Bootstrap 4 Navbar. We use <nav> html tag and the navigation bar is created with the class .navbar we can adjust the size of the navbar by the classes .navbar-expand-xl | lg | md | sm.

The navbar contain multiple links. Inside the navbar, use the <ul class=”navbar-nav”> element with the class .navbar-nav. To add the links use the <li> elements with class name .nav-item afterwards by an <a> element with .nav-link¬†class as shown below,

<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>

Navigation Navbar using Bootstrap 5 – It is almost same as previous version and given example below based on version 5.

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNav">
      <ul class="navbar-nav">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">Home</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>
    </div>
  </div>
</nav>

Vertical Side Navbar

To make the navbar vertical by removing the size class from the navbar (.navbar-expand-xl | lg | md | sm)

Example:


<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>

Left Vertical Navigation menu bar

This is the common usecase or design for all web page so the navbar is in left and the content in the right. Here we use the grid system to separate the sections – for menu .col-sm-3 for content .col-sm-9.

<div class="container-fluid">
  <div class="row">
    <div class="col-sm-3">
      <nav class="navbar bg-light">
        <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>
    </div>

    <div class="col-sm-9">
      <h5>What is Lorem Ipsum?</h5>
      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book./p>
    </div>
  </div>
</div>

Right Vertical navigation menu bar

The vise versa of above use case where the navbar is in the right and the content section in the left.

<div class="container-fluid">
  <div class="row">
    <div class="col-sm-9">
      <h5>What is Lorem Ipsum?</h5>
      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. </p>
    </div>
    <div class="col-sm-3">
      <nav class="navbar bg-light">
        <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>
    </div>
  </div>
</div>

To make the Navbar sticky, we need to add the class .sticky-top to the <nav> tag. It happens when user scrolls the page and the navbar will be fixed/stay at the top of the page.

<nav class="navbar navbar-expand-sm bg-dark navbar-dark sticky-top">
  <a class="navbar-brand" href="#">Logo</a>
  <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>
  </ul>
</nav>

Fixed Navbar

For fixed navbar we need to add the class .fixed-top to the <nav> element. we can make the navbar fixed either top or bottom. When the user scrolls the page it remains in fixed position (top or bottom).

For top fixed navbar adding a class .fixed-top for bottom fixed .fixed-bottom

<nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-top">
  <a class="navbar-brand" href="#">Logo</a>
  <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>
  </ul>
</nav>

How to Center a bootstarp navbar ?

Its ease to make the Navbar center by add the .justify-content-center class to the <nav> tag.

<nav class="navbar navbar-expand-sm bg-light justify-content-center">
  <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>

How to change color of navigation bar in bootstrap?

You can easily change the color of the navbar by add the .bg-color to the navbar <nav> or add the custom color class to the <nav> tag. we can use some default bootsrap color classes (.bg-primary.bg-success.bg-info.bg-warning.bg-danger.bg-secondary.bg-dark)

<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>

<nav class="navbar navbar-expand-sm bg-success navbar-dark">
  <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>

<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
  <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>

<nav class="navbar navbar-expand-sm bg-primary navbar-dark">
  <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>

Nabar Collapse

The collapsable Navbar is mainly used on smaller screens. To maintain responsiveness, the navigation links are replaced with the button.

To create a collapsible navigation bar, use a button with class="navbar-toggler", data-toggle="collapse" and data-target="#collapsenavtarget". Then wrap the navbar content (links, etc) inside a div element with class="collapse navbar-collapse", followed by an id that matches the data-target of the button: “collapsenavtarget“.

<nav class="navbar navbar-expand-md bg-dark navbar-dark">
  <a class="navbar-brand" href="#">Navbar Collapse</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCpllapse">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarCpllapse">
    <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>
  </div>  
</nav>

Bootstrap Navbar Examples

bootstrap 4 navbar

Author : Piyush
Developed : Html, CSS, Js

bootstrap 4 navbar menu with logo & collapsible

Author : TimothyMwangi
Developed : Html

Bootstrap 4 Navbar With Sliding Underline

Author : Mike Doubintchik
Developed : Html, CSS, Js

Bootstrap 4 navbar dropdowns not overlapping the viewport

Author : Gilles Migliori
Developed : Html, Js

Responsive Parallax Navbar Logo – Bootstrap

Author : Tony Hill
Developed : Html, CSS, Js

Bootstrap Flex Nav Menu Responsive Brand Logo Image

Author : Bryan Willis
Developed : Html, CSS

Bootstrap vertical navbar

Author : casper392945
Developed : Html, CSS, Js

Bootstrap sticky navbar, affixing navbar after scroll

Author : Ondrej
Developed : Html, CSS, Js
Spread the love

Leave a Comment