Bootstrap's Default Settings
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 Form Layouts
Bootstrap provides three types of form layouts i.e. Vertical form (this is default), Horizontal form, Inline form.
Bootstrap Vertical Form (default)
The following example creates a vertical form with two input fields, one checkbox, and a submit button:
By default vertical form is included while using bootstrap framework.
Code for Vertical Form
Bootstrap Inline Form
In an inline form, all of the elements are inline, left-aligned, and the labels are alongside.
Additional rule for an inline form:
- Add class . form-inline to the < form > element
The following example creates an inline form with two input fields, one checkbox, and one submit button:
Bootstrap Horizontal Form
A horizontal form stands apart from the other forms both in the amount of markup, and in the presentation of the form.
Additional rules for a horizontal form:
- Add class .form-horizontal to the < form > element
- Add class . control-label to all < label > elements
The following example creates a horizontal form with two input fields, one checkbox, and one submit button: