Form Elements
Textual inputs
Here are examples of .form-control applied to each
textual HTML5 <input> type.
Sizing
Set heights using classes like .form-control-lg and .form-control-sm.
Range Inputs
Create custom <input type="range">
controls with .form-range.
Min and max
Range inputs have implicit values for min and max—0 and 100, respectively.
Steps
By default, range inputs “snap” to integer
values. To change this, you can specify a step value.
Checkboxes
Checks use custom Bootstrap icons to indicate checked or indeterminate states.
Default Checkboxes
Form Checkboxes Right
Inline Checkboxes
Disable Checkboxes
Radios
Default Radios
Form Radios Right
Inline Radios
Disable 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.
Switch Examples
Switch Sizes
Disable Switch
Inline Forms
Use the .form-inline class to display a series of labels, form controls, and buttons on a single horizontal row.
Auto sizing
The example below uses a flexbox utility to vertically center the contents and changes .col to .col-auto so that your columns only take up as much space as needed. Put another way, the column sizes itself based on the contents.
Floating labels
Create beautifully simple form labels that float over your input fields.
Inline Form With Stack
Create an inline form with .hstack:
