How does navbar work in Bootstrap ?

Last Updated : 19 Oct, 2021

A Navbar is a navigation header that is placed at the top of the page which helps to make it more user-friendly so that the navigation through the website becomes easy and the user can directly search for the topic of their interest. The .navbar class is used to create a navigation bar. The navbar can extend or collapse, depending on the device size ie, the navbar is used to create the responsive design by using .navbar-expand-xl|lg|md|sm class. So, It provides flexibility to the web page.

Prerequisites: For understanding the navbar concept, the basics knowledge of HTML, CSS, and Bootstrap is required.

Step by Step Guide to implement Navbar in Bootstrap:

Bootstrap CDN: To use the code snippets provided by Bootstrap, we need to add the following CDN files within the HTML head element.

<link rel=”stylesheet” href=”https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css” integrity=”sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z” crossorigin=”anonymous”/>
<script src=”https://code.jquery.com/jquery-3.5.1.slim.min.js” integrity=”sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj” crossorigin=”anonymous”></script>
<script src=”https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js” integrity=”sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN” crossorigin=”anonymous”></script>
<script src=”https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js” integrity=”sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV” crossorigin=”anonymous”></script>

Add <nav> tag with .navbar and .navbar-expand-lg navbar-dark bg-dark class in <body> tag.

<nav class="navbar navbar-expand-lg navbar-dark bg-dark"></nav>

For adding the brand logo, we need a .navbar-brand class that will contain the image along with the alt attribute, if the image is not loaded properly then the text will be displayed.

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

We need a toggle button by adding the .navbar-toggler & .collapse navbar-collapse classes that will display or hide the menu item while clicking the button.
Now, add the nav items inside the Navbar.

Implementation: We need the following syntax to understand the working of Navbar:

HTML nav element: The HTML nav element is a container element similar to the HTML div element. We use the HTML nav element to add a Navbar to our website.

<nav class="navbar navbar-expand-lg navbar-dark bg-dark"></nav>

Nav Items inside Navbar: To add the nav items inside the Navbar by using the following syntax:-

<a class="nav-link active" href="#">
    Home
    <span class="sr-only">(current)</span>
</a>
<a class="nav-link" href="#">About Us</a>
<a class="nav-link" href="#">Tutorials</a>
<a class="nav-link disabled" href="#" 
    tabindex="-1" aria-disabled="true">
    Disabled
</a>

Nav link: To add the link in the web page by using the following syntax:-

<a class="nav-link" href="#">About Us</a>

Example: This example illustrates the Bootstrap Navigation bar. We have added a logo and some information for the web page. If you click on the Navbar icon, then it’s shows all the information related to the web page in list-form.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
  
    <!-- Bootstrap CDN-->
    <link rel="stylesheet" href= 
"https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
        integrity= 
"sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z"
        crossorigin="anonymous" /> 
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
        integrity= 
"sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
        crossorigin="anonymous"> 
    </script> 
      
    <script src= 
"https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"
        integrity= 
"sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN"
        crossorigin="anonymous"> 
    </script> 
      
    <script src= 
"https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"
        integrity= 
"sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV"
        crossorigin="anonymous"> 
    </script> 
  
    <!--CSS-->
    <style> 
        .navbar-image { 
            width: 80px; 
            height: 80px; 
            padding: 10px; 
        } 
    </style> 
</head> 
  
<body> 
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark"> 
        <a class="navbar-brand" href="#"> 
            <img src= 
"https://media.geeksforgeeks.org/wp-content/uploads/20210101144014/gfglogo.png"
                class="navbar-image" 
                alt="GFG logo" /> 
        </a> 
        <button class="navbar-toggler" type="button" 
            data-toggle="collapse" 
            data-target="#navbarNavAltMarkup"
            aria-controls="navbarNavAltMarkup" 
            aria-expanded="false" 
            aria-label="Toggle navigation"> 
              
            <span class="navbar-toggler-icon"></span> 
        </button> 
  
        <div class="collapse navbar-collapse" 
            id="navbarNavAltMarkup"> 
            <div class="navbar-nav ml-auto"> 
                <a class="nav-link active" href="#"> 
                    Home <span class="sr-only">(current)</span> 
                </a> 
                <a class="nav-link" href="#">About Us</a> 
                <a class="nav-link" href="#">Tutorials</a> 
                <a class="nav-link" href="#">Student</a> 
                <a class="nav-link" href="#">Courses</a> 
                <a class="nav-link" href="#">Help</a> 
            </div> 
        </div> 
    </nav> 
  
    <div class="jumbotron"> 
        <div class="container"> 
            <h1 class="display-3 text-success">GeeksforGeeks</h1> 
            <h1 class="display-5">DSA Course</h1> 
            <hr class="my-2" /> 
            <p class="main text-justify"> 
                The one-stop solution is GeeksforGeeks  
                DSA Self-Paced Course with Lifetime  
                Access is a complete package for you  
                to learn and master all the Data  
                Structure Concepts. 
            </p> 
  
  
            <a class="btn btn-primary btn-md" 
                href="#" role="button">Know more</a> 
        </div> 
    </div> 
</body> 
  
</html>