Default Form
Input Sizing
Set heights using classes like .form-control-lg
and
.form-control-sm.
Horizontal form label sizing
Be sure to use .col-form-label-sm or .col-form-label-lg to
your
<label>s or <legend>s to correctly follow the
size
of
.form-control-lg and .form-control-sm.
Select Sizing
You may also choose from small and large custom selects to match our similarly sized text inputs.
checkbox
Add the disabled attribute and the
associated
<label>s are automatically styled to match with a lighter
color
to
help indicate the input’s state.
Radio
Add the disabled attribute and the
associated
<label>s are automatically styled to match with a lighter
color
to
help indicate the input’s state.
Inline Checkbox & Radio
Group checkboxes or radios on the same horizontal row by
adding
.form-check-inline to any .form-check.
Add the disabled attribute and the associated
<label>s are automatically styled to match with a lighter
color
to
help indicate the input’s state.
Switch
Add the disabled attribute and the
associated
<label>s are automatically styled to match with a lighter
color
to
help indicate the input’s state.
Range
By default, range inputs “snap” to integer values. To change
this,
you
can specify a step value. In the example below, we double the number of
steps
by using step="0.5".
Input Group
Place one add-on or button on either side of an input. You may
also
place one on both sides of an input. Remember to place <label>s
outside
the input group.
Input Group
Add the relative form sizing classes to the
.input-group
itself and contents within will automatically resize—no need for repeating the form
control
size classes on each element.
Place any checkbox or radio option within an input
group’s
addon instead of text. We recommend adding .mt-0 to the
.form-check-input when there’s no visible text next to the input.
Input Group Multiple Input
While multiple <input>s are supported
visually,
validation styles are only available for input groups with a single
<input>.
Input Group Multi Addons
Multiple add-ons are supported and can be mixed with checkbox and radio input versions.
Input Addon
While multiple <input>s are supported
visually,
validation styles are only available for input groups with a single
<input>.