How to center position navbar content in Bootstrap

Question

I am learning bootstrap 4 navbar but i was not able to understand clearly how to position objects in navbar i want a search box to be placed at the center of navbar and a button on right but i was only able to do it navbar is not getting aligned at center.

        <div class="collapse navbar-collapse text-xs-center" id="mynavbar">

        <div class="col-lg-4 form-inline navbar-form">
            <div class="input-group">
                <form class="form-inline my-lg-0">
                    <input class="form-control " type="text" placeholder="Search">
                    <button class="btn btn-outline-default my-2 my-sm-0" type="submit">Search</button>
                </form>

            </div>
        </div>

        <ul class="navbar-nav w-100 justify-content-end">

            <li class="nav-item" style="margin-right: 15px;">
                <div class="btn-group">
                    <a class="btn nav-link dropdown-toggle" data-toggle="dropdown"
                        href="#" role="button" aria-haspopup="true" aria-expanded="false">
                        <i class="fa fa-plus" aria-hidden="true"></i>
                    </a>
                    <div class="dropdown-menu dropdown-menu-right">
                        <a class="dropdown-item" href="#">Action</a> <a
                            class="dropdown-item" href="#">Another action</a> <a
                            class="dropdown-item" href="#">Something else here</a>
                    </div>
                </div>
            </li>
          </ul>
         </div>

Carol Skelly · Accepted Answer · 2022-04-12T12:51:20.337

There are different methods for Navbar alignment in Bootstrap 4. One way is to use mx-auto on the content to center (the form)...

<nav class="navbar navbar-expand navbar-light bg-faded">
    <div class="navbar-collapse collapse" id="mynavbar">
        <form class="form-inline mx-auto">
            <div class="input-group my-lg-0">
                <input class="form-control " type="text" placeholder="Search">
                <span class="input-group-btn">
                <button class="btn" type="submit">Search</button>
                </span>
            </div>
        </form>
        <ul class="navbar-nav">
            <li class="nav-item">
                 <div class="btn-group">
                    <a class="btn nav-link dropdown-toggle" data-toggle="dropdown"
                        href="#" role="button" aria-haspopup="true" aria-expanded="false">
                        <i class="fa fa-plus" aria-hidden="true"></i>
                    </a>
                    <div class="dropdown-menu dropdown-menu-right">
                        <a class="dropdown-item" href="#">Action</a> <a
                            class="dropdown-item" href="#">Another action</a> <a
                            class="dropdown-item" href="#">Something else here</a>
                    </div>
                </div>
            </li>
        </ul>
    </div>
</nav>

But the search form will not be perfectly centered because there is no content in the left, and the form will be pushed slight left by the button on the right.

So in this case, I'd recommend using the flexbox utility classes..

<nav class="navbar navbar-expand navbar-light bg-faded">
    <div class="navbar-collapse collapse" id="mynavbar">
        <span class="navbar-text w-100"> </span>
        <form class="form-inline w-100 justify-content-center">
            <div class="input-group my-lg-0">
                <input class="form-control " type="text" placeholder="Search">
                <span class="input-group-btn">
                <button class="btn" type="submit">Search</button>
                </span>
            </div>
        </form>
        <ul class="navbar-nav w-100 justify-content-end">
            <li class="nav-item">
                 <div class="btn-group">
                    <a class="btn nav-link dropdown-toggle" data-toggle="dropdown"
                        href="#" role="button" aria-haspopup="true" aria-expanded="false">
                        <i class="fa fa-plus" aria-hidden="true"></i>
                    </a>
                    <div class="dropdown-menu dropdown-menu-right">
                        <a class="dropdown-item" href="#">Action</a> <a
                            class="dropdown-item" href="#">Another action</a> <a
                            class="dropdown-item" href="#">Something else here</a>
                    </div>
                </div>
            </li>
        </ul>
    </div>
</nav>

Demo of both centering methods

How to center position navbar content in Bootstrap

1 Answers1

Linked