FREE Web Template Download
HTML CSS JAVASCRIPT SQL PHP BOOTSTRAP JQUERY ANGULARJS TUTORIALS REFERENCES EXAMPLES Blog
 

Bootstrap CSS Forms Reference


Bootstrap's Default Settings

Individual form controls automatically receive some global styling with Bootstrap.

All textual <input>, <textarea>, and <select> elements with class="form-control" are set to width: 100%; by default.

Standard rules for Bootstrap forms:

  • Add role="form" to the <form> element (helps improve accessibility for people using screen readers)
  • Wrap labels and form controls in a <div> element with class="form-group" (needed for optimum spacing)
  • Add class="form-control" to all textual <input>, <textarea>, and <select> elements

The following example creates a simple Bootstrap form with two input fields, one checkbox, and a submit button:

Bootstrap Form Example

<form role="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>
Try it Yourself »

<form> Classes

Class Description Example
.form-inline Makes a <form> left-aligned with inline-block controls (This only applies to forms within viewports that are at least 768px wide) Try it
.form-horizontal Aligns labels and groups of form controls in a horizontal layout Try it