Forms

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.

Basic Form
Horizontal Form
Basic Form
Horizontal Form
Inline Form

Extend form controls by adding text or buttons before, after, or on both sides of any text-based input. Use .input-group with an .input-group-addon to prepend or append elements to a .form-control.

Basic example

@
.00
$ .00

Checkboxes and Radio Addons

Button Addons and Buttons with Dropdowns

Buttons in input groups are a bit different and require one extra level of nesting. Instead of .input-group-addon , you'll need to use .input-group-btn to wrap the buttons. This is required due to default browser styles that cannot be overridden.

Inputs

Most common form control, text-based input fields. Includes support for all HTML5 types: text, password, datetime, datetime-local, date, month, time, week, number, email, url, search, tel, and color.


Textarea

Form control which supports multiple lines of text. Change rows attribute as necessary.


Checkboxes and Radios

Selects

Use the default option, or add multiple to show multiple options at once.



Validation States

Bootstrap includes validation styles for error, warning, and success states on form controls. To use, add .has-warning, .has-error, or .has-success to the parent element. Any .control-label, .form-control, and .help-block within that element will receive the validation styles.


Control Sizing

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