Form controls automatically receive some global styling with Bootstrap:

All textual <input>, <textarea>, and <select> elements with class .form-control have a width of 100%.

Bootstrap provides three types of form layouts:

• Vertical form (this is default)

• Horizontal form

• Inline form

Standard rules for all three form layouts:

• Wrap labels and form controls in <div class="form-group"> (needed for optimum spacing)

• Add class .form-control to all textual <input>, <textarea>, and <select> elements

Vertical Form

Inline Form

In an inline form, all of the elements are inline, left-aligned, and the labels are alongside.

Note: This only applies to forms within viewports that are at least 768px wide!

Additional rule for an inline form:

• Add class .form-inline to the <form> element

Tip: If you don't include a label for every input, screen readers will have trouble with your forms. You can hide the labels for all devices, except screen readers, by using the .sr-only class:

The following example creates an inline form with two input fields, one checkbox, and one submit button:

Horizontal Form