Tutorials References Exercises Bootcamps Videos Menu
Sign Up Create Website Get Certified Upgrade

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 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

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

Bootstrap Form Example

  <div class="form-group">
    <label for="email">Email address:</label>
    <input type="email" class="form-control" id="email">
  <div class="form-group">
    <label for="pwd">Password:</label>
    <input type="password" class="form-control" id="pwd">
  <div class="checkbox">
    <label><input type="checkbox"> Remember me</label>
  <button type="submit" class="btn btn-default">Submit</button>
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
.form-control Used on input, textarea, and select elements to span the entire width of the page and make them responsive Try it
.form-control-feedback Form validation class Try it
.form-control-static Adds plain text next to a form label within a horizontal form Try it
.form-group Container for form input and label Try it

Input Classes

Class Description Example
.input-group Container to enhance an input by adding an icon, text or a button in front or behind it as a "help text" Try it
.input-group-lg Large input group Try it
.input-group-sm Small input group Try it
.input-group-addon Together with the .input-group class, this class makes it possible to add an icon or help text next to the input field Try it
.input-group-btn Together with the .input-group class, this class attaches a button next to an input. Often used as a search bar Try it
.input-lg Large input field Try it
.input-sm Small input field Try it