Bootstrap Forms
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
1) Bootstrap Vertical Form (Default)
2) Bootstrap Inline Form
In Bootstrap Inline forms, all elements are inline, left-aligned, and the labels are alongside.
This example is only applied to forms within viewports that are at least 768px wide!
Example:
3) Bootstrap Horizontal Form
You have to add some additional rules if you want to create a horizontal form.
Additional rules for a horizontal form:
- Add class .form-horizontal to the <form> element
- Add class .control-label to all <label> elements
Example:
Bootstrap 4 Forms
In Bootstrap4, 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%.
Stacked (full-width) form:
Bootstrap 4 provides full width stacked forms.
Example:
Let's take an example to create a stacked form with two input fields, one checkbox, and a submit button.