Basic Form

Tabs styles and versions

Form controls

Individual form controls automatically receive some global styling. All textual <input>, <textarea>, and <select> elements with .form-control are set to width: 100%; by default. Wrap labels and controls in .form-group for optimum spacing.

Email address We'll never share your email with anyone else.

Password

Example select

Example multiple select

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

Inline form

Add .form-inline to your form (which doesn't have to be a <form>) for left-aligned and inline-block controls. This only applies to forms within viewports that are at least 768px wide.

Textual inputs

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

Text

URL

Telephone

Password

Number

Date and time

Date

Month

Week

Time

Color

Validation

How it works

Here’s a rundown of how they work:

To use, add .has-warning, .has-danger, or .has-success to the parent element. Any .col-form-label, .form-control, or custom form element will receive the validation styles.
Contextual validation text, in addition to your usual form field help text, can be added with the use of .form-feedback. This text will adapt to the parent .has-* class. By default it only includes a bit of margin for spacing and a modified color for each state.
Validation icons are url()s configured via Sass variables that are applied to background-image declarations for each state.
You may use your own base64 PNGs or SVGs by updating the Sass variables and recompiling.
Icons can also be disabled entirely by setting the variables to none or commenting out the source Sass.

Input with success

Success! You've done it.