Add a class name btn-u to button or anchor to do default template style.

Default Transform Styles

Legend Example block-level help text here.

Search Form

Add .form-search to the form and .search-query to the input for an extra-rounded text input.

Inline form

Add .form-inline for left-aligned labels and inline-block controls for a compact layout.


Horizontal Form

Right align labels and float them to the left to make them appear on the same line as controls. Requires the most markup changes from a default form:

  • Add .form-horizontal to the form
  • Wrap labels and controls in .control-group
  • Add .control-label to the label
  • Wrap any associated controls in .controls for proper alignment

Input and Textarea


Checkboxes and Radios

Checkboxes are for selecting one or several options in a list while radios are for selecting one option from many.

Inline Checkboxes

Add the .inline class to a series of checkboxes or radios for controls appear on the same line.

Selects

Use the default option or specify a multiple="multiple" to show multiple options at once.



Default options

Wrap an .add-on and an input with one of two classes to prepend or append text to an input.

@
.00

Combined

Use both classes and two instances of .add-on to prepend and append an input.

$ .00
£ .00

Buttons Instead of Text

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


Control sizing

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

Block level inputs

Relative sizing






Heads up! In future versions, we'll be altering the use of these relative input classes to match our button sizes. For example, .input-large will increase the padding and font-size of an input.

Grid sizing

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




For multiple grid inputs per line, use the .controls-row modifier class for proper spacing. It floats the inputs to collapse white-space, sets the proper margins, and clears the float.