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 .col-auto class to create horizontal layouts.
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.
Form controls
Basic example to demonstrate Bootstrap’s form styles.
Range
CUse our custom range inputs for consistent cross-browser styling and built-in customization.
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.
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.