Base
Base
Give textual form controls like <input>s and <textarea>s an upgrade with custom styles, sizing, focus states, and more.
Disabled state
Add the disabled boolean attribute on an input to give it a grayed out appearance and remove pointer events.
Color
Select
Custom <select> menus need only a custom class, .form-select to trigger the custom styles. Custom styles are limited to the <select>’s initial
appearance and cannot modify the <option>s due to browser limitations.
You may also choose from small and large custom selects to match our similarly sized text inputs.
The multiple attribute is also supported
Add the disabled boolean attribute on a select to give it a grayed out appearance and remove pointer events.
Checkbox and Radio
Browser default checkboxes and radios are replaced with the help of .form-check, a series of classes for both input types that improves the layout and behavior of their HTML elements,
that provide greater customization and cross browser consistency. Checkboxes are for selecting one or several options in a list, while radios are for selecting one option from many.
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.
Group checkboxes or radios on the same horizontal row by adding .form-check-inline to any .form-check.
Put your checkboxes, radios, and switches on the opposite side with the .form-check-reverse modifier class.
Omit the wrapping .form-check for checkboxes and radios that have no label text.
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.
Sizing
Set heights using classes like .form-control-lg and .form-control-sm.
Readonly
Add the readonly boolean attribute on an input to prevent modification of the input’s value.
Readonly plain text
If you want to have <input readonly> elements in your form styled as plain text, use the .form-control-plaintext class to remove the default form field styling and
preserve the correct margin and padding.
File input
Range
Create custom <input type="range"> controls with .form-range. The track (the background) and thumb (the value) are both styled to appear the same across browsers.
As only Firefox supports “filling” their track from the left or right of the thumb as a means to visually indicate progress, we do not currently support it.
Add the disabled boolean attribute on an input to give it a grayed out appearance and remove pointer events.
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".
Floating label
Wrap a pair of <input class="form-control"> and <label> elements in .form-floating to enable floating labels with Bootstrap’s textual form
fields. A placeholder is required on each <input> as our method of CSS-only floating labels uses the :placeholder-shown pseudo-element. Also note that
the <input> must come first so we can utilize a sibling selector (e.g., ~).
Other than .form-control, floating labels are only available on .form-selects. They work in the same way, but unlike <input>s, they’ll always show the
<label> in its floated state. Selects with size and multiple are not supported.
Floating labels also support sizing classes.
