Search code examples
twitter-bootstrapsearch-box

A search box in Twitter Bootstrap


I have this search box :

enter image description here

And the code of the search box is :

<form method = "post" action="search.php" class = "pull-down  navbar-search">
    <div class="input-append">
        <input class="search-query input-medium"  name="search_query" type="text" placeholder="Arama Yap" >
        <button type = "submit "class="btn btn-large" type="button"><i class="icon-search"></i></button>
    </div>
</form>

I want the search box to have no space between the box and the button. How can I accomplish it? Thanks.


Solution

  • Scroll down on this link to the bit that says "Search Form";

    http://twitter.github.io/bootstrap/base-css.html#forms

    Here's a fiddle showing it working: http://jsfiddle.net/3PgU2/

    <form class="form-search">
        <div class="input-append">
            <input type="text" class="span2 search-query">
            <button type="submit" class="btn">Search</button>
        </div>
        <div class="input-prepend">
            <button type="submit" class="btn">Search</button>
            <input type="text" class="span2 search-query">
        </div>
    </form>