Form controls
Give textual form controls like < input >s and
< textarea >s an upgrade with custom styles, sizing,
focus states, and more.
Example
Sizing
Set heights using classes like .form-control-lg and
.form-control-sm.
Disabled
Add the disabled boolean attribute on an input to give
it a grayed out appearance and remove pointer events.
Readonly
Add the readonly boolean attribute on an input to
prevent modification of the input’s value.
Readonly plain text
f 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
Color
Datalists
Datalists allow you to create a group of < option >s that can
be accessed (and autocompleted) from within an < input >.
These are similar to < select > elements, but come with
more menu styling limitations and differences. While most browsers and
operating systems include some support for < datalist >
elements, their styling is inconsistent at best.
Select
Customize the native < select >s with custom CSS that changes
the element’s initial appearance.
Default
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.
Sizing
You may also choose from small and large custom selects to match our similarly sized text inputs.
The multiple attribute is also supported:
As is the size attribute:
Checks and radios
Create consistent cross-browser and cross-device checkboxes and radios with our completely rewritten checks component.
Checks
Indeterminate
Checkboxes can utilize the :indeterminate pseudo class
when manually set via JavaScript (there is no available HTML attribute
for specifying it).
Radios
Switches
A switch has the markup of a custom checkbox but uses the
.form-switch class to render a toggle switch.
Consider using role="switch" to more accurately convey the
nature of the control to assistive technologies that support this role.
In older assistive technologies, it will simply be announced as a regular
checkbox as a fallback. 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.
Range
Use our custom range inputs for consistent cross-browser styling and built-in customization.
Overview
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.
Min and max
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.
Steps
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".
Input group
Easily extend form controls by adding text, buttons, or button groups on either side of textual inputs, custom selects, and custom file inputs.
Basic example
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.
Floating labels
Create beautifully simple form labels that float over your input fields.
Example
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., ~).
When there’s a value already defined,
< label >s will automatically adjust to their floated position.
Form validation styles also work as expected.
Textareas
By default, < textarea >s with .form-control will
be the same height as < input >s.
To set a custom height on your < textarea >, do not use
the rows attribute. Instead, set an explicit height (either inline
or via custom CSS).
Selects
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.
Layout
When working with the Bootstrap grid system, be sure to place form elements within column classes.
Layout
Give your forms some structure—from inline to horizontal to custom grid implementations—with our form layout options.
Gutters
Complex layouts can also be created with the grid system.
Horizontal form
Column sizing
Auto-sizing
Inline forms
Validation
Provide valuable, actionable feedback to your users with HTML5 form validation, via browser default behaviors or custom styles and JavaScript.