css - How can I use .input-append with a .form-inline? -

css - How can I use .input-append with a .form-inline? -

i new twitter bootstrap , starting fumble way through use. while aspects of framework starting create sense still struggling form styling. trying setup several different sections of form have elements styled utilizing .form-inline. in 1 such instance attempting utilize .input-append little luck.

class="lang-html prettyprint-override"><div class="row"> <div class="well span12"> <div class="row"> <div class="span12 form-inline input-append"> <label for="assetsearch">asset search</label> <input type="search" id="assetsearch" placeholder=""> <span class="add-on"><i class="icon-search"></i></span> </div> </div> <div class="row"> <div class="span12 form-inline"> <label for="service">service</label> <input type="text" id="service" autocomplete="off" /> </div> </div> </div> </div>

the above markup renders this:

as can see "asset search" not inline form input. if remove .input-append class containing div things line up. however, search icon no longer embedded in text box, instead right of text box.

how can utilize .form-inline in cunjunction .input-append?

you should not set within input-append (or prepend) else inputs, buttons or .add-ons (this might not exhaustive).

try wrapping whole thing div.input-append , allow .form-inline handle floating : demo on jsfiddle

<div class="span12 form-inline"> <label for="assetsearch">asset search</label> <div class="input-append"> <input type="search" id="assetsearch" placeholder="" /> <span class="add-on"><i class="icon-search"></i></span> </div> </div>

css twitter-bootstrap