1

I am using http://bootswatch.com/united/ theme and I need a large search box center aligned with my logo above it same as Google.com on my index page.

The only search code which I could get is this:

<form class="navbar-form navbar-left">
  <input type="text" class="form-control col-lg-8" placeholder="Search">
</form>

But there is no search button attached which could be attached using this large button.

<button type="button" class="btn btn-primary btn-lg">Large button</button>

How do I align it properly?

2
  • Check out Bootstrap docs, input groups, scroll to Button addons.
    – tobiv
    May 22, 2014 at 13:13
  • In components I could not find anything related to large search box. There is only nav bar search box which is aligned to the left. May 22, 2014 at 15:09

1 Answer 1

2

First you need to put the button inside the form and after input type=text (don´t leave gaps between them).

<form class="navbar-form navbar-left">
      <input type="text" class="form-control col-lg-8" placeholder="Search"><button type="button" class="btn btn-primary btn-lg">Large button</button>
    </form>

Then you can play with the css, usually the elements get display: inline-block; and center the form with margin: 0 auto;

3
  • I am new to bootstrap. Can you share some websites or resources. I could not align it to the middle. May 22, 2014 at 15:09
  • OK. I did managed to get it aligned and everything but now the problem is that the size of search input box is not increasing. Can you help me with it. here is the code I am using: <form class="form-search"> <div class="input-append"> <input type="text" class="search-query btn-large" placeholder="Type here..." style="padding: 11px 19px;font-size: 17.5px;"> <button type="submit" class="btn btn-large"> <i class="icon-search"></i> Search </button> </div> </form> May 22, 2014 at 17:14
  • What you mean not increasing? Put a example on the jsfiddle with all markups and css May 22, 2014 at 17:33

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.