Center form in navbar

Question

What I'm trying to do is have the search box in the center of the navbar (image here). How would I do that?

HTML:

<div class="navbar navbar-inverse navbar-fixed-top">
  <div class="navbar-inner">
    <div class="container">
      <a class="brand" href="#">logo</a>
      <div class="nav-collapse collapse">
        <form class="navbar-form pull-right">
          <div class="input-append">
            <input class="span4" id="appendedInputButton" type="text" placeholder="Search...">
            <button class="btn" type="button">Search</button>
          </div>
        </form>
      </div><!--/.nav-collapse -->
    </div>
  </div>
</div>

I'm using the default CSS that comes with Bootstrap.

[What have you tried?](http://whathaveyoutried.com/) – Peter L. Feb 08 '13 at 20:37 — Peter L., Feb 08 '13 at 20:37

score 2 · Answer 1 · answered Feb 08 '13 at 20:42

2

wrap the form element within its own div and give it a class or an id, then create a custom line of code to center it, example:

HTML:

<div id="search">
*form code here*
</div>

CSS:

#search { width: 200px; margin: auto; }

answered Feb 08 '13 at 20:42

Andy Holmes

7,817
10
50
83

RandomUs1r · Answer 2 · 2013-02-08T22:32:31.227

1

if you need to override built in CSS in an application, use !important like so:

<div style="margin: 0px auto !important;"></div>

Or, put it in your css class.

edited Feb 08 '13 at 22:32

answered Feb 08 '13 at 20:38

RandomUs1r

4,010
1
24
44

I'm not sure I understand. – Feriscool Feb 08 '13 at 20:40

MG_Bautista · Accepted Answer · 2013-02-08T21:12:03.017

0

See this...

.nav-collapse{
    margin-right: 50%;
}

Example

edited Feb 08 '13 at 21:12

answered Feb 08 '13 at 20:53

MG_Bautista

2,593
2
18
33

I just tried that. It's ALMOST centered. It's a few too many pixels to the right (I'm guessing because of the logo)? [IMAGE HERE](http://i.imgur.com/1dtr3tI.png) – Feriscool Feb 08 '13 at 20:59
It didn't change anything at all this time :/ – Feriscool Feb 08 '13 at 22:06
@Feriscool in the nav see the input and button center, under the space see the scroll... – MG_Bautista Feb 08 '13 at 22:13
Got it to work. For some reason, I had to set it at 0% for margin-right? – Feriscool Feb 08 '13 at 22:14
...I don't think this is scalable without significant hacking. – RandomUs1r Feb 08 '13 at 22:33
The fiddle doesn't include Bootstrap – Carol Skelly Jan 17 '17 at 14:24

score 0 · Answer 4 · edited May 23 '17 at 10:29

Struggled with this for a long time too, for Bootstrap 3. I finally found this solution which worked perfectly for me: Bootstrap NavBar with left, center and right aligned items Just added a class to the inside my navbar around my search box, with the css definition in Skelly's answer.

I did then have to apply text-align:left to some of elements in my form (e.g. typeahead suggestions attached to my search form).

Center form in navbar

4 Answers4