Mobile view Desktop view


Default Styles

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


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

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.

Default options

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




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 .col-sm-* classes.

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 .col-sm-1 to .col-sm-12 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.