Examples and usage guidelines for form control styles, layout options, and custom components for creating a wide variety of forms.
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., ~
).
By default, <textarea>
s with .form-control
will be the same height as <input>
s.
Other than .form-control
, floating labels are only available on .form-select
s. 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.
When working with the Bootstrap grid system, be sure to place form elements within column classes.
Custom checkboxes can also utilize the :indeterminate
> pseudo class when manually set via JavaScript (there is no available HTML attribute for specifying it).
You may also choose from small and large custom selects to match our similarly sized text inputs.
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 IE and Firefox support “filling” their track from the left or right of the thumb as a means to visually indicate progress, we do not currently support it.
Range inputs have implicit values for min
and max
—0
and 100
,
respectively. You may specify new values for those using the min
and
max
attributes.
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"
.
For custom Bootstrap form validation messages, you’ll need to add the
novalidate
boolean attribute to your <form>
. This disables the browser default feedback tooltips, but still provides access
to the form validation APIs in JavaScript. Try to submit the form below; our JavaScript will intercept the submit button and relay feedback to you. When attempting to submit, you’ll see the :invalid
and :valid
styles applied to your form controls.
Custom feedback styles apply custom colors, borders, focus styles, and background icons to better communicate feedback. Background icons for
<select>
s are only available with .form-select
, and not .form-control
.
Not interested in custom validation feedback messages or writing JavaScript to change form behaviors? All good, you can use the browser defaults. Try submitting the form below. Depending on your browser and OS, you’ll see a slightly different style of feedback.
We recommend using client side validation, but in case you require server side, you can indicate invalid and valid form fields with .is-invalid
and .is-valid
.
Note that .invalid-feedback
is also supported with these classes.