Form Elements

Because Bootstrap is part of the Stratosphere WordPress theme, you also get some of the great form elements included with customized styling. Here are the basics:

Text Input

Text Area


Checkbox – Inline


Buttons instead of text

Instead of a <span> with text, use a .btn to attach a button (or two) to an input.

Search form

Control sizing

Use relative sizing classes like .input-large or match your inputs to the grid column sizes using .span* classes.

Relative sizing

 <input class="input-mini" placeholder=".input-mini" type="text">
<input class="input-small" placeholder=".input-small" type="text">
<input class="input-medium" placeholder=".input-medium" type="text">
<input class="input-large" placeholder=".input-large" type="text">
<input class="input-xlarge" placeholder=".input-xlarge" type="text">
<input class="input-xxlarge" placeholder=".input-xxlarge" type="text">

Grid sizing

Use .span1 to .span12 for inputs that match the same sizes of the grid columns.

<input class="span1" placeholder=".span1" type="text">
<input class="span2" placeholder=".span2" type="text">
<input class="span3" placeholder=".span3" type="text">

Default CSS Buttons

Button styles can be applied to anything with the .btn class applied. However, typically you’ll want to apply these to only <a> and <button> elements for the best rendering.

Button class=””
btn btn-blue
btn btn-taupe
btn btn-green
btn btn-yellow
btn btn-red
btn btn-dark
btn btn-link

Cross browser compatibility

IE9 doesn’t crop background gradients on rounded corners, so we remove it. Related, IE9 jankifies disabled button elements, rendering text gray with a nasty text-shadow that we cannot fix…you can thank Microsoft for this.

Button sizes

Fancy larger or smaller buttons? Add .btn-large, .btn-small, or .btn-mini for additional sizes.





Leave a reply