How do I center a form in a navbar?

Question

I have this Bootstrap4 Navigation bar. There is a brand and a couple links (nav-item). Below I have a search form that appears on the right. How would I center it inside the nav. It shouldn't be centered to take up the remaining space, rather be centered completely inside the entire navbar. Any classes or styles I should add to make this work? Also, I would like to add links on the right side, where the form is currently standing.

I've tried messing around with the margin classes, adding "mx-auto" to the form, placing the form inside the ul list and using "display: inline-block"

<nav class="navbar navbar-expand-lg navbar-light bg-light">
    <a class="navbar-brand" href="#">Brand</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 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>
        <form class="form-inline my-2 my-lg-0">
            <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
            <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
        </form>
    </div>
</nav>

As stated earlier, the inline form is centered on the right side, but it should be fully centered, in the middle. Here are some photos for context. (also, I am using Bootstrap Material Design, that's why it looks a bit different)

Current: Current result What I want: What I want/Expected

Djenci Duquene · Accepted Answer · 2019-01-01T13:35:01.370

     <form class="form-inline my-2 my-lg-0" style="margin: 0 auto;">
        <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
        <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
    </form>

If that doesn't work you create a new class and paste it next to the classes form-inline my-2 my-lg-0 mycenterformclass

Edit =>

  <div style="margin: 0 auto;">  <form class="form-inline my-2 my-lg-0">
        <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
        <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
    </form></div>
</div>

You can also do

  <nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Brand</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" style="float:left;">
    <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 style="float:right; width:50%">  <form class="form-inline my-2 my-lg-0">
        <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
        <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
    </form></div>
</div>

The problem is after trying that code, the form is centered inside the inline-form class. It's centered in the wrong way. [Screenshot](https://ibb.co/Sr8TDpw) Also, what should the "mycenterformclass" contain? — tujemacic, Jan 01 '19 at 13:06
Then create a div around the form and give that div the style margin: 0 auto — Djenci Duquene, Jan 01 '19 at 13:22

score 0 · Answer 2 · edited Sep 23 '20 at 07:55

Create a parent <div> block and add width and margin to it:

.alignCenter{
   margin:0 auto;
   width:100%; // Not needed if you've used bootstrap in correct containers
}

<div class="alignCenter">
<form class="form-inline my-2 my-lg-0">
            <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
            <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
        </form>
        </div>

How do I center a form in a navbar?

2 Answers2