Skip to content
Related Articles

Related Articles

Improve Article

How to align two navbars in bootstrap ?

  • Last Updated : 20 Nov, 2020
Geek Week

Navbar is a section of web application that allows users to navigate to different sections of the website. As the name suggests, navbar is basically a navigation bar. Bootstrap 4 comes up with an inbuilt navbar class that allows us to create navbars. Also, we can create custom navbars by defining the various CSS styles as per our requirement. In this article, we will demonstrate both the methods of aligning two navbars using CSS inbuilt classes as well as custom CSS styles.

Example 1: In the first approach, we have made use of the inbuilt navbar class of Bootstrap 4. Two navbars are placed one after the other. The first navbar has a dark background and the navigation links are left-aligned whereas the “Register” and “Logout” buttons are right-aligned. The first navbar also consists of a dropdown menu that has links to several sections of the website. The second navbar has the navigation links aligned to the right and plaintext with a hyperlink aligned to the left. Both the navbars are responsive to the screen size. The navbar toggle button appears when the screen size reduces and disappears when the screen size increases. The toggle button when clicked displays the navbar.

Code implementation:

HTML




<!DOCTYPE html>
<html>
  
<head>
  
    <!--import bootstrap cdn-->
    <link rel="stylesheet" href=
        integrity=
"sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
        crossorigin="anonymous">
  
    <!--import jquery cdn-->
        integrity=
"sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
        crossorigin="anonymous">
    </script>
      
    <script src=
        integrity=
"sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx"
        crossorigin="anonymous">
    </script>
</head>
  
<body>
  
    <!--First navbar-->
    <nav class="navbar navbar-expand-lg 
                navbar-dark bg-dark">
  
        <a class="navbar-brand" href="#">Navbar</a>
  
        <button class="navbar-toggler" type="button"
            data-toggle="collapse" 
            data-target="#navbarSupportedContent"
            aria-controls="navbarSupportedContent" 
            aria-expanded="false" 
            aria-label="Toggle navigation">
              
            <span class="navbar-toggler-icon"></span>
        </button>
  
        <div class="collapse navbar-collapse" 
                id="navbarSupportedContent">
            <ul class="navbar-nav mr-auto">
                <li class="nav-item active">
                    <a class="nav-link" href="#">Home</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Link</a>
                </li>
                <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle" 
                        href="#" id="navbarDropdown"
                        role="button"
                        data-toggle="dropdown" 
                        aria-haspopup="true" 
                        aria-expanded="false">
                        Dropdown
                    </a>
  
                    <div class="dropdown-menu" 
                        aria-labelledby="navbarDropdown">
                        <a class="dropdown-item" href="#">
                            Action
                        </a>
                          
                        <a class="dropdown-item" href="#">
                            Another action
                        </a>
                          
                        <div class="dropdown-divider"></div>
                        <a class="dropdown-item" href="#">
                            Something else here
                        </a>
                    </div>
                </li>
            </ul>
  
            <button class="btn btn-success my-2 
                my-sm-0 mx-2" type="submit">
                Register
            </button>
              
            <button class="btn btn-danger my-2 
                my-sm-0" type="submit">
                Logout
            </button>
        </div>
    </nav>
  
    <!--Second navbar-->
    <nav class="navbar navbar-expand-lg 
        navbar-light bg-light">
          
        <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">
            We have changed our Privacy 
            Policy. To know more
            <a href="#" class="mx-1">click here</a>.
              
            <ul class="navbar-nav ml-auto">
                <li class="nav-item nav-link" 
                    href="#">About Us
                </li>
                  
                <li class="nav-item nav-link" 
                    href="#">Contact Us
                </li>
                  
                <li class="nav-item nav-link" 
                    href="#">Explore
                </li>
            </ul>
        </div>
    </nav>
</body>
  
</html>

Output:



Example 2: In this approach, navbars are created using custom CSS styles. The topnav class division represents the first navbar and the bottomnav class division represents the second navbar. The first navbar has the navigation links aligned to the left and the login link to the right. The second navbar has the navigation links to the left and the “register” and “logout” buttons to the right. Unlike the previous example, the navbars in this example are not responsive. The navbars do not adapt to the screen size.

Code Implementation:

HTML




<!DOCTYPE html>
<html>
  
<head>
  
    <!--import bootstrap cdn-->
    <link rel="stylesheet" href=
        integrity=
"sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2"
        crossorigin="anonymous">
  
    <!--import jquery cdn-->
        integrity=
"sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
        crossorigin="anonymous">
    </script>
      
    <script src=
        integrity=
"sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx"
        crossorigin="anonymous">
    </script>
  
    <style type="text/css">
        .topnav {
            background-color: #DCEEFF;
            overflow: hidden;
            height: 40px;
            padding: 8px;
        }
  
        .bottomnav {
            background-color: #E5E5E5;
            overflow: hidden;
            height: 40px;
            padding: 8px;
        }
  
        a {
            color: black;
            padding-right: 20px;
            font-weight: bold;
        }
    </style>
</head>
  
<body>
    <div class="topnav">
        <a class="active" href="#">Home</a>
        <a href="#">Feature</a>
        <a href="#">Deals</a>
        <a href="#">Blog</a>
        <a href="#" class="float-right">Login</a>
    </div>
    <div class="bottomnav">
        <a class="active" href="#">More</a>
        <a href="#">Contact</a>
        <a href="#">About Us</a>
        <a href="#">Link</a>
        <a class="btn btn-info btn-sm 
            float-right mx-2">Logout</a>
        <a class="btn btn-success btn-sm 
            float-right">Register</a>
    </div>
</body>
  
</html>

Output:

Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.




My Personal Notes arrow_drop_up
Recommended Articles
Page :