Form Elements
Textual Inputs
Here are examples of .form-control applied to
each
textual HTML5 <input> type.
Floating Labels
Wrap a pair of <input class="form-control"> and
<label>
elements in
.form-floating to enable floating labels
Horizontal Form
Be sure to add
.col-form-label to your <label>s as well so they’re vertically
centered with
their
associated form controls.
Input Sizing
Set heights using classes like .form-control-lg
and .form-control-sm.
Range Inputs
Create custom <input type="range">
controls with .form-range.
By default, range inputs.
You can specify a step value.
Range inputs have implicit values for min and max—0 and 100, respectively.
Checkboxes
Create Checkbox <input type="checkbox">
controls with .form-check-input.
Basic
Right Side
Inline
Available Colors
Add class .form-check-* for a color
Checkboxes
Radios
Create Radios Custom <input type="radio">
controls with .form-check-input.
Basic
Right Side
Inline
Available Colors
Add class .form-radio-* for a
color Radios
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.
Basic
Sizes
File Browser
Create File Browser Custom <input type="file">
controls with .form-control.