Bootstrap Forms

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%.

In Bootstrap, there are three types of form layouts:

  • Vertical form (this is default)
  • Horizontal form
  • Inline form

Bootstrap Form Rules

There are three standard rules for these 3 form layouts:

  • Always use <form role="form"> (helps improve accessibility for people using screen readers)
  • 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

Example -

Bootstrap Inline Form

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

Example -

Bootstrap Horizontal Form

A horizontal form means that the labels are aligned next to the input field (horizontal) on large and medium screens. On small screens (767px and below), it will transform to a vertical form (labels are placed on top of each input).

Additional rules for a horizontal form:

  • Add class .form-horizontal to the <form> element
  • Add class .control-label to all <label> elements

Example -