Basic example
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.