How does navbar work in Bootstrap ?

Last Updated : 25 Jul, 2024

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.

HTML

<!DOCTYPE html>
<html>
    <head>
        <link crossorigin="anonymous" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" rel="stylesheet"/>
        <script crossorigin="anonymous" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" src="https://code.jquery.com/jquery-3.5.1.slim.min.js">
        </script>
        <script crossorigin="anonymous" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js">
        </script>
        <script crossorigin="anonymous" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js">
        </script>
    </head>
    <body>
        <!-- Nav Bar -->
    </body>
</html>

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 crossorigin="anonymous" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" rel="stylesheet"/>
        <script crossorigin="anonymous" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" src="https://code.jquery.com/jquery-3.5.1.slim.min.js">
        </script>
        <script crossorigin="anonymous" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js">
        </script>
        <script crossorigin="anonymous" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js">
        </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 alt="GFG logo" class="navbar-image" src="https://media.geeksforgeeks.org/wp-content/uploads/20210101144014/gfglogo.png"/>
            </a>
            <button aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation" class="navbar-toggler" data-target="#navbarNavAltMarkup" data-toggle="collapse" type="button">
                <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:

How to align two navbars in bootstrap?

gangwarjacob

Improve

Article Tags :

How does navbar work in Bootstrap ?

Similar Reads

Thank You!

What kind of Experience do you want to share?