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.
Add .form-inline
to your <form>
for left-aligned and inline-block controls. This only applies to forms within viewports that are at least 768px wide.
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. Doing so changes .form-group
s to behave as grid rows, so no need for .row
.