How to Align Navbar Items to Center using Bootstrap 4 ? - GeeksforGeeks

20 Mar, 2020
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="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"           integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"          crossorigin="anonymous" />      <link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />    <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>
<!DOCTYPE html><html>  <head>    <title>Align nav bar item into center</title>    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"           integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"          crossorigin="anonymous" />      <link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />    <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="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"           integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"          crossorigin="anonymous" />      <link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />  </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>
<!DOCTYPE html><html>  <head>    <title>Align nav bar item into center</title>    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"           integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"          crossorigin="anonymous" />      <link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />  </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:
Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.
Bootstrap-4
Bootstrap-Misc
CSS-Misc
HTML-Misc
Bootstrap
CSS
HTML
Web Technologies
Web technologies Questions
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
How to Show Images on Click using HTML ?
How to set Bootstrap Timepicker using datetimepicker library ?
How to Use Bootstrap with React?
How to keep gap between columns using Bootstrap?
Tailwind CSS vs Bootstrap
How to insert spaces/tabs in text using HTML/CSS?
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to create footer to stay at the bottom of a Web page?
How to update Node.js and NPM to next version ?
CSS to put icon inside an input element in a form