Bootstrap Forms

Simple Form Styling

We'll never share your email with anyone else.

Form controls

For file inputs, swap the .form-control for .form-control-file

Sizing

Readonly

Inline form


Range Inputs

Set horizontally scrollable range inputs using .form-control-range.


Checkboxes and radios


Form groups


Form grid


Form row


complex layouts


Horizontal form

Radios
Checkbox

Horizontal form label sizing


Column sizing

As shown in the previous examples, our grid system allows you to place any number of .cols within a .row or .form-row. They’ll split the available width equally between them. You may also pick a subset of your columns to take up more or less space, while the remaining .cols equally split the rest, with specific column classes like .col-7.


Auto-sizing

@

And Using custom form controls are supported too:


Inline forms

@

Custom form controls and selects are also supported


Help text

Your password must be 8-20 characters long, contain letters and numbers, and must not contain spaces, special characters, or emoji.
Must be 8-20 characters long.

Disabled forms


Validation

Looks good!
Looks good!
@
Please choose a username.
Please provide a valid city.
Please provide a valid state.
Please provide a valid zip.
You must agree before submitting.

Browser defaults

@

Server side

Looks good!
Looks good!
@
Please choose a username.
Please provide a valid city.
Please provide a valid state.
Please provide a valid zip.
You must agree before submitting.

Supported Validation Elements

Please enter a message in the textarea.
Example invalid feedback text
More example invalid feedback text
Example invalid custom select feedback
Example invalid custom file feedback

Tooltips Validations

Looks good!
Looks good!
@
Please choose a unique and valid username.
Please provide a valid city.
Please provide a valid state.
Please provide a valid zip.

Custom forms

Checkboxes


Radios


Inline


Disabled


Switches


Select menu


File browser


Range

Range inputs have implicit values for min and max0 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".