Geek Answers Handbook

Central form in navbar

What I'm trying to do is search box in the center of the navigator ( image here ). How can I do it?

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 use the default CSS that comes with Bootstrap.

+4
source share
4 answers

Watch this ...

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

Example

0
source

wrap the form element in your own div and give it a class or identifier, and then create your own line of code to center it, for example:

HTML:

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

CSS

 #search { width: 200px; margin: auto; }
+2
source

if you need to override inline CSS in your application, use: it is important like this:

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

Or, put it in your css class.

+1
source

I struggled with this for a long time for Bootstrap 3. I finally found this solution that worked fine for me: Bootstrap NavBar with parts aligned to the left, center and right Just added a class to my navigation bar around the search box, with css defined in Skelly.

Then I had to apply text-align: on the left to some elements in my form (for example, sentences like headhead attached to my search form).

0
source

More articles:


All Articles