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:
- 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
Bootstrap Vertical Form (default)
The following example creates a vertical form with two input fields, one checkbox, and a submit button:
<form> <div class="form-group"> <label for="email">Email address:</label> <input type="email" class="form-control" id="email"> </div> <div class="form-group"> <label for="pwd">Password:</label> <input type="password" class="form-control" id="pwd"> </div> <div class="checkbox"> <label><input type="checkbox"> Remember me</label> </div> <button type="submit" class="btn btn-default">Submit</button></form>
Bootstrap 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
The following example creates an inline form with two input fields, one checkbox, and one submit button:
<form class="form-inline"> <div class="form-group"> <label for="email">Email address:</label> <input type="email" class="form-control" id="email"> </div> <div class="form-group"> <label for="pwd">Password:</label> <input type="password" class="form-control" id="pwd"> </div> <div class="checkbox"> <label><input type="checkbox"> Remember me</label> </div> <button type="submit" class="btn btn-default">Submit</button></form>
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
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:
<form class="form-horizontal"> <div class="form-group"> <label class="control-label col-sm-2" for="email">Email:</label> <div class="col-sm-10"> <input type="email" class="form-control" id="email" placeholder="Enter email"> </div> </div> <div class="form-group"> <label class="control-label col-sm-2" for="pwd">Password:</label> <div class="col-sm-10"> <input type="password" class="form-control" id="pwd" placeholder="Enter password"> </div> </div> <div class="form-group"> <div class="col-sm-offset-2 col-sm-10"> <div class="checkbox"> <label><input type="checkbox"> Remember me</label> </div> </div> </div> <div class="form-group"> <div class="col-sm-offset-2 col-sm-10"> <button type="submit" class="btn btn-default">Submit</button> </div> </div></form>
