How to align two navbars in bootstrap?

Last Updated : 23 Jul, 2025

Aligning two navbars in Bootstrap involves utilizing its built-in navbar classes and custom CSS styles to create and position navigation bars on a web page. Bootstrap provides predefined classes for navbars that facilitate easy creation and customization.

Approach

  • The HTML document imports Bootstrap and jQuery libraries for styling and functionality.
  • Two separate <nav> elements are defined for each navbar, differentiated by their Bootstrap classes (navbar-dark and navbar-light).
  • Each navbar includes a collapsible button (navbar-toggler) for responsive display on smaller screens.
  • Navbar content such as brand logos, navigation links, dropdown menus, and additional buttons are structured within respective <div> containers (collapse navbar-collapse).
  • The second navbar demonstrates custom content integration with inline text and navigation links aligned to the right using Bootstrap's ml-auto class.

Example: The example below shows the above-explained approach.

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:

Output
Comment

Explore