Bootstrap Forms

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)

Email:

Password:

Remember me

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

Email: 

 

Password: 

 

 Remember me

 

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

Email:

Password:

Remember me

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>