Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

How does navbar work in Bootstrap ?

  • Difficulty Level : Medium
  • 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=
        integrity=
"sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z"
        crossorigin="anonymous" />
        integrity=
"sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
        crossorigin="anonymous">
    </script>
      
    <script src=
        integrity=
"sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN"
        crossorigin="anonymous">
    </script>
      
    <script src=
        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=
                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>


Output:




My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!