Form Elements
Basic Input
Included .form-control
to <input>
, <select>
s and <textarea>
for general appearance, focus state, sizing, and more.
Input Sizing
Set heights using classes like .form-control-lg
and .form-control-sm
.
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 Sizing
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.
Input Sizing
Set heights using classes like .form-control-lg
and .form-control-sm
.
Checks
Usage of checkbox.
Checks
Checkboxes can utilize the :indeterminate
pseudo class when manually set via JavaScript (there is no available HTML attribute for specifying it).
Disabled
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.
Radios
Usage of radios.
Disabled
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.
Switches
A switch has the markup of a custom checkbox but uses the .form-switch
class to render a toggle switch. Switches also support the disabled
attribute.
Inline
Group checkboxes or radios on the same horizontal row by adding .form-check-inline
to any .form-check
.