Add .form-search
to the form and .search-query
to the input
for an extra-rounded text input.
Add .form-inline
for left-aligned labels and inline-block controls for a compact layout.
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:
.form-horizontal
to the form.control-group
.control-label
to the label.controls
for proper alignmentUse the default option or specify a multiple="multiple"
to show multiple options at once.
Checkboxes are for selecting one or several options in a list while radios are for selecting one option from many.
Add the .inline
class to a series of checkboxes or radios for controls appear on the same line.
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.
Instead of a span
with text, use a .btn
to attach a button (or two) to an input.
Use relative sizing classes like .input-large
or match your inputs to the grid column sizes using .col-sm-*
classes.
Use .col-sm-1
to .col-sm-12
for inputs that match the same sizes of the grid columns.