google search bar twitter-bootstrap

Question

I'm looking to create a plain index page with a Google-style centred search bar, however I'm struggling to get things looking good with Twitter Bootstrap.

The search bar must have a search icon button appended at the end (right side) of the search field. I have used typeahead as I am planning to code a dropdown search-suggestion system.

<div class="hero-unit">
<div class="input-append">
  <input type="text" data-provider="typeahead" class="input-large"
  placeholder="What do you want to know?" autocomplete="off">
  <button type="submit" class="btn-large btn-success">
    <i class="icon-search"></i> 
  </button>
</div>

It must also be larger (taller) than the standard textbox, a feature not yet available in the stable release of Twitter Bootstrap, hence the CSS I have had to put at the top of the page.

<style>
 input[class=input-large] {
    width: 540px;
    height: 24px;
    margin-bottom: 10px;
    margin-right: -7px;
    line-height: 30px;
    padding: 11px 19px;
    font-size: 17.5px;
    -webkit-border-radius: 6px;
       -moz-border-radius: 6px;
            border-radius: 6px;
  }

The only way I could see of getting the search button closer to the searchbar (a gap appears when you use btn-large) was to use a negative margin. Not something I am proud of, it looks very messy.

I'd appreciate some guidance on this. Thanks in advance.

Answer 1

<div class='container'>
    <div class='row'>
        <form>
        <div class='span3 input-append' style="margin-top:30%; margin-left:30%">
            <input class="span2" style="height:26px;width:400px;" id="main_search" type="text" >
            <input class="btn btn-large btn-primary"  type="button" value="search">
        </div>

        </form>
    </div>
</div>

Fiddle-

Updated fiddle

Answer 2

You can try extended form controls

<div class="input-append">
    <span class="add-on"><input id="search-button" value="Search"></span>
    <!-- stick a search icon in there instead -->
    <input class="span2" id="search">
</div>

You will have to adjust the CSS of the button if you do this (padding, outlines), though, but they will stay as one unit in a mobile view. If you really wanted a custom view, you'd have lowered the margins anyway.