How to Align Navbar Items to Center using Bootstrap 4 ?

Last Updated : 4 Oct, 2024

Aligning navbar items to the center using Bootstrap refers to the practice of positioning navigation links in the middle of the navigation bar for a balanced and aesthetic design. Bootstrap's utility classes make it easy to implement this alignment responsively and efficiently.

There are some common approaches to aligning items to the center which are as follows:

Table of Content

Approach 1: Using mx-auto Utility Class

The mx-auto utility class in Bootstrap automatically applies equal margins on the left and right of the selected element. By placing mx-auto on a container wrapping the navbar items, it centers them horizontally within the navbar, ensuring balanced alignment.

Example: In this example, we create a responsive navigation bar using Bootstrap. It centers navigation items like "Home," "About," and "Services," with the brand name "Geeksforgeeks" displayed prominently.

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>
    <!--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="navbar-nav mx-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="#">Services</a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>
</body>

</html>

Output:

nav
Using mx-auto Utility Class Example output

Approach 2: Using justify-content-center Class

The justify-content-center class in Bootstrap is a flexbox utility that centers flex items horizontally. Applying this class to the container holding the navbar items ensures that they are centered within the navbar, making the approach simple and effective.

Example: In this example we sets up a Bootstrap navigation bar titled "Geeksforgeeks," featuring centered links for "Home," "About," and "Contact." It ensures responsiveness with a toggler for smaller screens.

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 justify-content-center" 
                 id="navbarSupportedContent">
                <ul class="navbar-nav">
                    <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:

Comment

Explore