How to Align Navbar Items to Center using Bootstrap 4 ?

In Bootstrap the items can be easily assigned to the left and right as it provides classes for the right and left. By default, left was set, but when it comes to aligning items to the center you have to align it by yourself as there are no in-built classes for doing this.

There are basically two ways by which you can align items to the center which are as follows:

  • Using CSS
  • Using Bootstrap

Using CSS: In this method, we will use a user-defined class to align items to the center. Then, we will use CSS to align items to the center. We have defined the class navbar-centre.



  • Example:
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!DOCTYPE html>
    <html>
      
    <head>
        <title>Align nav bar item into center</title>
        <link rel="stylesheet" href=
              integrity=
    "sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
              crossorigin="anonymous" />
      
        <link rel="stylesheet" type="text/css" href=
        <link rel="stylesheet" href=
        <style>
            .navbar-nav.navbar-center {
                position: absolute;
                left: 50%;
                transform: translatex(-50%);
            }
        </style>
    </head>
      
    <body>
        <!--NAVBAR STARTING-->
        <nav class="navbar navbar-expand-sm navbar-light bg-light">
            <div class="container">
                <a class="navbar-brand text-success" href="#">
                  Geeksforgeeks
                </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=" nav navbar-nav navbar-center">
                        <li class="nav-item active">
                            <a class="nav-link" 
                               href="#">
                              Home 
                              <span class="sr-only">
                                (current)
                              </span>
                          </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" 
                               href="#">
                              About
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" 
                               href="#">
                              About
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
        </nav>
    </body>
      
    </html>

    chevron_right

    
    

  • Output:

By using Bootstrap: This method is a quick tricky that can save you from writing extra CSS. In this, we simply add another div tag above the div tag having class collapse navbar-collapse. This new div tag will also have the same collapse navbar-collapse class.

  • Example:
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!DOCTYPE html>
    <html>
      
    <head>
        <title>Align nav bar item into center</title>
        <link rel="stylesheet" href=
              integrity=
    "sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
              crossorigin="anonymous" />
      
        <link rel="stylesheet" type="text/css" href=
        <link rel="stylesheet" href=
      
    </head>
      
    <body>
        
        <nav class="navbar navbar-expand-sm navbar-light bg-light">
            <div class="container">
                <a class="navbar-brand text-success" href="#">
                  Geeksforgeeks
                </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"></div>
      
                <div class="collapse navbar-collapse" 
                     id="navbarSupportedContent">
                    <ul class="navbar-nav mr-auto">
                        <li class="nav-item active">
                            <a class="nav-link" 
                               href="#">
                              Home 
                              <span class="sr-only">
                                (current)
                              </span>
                          </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" 
                               href="#">
                              About
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link"
                               href="#">
                              Contact
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
        </nav>
    </body>
      
    </html>

    chevron_right

    
    

  • Output:

full-stack-img




My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.