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.