Bootstrap form inline not working

css, twitter-bootstrap

Solution

From Bootstrap reference, for inline forms :

This only applies to forms within viewports that are at least 768px wide.

and as far as your layout is concerned,

<div class="container">
    <div class="row">
          <div class="col-md-8">
                <form class="form-inline" action="#" method="post">
                    Search<input type="text" id="search" name="search" class="input-small" placeholder="Search...">
                    <select id="searchon" name="searchon">
                        <option value="0">First Name</option>
                        <option value="1">Last Name</option>
                    </select>
                    <button type="submit" class="btn">Search</button>
                </form>       
          </div>      
    </div>
</div>

its perfectly fine..inline :

working demo

Problem

I am trying to add this simple search form while applying form inline class so that controls appear next to each other, but I get the controls displayed above each other and the search bottom in white and looking strange, so can someone please tell me what I am missing here? ``` <div class="container"> <div class="row"> <div class="col-md-8"> <form class="form-inline" action="#" method="post"> Search<input type="text" id="search" name="search" class="input-small" placeholder="Search..."> <select id="searchon" name="searchon"> <option value="0">First Name</option> <option value="1">Last Name</option> </select> <button type="submit" class="btn">Search</button> </form> </div> </div> </div> ```

Original source