Bootstrap: Combining input-append and input-block-level

If you have a button appended to an input control in Bootstrap, and you want it fill the entire width, it’s not sufficient to add the input-block-level to the input itself but this CSS class also needs to be added to the surrounding .input-append div. For example:

<div class="input-append input-block-level">
	<input type="text" class="search-query input-block-level" name="q" placeholder="Search">
	<button type="submit" class="btn btn-primary">Search</button>
</div>

Applying .input-block-level to only one of the elments (either the div or the input) just doesn’t work.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>