Open In App

How to Align Navbar Items to Center using Bootstrap 4 ?

Improve
Improve
Like Article
Like
Save
Share
Report

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:




    <!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>

    
    

  • 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:




    <!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>

    
    

  • Output:


Last Updated : 20 Mar, 2020
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads