Default Styles
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-horizontalto the form - Wrap labels and controls in
.control-group - Add
.control-labelto the label - Wrap any associated controls in
.controlsfor 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.
Combined
Use both classes and two instances of .add-on to prepend and append an input.
Buttons Instead of Text
Instead of a span with text, use a .btn to attach a button (or two) to an input.
Buttons Instead of Text
Segmented Dropdown
Search Form
Control sizing
Use relative sizing classes like .input-large or match your inputs to the grid column sizes using .col-sm-* classes.
Relative sizing
Grid sizing
Use .col-sm-1 to .col-sm-12 for inputs that match the same sizes of the grid columns.
