Bootstrap Forms
❮ Previous Next ❯
Bootstrap’s Default Settings
Form controls automatically receive some global styling with Bootstrap:
All textual , , and elements with class .form-control have a width of 100%.
Bootstrap Form Layouts
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
Add class .form-control to all textual , , and elements
Bootstrap Vertical Form (default)
Email:
Enter email
Password:
Enter password
 Remember me
Submit
The following example creates a vertical form with two input fields, one checkbox, and a submit button:
Example
Submit
»
Bootstrap Inline Form
Email:
Enter email
Password:
Enter password
 Remember me
Submit
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 element
The following example creates an inline form with two input fields, one checkbox, and one submit button:
Example
Submit
»
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:
Example
Submit
»
Bootstrap Horizontal Form
Email:

Enter email
Password:

Enter password
 Remember me
Submit
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 element
Add class .control-label to all elements
Tip: Use Bootstrap’s predefined grid classes to align labels and groups of form controls in a horizontal layout.
The following example creates a horizontal form with two input fields, one checkbox, and one submit button:
Example
»
❮ Previous Next ❯
shahzade bau 