Form controls

Bootstrap provides several form control styles, layout options, and custom components for creating a wide variety of forms.

Email addressWe'll never share your email with anyone else.

Password

Example select 1 2 3 4 5

Example multiple select 1 2 3 4 5

Example textarea

File inputThis is some placeholder block-level help text for the above input. It's a bit lighter and easily wraps to a new line.

Option one is this and that—be sure to include why it's great

Option two can be something else and selecting it will deselect option one

Option three is disabled

Check me out

Submit

Textual inputs

Here are examples of .form-controlapplied to each textual HTML5 <input>type.

Form groups

The .form-groupclass is the easiest way to add some structure to forms. Its only purpose is to provide margin-bottomaround a label and control pairing. As a bonus, since it’s a class you can use it with <fieldset>s, <div>s, or nearly any other element.

Example label

Another label

Inline forms

Use the .form-inlineclass to to display a series of labels, form controls, and buttons on a single horizontal row.

Visible labels

Name

Email

Send invitation

Hidden labels

Email address

Password

Remember me

Sign in

Amount (in dollars)

$

.00

Transfer cash

Grid

For more structured form layouts, you can utilize Bootstrap’s predefined grid classes or mixins. Add the .rowclass to form groups and use the .col-*classes to specify the width of your labels and controls.

Email

Password

Radios

Option one is this and that—be sure to include why it's great

Option two can be something else and selecting it will deselect option one

Option three is disabled

Checkbox

Check me out

Sign in

Checkboxes and radios

Checkboxes are for selecting one or several options in a list, while radios are for selecting one option from many.

Default (stacked)

Inline

123123

Static controls

When you need to place plain text next to a form label within a form, use the .form-control-staticclass on a <p>.

Email

email@example.com

Password

Email

email@example.com

Password

Confirm identity

Disabled states

Add the disabledboolean attribute on an input to prevent user interactions. Disabled inputs appear lighter and add a not-allowedcursor.

Disabled input

Disabled select menu Disabled select

Can't check this

Submit

Readonly inputs

Add the readonlyboolean attribute on an input to prevent modification of the input’s value. Read-only inputs appear lighter (just like disabled inputs), but retain the standard cursor.

Control sizing

Set heights using classes like .form-control-lg, and set widths using grid column classes like .col-lg-*.

Large select Default select Small select

Column sizing

Help text

Block-level help text in forms can be created using .form-text(previously known as .help-blockin v3). Inline help text can be flexibly implemented using any inline HTML element and utility classes like .text-muted.

Password

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

Password Must be 8-20 characters long.

Validation

Bootstrap includes validation styles for danger, warning, and success states on form controls. To use, add .has-warning, .has-danger, or .has-successto the parent element. Any .form-control-label, .form-control, and .text-helpwithin that element will receive the validation styles.