How to align two navbars in bootstrap ?

Last Updated : 13 Jun, 2022

Navbar is a section of a web application that allows users to navigate to different sections of the website. As the name suggests, a 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 requirements. 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=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
        integrity=
"sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
        crossorigin="anonymous">
 
    <!--import jquery cdn-->
    <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/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js"
        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=
"https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css"
        integrity=
"sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2"
        crossorigin="anonymous">
 
    <style type="text/css">
        .topnav {
            margin-top: 10px;
            margin-right: 10px;
            margin-left: 10px;
            background-color: #DCEEFF;
            overflow: hidden;
            height: 40px;
            padding: 8px;
        }
 
        .bottomnav {
            margin-right: 10px;
            margin-left: 10px;
            background-color: #E5E5E5;
            overflow: hidden;
            height: 40px;
            padding: 5px;
        }
 
        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-danger btn-sm
            float-right mx-2 mb-3">Logout</a>
        <a class="btn btn-success btn-sm
            float-right">Register</a>
    </div>
</body>
 
</html>

Output:

Supported Browser:

Google Chrome
Internet Explorer
Firefox
Opera
Safari

HTML is the foundation of web pages and is used for webpage development by structuring websites and web apps. You can learn HTML from the ground up by following this HTML Tutorial and HTML Examples.

CSS is the foundation of web pages and is used for webpage development by styling websites and web apps. You can learn CSS from the ground up by following this CSS Tutorial and CSS Examples.

Suggest improvement

CSS Flexbox and Its Properties

How to include a font .ttf using CSS ?

Share your thoughts in the comments

How to align two navbars in bootstrap ?

HTML

HTML

Please Login to comment...

Similar Reads

What kind of Experience do you want to share?