Forms
Basic Form
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.
Horizontal Form
Use Bootstrap's predefined grid classes to align labels and groups of form controls in a horizontal layout by adding.form-horizontal
to the form (which doesn't have to be a <form>
). Doing so changes .form-group
s to behave as grid rows, so no need for .row
.
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.
Basic Form Elements
Disabled State
Add thedisabled
boolean attribute on an input to prevent user interactions. Disabled inputs appear lighter and add a not-allowed
cursor.
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.