Form Elements
Textual inputs
Here are examples of .form-control applied to each
textual HTML5 <input> type.
Basic Form
Basic example to demonstrate Bootstrap’s form styles.
Horizontal form
Be sure to use .col-form-label-sm
or .col-form-label-lg to your <label>s
or <legend>s
to correctly follow the size of .form-control-lg and
.form-control-sm.
Custom styles
Custom stylr example.
Inline Form
Use the .form-inline class to display a series of labels, form controls, and buttons on a single horizontal row.
Form controls within inline forms vary slightly from their default states..
Input Size
Set heights using classes like
.form-control-lg and
.form-control-sm.
File browser
The file input is the most gnarly of the bunch and requires additional JavaScript if you’d like to hook them up with functional Choose file… and selected file name text.
Here’s lang(es) in action on the custom file input for a Spanish translation:
Form controls
Basic example to demonstrate Bootstrap’s form styles.
Range
Create custom
<input type="range"> controls with
.custom-range.
Range Inputs
Set horizontally scrollable range inputs using
.form-control-range.
Switches
A switch has the markup of a custom checkbox but uses the .custom-switch class to render
a toggle switch. Switches also support the disabled attribute.
Checkboxs
For even more customization and cross browser consistency, use our completely custom form elements to replace the browser defaults. They’re built on top of semantic and accessible markup, so they’re solid replacements for any default form control.
Radios
For even more customization and cross browser consistency, use our completely custom form elements to replace the browser defaults. They’re built on top of semantic and accessible markup, so they’re solid replacements for any default form control.
Bootstrap Supported elements
Our example forms show native textual
<input>s above,
but form validation styles are available for our custom form controls, too.
Validation Form Server side
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.
Input groups Static
Easily extend form controls by adding text, buttons, or button groups on either side of textual inputs, custom selects, and custom file inputs.
Input groups Buttons
Easily extend form controls by adding text, buttons, or button groups on either side of textual inputs, custom selects, and custom file inputs.