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

Email address We'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 input This is some placeholder block-level help text for the above input. It's a bit lighter and easily wraps to a new line.

Radio buttons

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

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

The .form-group class is the easiest way to add some structure to forms. Its only purpose is to provide margin-bottom around 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

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.

Visible labels

Name Username

@

Remember me

Submit

Custom form controls and selects are also supported.

Preference Choose... One Two Three Remember my preference Submit

For more structured form layouts that are also responsive, you can utilize Bootstrap’s predefined grid classes or mixins to create horizontal forms. Add the .row class 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

Default checkboxes and radios are improved upon with the help of .form-check, a single class for both input types that improves the layout and behavior of their HTML elements. Checkboxes are for selecting one or several options in a list, while radios are for selecting one option from many.

Default (stacked)

Inline

When you need to place plain text next to a form label within a form, use the .form-control-static class on an element of your choice.

Email

email@example.com

Password

Email

email@example.com

Password

Confirm identity

Add the disabled boolean attribute on an input to prevent user interactions. Disabled inputs appear lighter and add a not-allowed cursor.

Disabled input

Disabled select menu Disabled select

Can't check this

Submit

Add the readonly boolean 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.

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

Wrap inputs in grid columns, or any custom parent element, to easily enforce desired widths.

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

Block level

Password

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

Inline

Password Must be 8-20 characters long.

Bootstrap includes validation styles for danger, warning, and success states on most form controls.

Those same states can also be used with horizontal forms.

Email

Success! You've done it.

Example help text that remains unchanged.

Email

Shucks, check the formatting of that and try again.

Example help text that remains unchanged.

Email

Sorry, that username's taken. Try another?

Example help text that remains unchanged.

Checkboxes and radios are also supported.

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.

Checkboxes

Check this custom checkbox

Radios

Toggle this custom radio Or toggle this other custom radio

Disabled

Check this custom checkbox Toggle this custom radio

Validation states

Stacked

Select menu

Open this select menu One Two Three

File browser