Colors  
Mobile view Desktop view

Forms

Default Styles

Legend
Example block-level help text here.

Switches

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







Selects


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.


@

.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 .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.