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.