Bootstrap Navbar

Abhay Trivedi
Last Updated: May 13, 2022

Source: Bootstrap 5

Introduction

A Navigation bar comes under Graphical User Interface that helps in accessing information. It is the top section on a webpage that includes links for the other areas of the website. It performs an essential role in the website as it allows visitors to visit any section quickly & easily.
A navigation bar is on the top of the page in a horizontal list of links. You can place it below the logo or header but always put it before the body of the webpage.
Bootstrap Navbar makes adding a navigation bar to a webpage super easy such that the developers can focus on other prominent things and make their website look professional hassle-free!

  How it works

Bootstrap provides you with its classes along with its navbar template so that you can copy the code and call it a day.

You should include the following link in the <head> element to use bootstrap.

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

 

Along with this, to add functionality to your website, you should have to include the following script tags before the </body> tag as well.

<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.10.2/dist/umd/popper.min.js" integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>

   

   Here are some of the most used classes required for your Bootstrap Navbar:-

  • Bootstrap Navbar require a “navbar” class inside <nav> element with “navbar-expand{-sm, -md, -lg, -xl, or -xxl}” for responsive collapsing.


Note - we use <nav> element instead of <div> since it is more specific.

  • Use the “navbar-brand” class for your brand name.
  • Use “navbar-{primarysecondarysuccesswarningdangerdarklightinfo}” for changing the text color of the navbar.
  • Use “bg-{primarysecondarysuccesswarningdangerdarklightinfo}” for changing the background color of the navbar.

Working Example

<nav class="navbar navbar-expand-lg bg-light navbar-light">
  <div class="container-fluid">
    <!-- brand name -->
    <a class="navbar-brand" href="#">Coding Ninjas</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <!-- Use collapse to make navbar collapse in small screens -->
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <ul class="navbar-nav me-auto mb-2 mb-lg-0">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">Main</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Other</a>
        </li>
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">Menu</a>
          <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
            <li><a class="dropdown-item" href="#">First Item</a></li>
            <li><a class="dropdown-item" href="#">Second Item</a></li>
            <li><hr class="dropdown-divider"></li>
            <li><a class="dropdown-item" href="#">Last Item</a></li>
          </ul>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled">Disabled Link</a>
        </li>
      </ul>
      <!-- search bar -->
      <form class="d-flex">
        <input class="form-control me-2" type="search" placeholder="Search">
        <button class="btn btn-success" type="submit">Search</button>
      </form>
    </div>
  </div>
</nav>

 

Output:-


In collapsed view:-


List of used classes

Here’s a list of the classes we have used in the above code example.

  • .navbar-brand - Use it for the top brand element in the navbar. It works best with an anchor tag.
  • .navbar-nav - Use for full height & lightweight navigation.
  • .nav-item - Use it to list an item.
  • .nav-link - Use for enclosing an anchor tag.
  • .navbar-toggler - Use with collapse plugin and other toggling behaviors.
  • .navbar-text - Use it to add vertically centered strings of text.
  • .active - Makes a link look vivid.
  • .disabled - Makes a link diabled.
  • .collapse & .navbar-collapse - Use for grouping and hiding navbar contents.
  • .me-auto - Stands for “Margin End”. Assigns margin automatically.
  • .dropdown - Use it for dropdown elements.
  • .dropdown-toggle - Use it to open or close dropdown menu.
  • .dropdown-menu - Use as a container for dropdown items.
  • .dropdown-item - Use it to list an item in the section.
  • .dropdown-divider - Sets a divider in the dropdown menu.

Alternate Approach

Many developers find it cumbersome to use a list in the navbar code. Luckily you can avoid using a list-based approach entirely if you like.

Here is the above code implemented without using a list.

<nav class="navbar navbar-expand-lg bg-light navbar-light">
    <div class="container-fluid">
      <!-- brand name -->
      <a class="navbar-brand" href="#">Coding Ninjas</a>
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <!-- Use collapse to make navbar collapse in small screens -->
      <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <div class="navbar-nav me-auto mb-2 mb-lg-0">
          <a class="nav-link active" aria-current="page" href="#">Main</a>
          <a class="nav-link" href="#">Other</a>
          <div class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">Menu</a>
            <div class="dropdown-menu" aria-labelledby="navbarDropdown">
              <a class="dropdown-item" href="#">First Item</a>
              <a class="dropdown-item" href="#">Second Item</a>
              <hr class="dropdown-divider">
              <a class="dropdown-item" href="#">Last Item</a>
            </div>
          </div>
          <a class="nav-link disabled">Disabled Link</a>
        </div>
        <!-- search bar -->
        <form class="d-flex">
          <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
          <button class="btn btn-success" type="submit">Search</button>
        </form>
      </div>
    </div>
  </nav>


Note: Output of this code will be the same as the above code.

Fixed Navigation Bar

Like the code below, we can make the Bootstrap Navbar fixed to the top or bottom such that it is visible at all times on the webpage.

<nav class="navbar navbar-expand-lg navbar-inverse bg-danger navbar-dark fixed-top">
    <div class="container-fluid">
      <a class="navbar-brand" href="#">Coding Ninjas</a>
      <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <ul class="navbar-nav me-auto mb-2 mb-lg-0">
          <li><a class="nav-link active" aria-current="page" href="#">Home</a></li>
          <li><a class="nav-link" href="#">1</a></li>
          <li><a class="nav-link" href="#">2</a></li>
          <li><a class="nav-link" href="#">3</a></li>
        </ul>
      </div>
    </div>
  </nav>

 

Output:-

Frequently Asked Questions

Q.1 What is Bootstrap?

Bootstrap is a free & open-source CSS framework that aims to be a mobile-first front-end web development framework. It contains CSS & JavaScript based interface components design templates like forms, buttons, navbar, and many more.

Q.2 What is a navigation bar?

A Navigation bar comes under Graphical User Interface that helps in accessing information. It is the top section on a webpage that includes links for the other areas of the website.

Q.3 Why should we use Bootstrap Navbar?

Bootstrap Navbar is free & open-source, and it saves the time & effort of a developer as they are using a ready-made template and could focus on the logic instead of worrying about the styling.

Key Takeaways

In this article, we learn how to use Bootstrap Navbar in our projects and make websites faster by the magic of templating and open source.

Also, check out our web development course and CSS course.


If you are preparing for your DSA interviews then, Codestudio is a one-stop destination. This platform will help you acquire effective coding techniques and overview student interview experience in various product-based companies.

Was this article helpful ?
1 upvote

Comments

No comments yet

Be the first to share what you think