Bootstrap 3 Forms

Beautify your forms with Bootstrap's form classes.

Bootstrap provides a number of classes for styling forms, and specific form controls recieve some global styling. Many of the form classes can help with keeping a consistent look across your forms. They can also help with alignment so you shouldn't need to play around with alignments, padding, margins, etc just to get the form looking right.

Basic Form

Use Bootstrap's .form-control class against textual <input>, <textarea>, and <select> elements to apply width: 100% by default.

Wrap labels and controls inside a <div> with the Bootstrap .form-group class applied for optimum spacing.

View Output

Inline Form

Use Bootstrap's .form-inline class to make the form elements render as inline-block and left-aligned.

Note that this only applies when the viewport is at least 768 pixels wide. If the following form is not displaying inline, open the preview in a new window. If it still isn't displaying inline, you might need to view the example on a bigger screen.

View Output

Hidden Labels

Labels should always be provided on input fields, otherwise screenreaders will have trouble. You can hide the label if required, by using Bootstrap's .sr-only class.

Here, we use .sr-only to hide the labels. We also add a placeholder attribute to provide a hint to the user as to what to enter. Using the placeholder attribute in this manner is not recommended, as it can cause usability issues.

View Output

Horizontal Form

You can use Bootstrap's .form-horizontal to align labels and form controls horizontally.

When doing this, you need to use Bootstrap's grid classes to specify how many columns each element should span.

We also add Bootstrap's control-label class to the <label> element.

View Output

Form Control Size

You can use Bootstrap's .input-lg and .input-sm to increase or decrease the size of an input control.

View Output

Horizontal Form Group Size

You can use Bootstrap's .form-group-lg and .form-group-sm on form groups within a horizontal form (forms assigned the .form-horizontal class).

You may need to open the preview in a new window to see the full effect (and/or view it on a large screen).

View Output

Column Size

You can use Bootstrap's grid system to constrain input controls to a desired width.

View Output

Help Text

You can use Bootstrap's .help-block class to indicate a block of help text for a given form control.

You should also use the .aria-describedby attribute to associate the help text with the form control. This will ensure that screen readers can announce the help text when the user focuses on the form control.

View Output

Validation Styles & Feedback Icons

Bootstrap includes validation styles for form controls. These can be used to convey one of three validation states (success, error, or warning) to the user.

The three classes are .has-success, .has-warning, and .has-error. These should be applied to the parent element, so that any .control-label, .form-control, and .help-block element nested within that element will inherit the validation styles.

Also, textual input controls can make use of feedback icons. To do this, add the .has-feedback class to the same parent element as the validation styles. Also add the applicable glyphicon to the control.

<div class="form-group has-success has-feedback">
  <label class="control-label" for="username">Username</label>
  <input type="text" class="form-control" id="username" aria-describedby="usernameStatus">
  <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
  <span id="usernameStatus" class="help-block">Username is available!</span>
</div>
<div class="form-group has-warning has-feedback">
  <label class="control-label" for="password">Password</label>
  <input type="password" class="form-control" id="password" aria-describedby="passwordStatus">
  <span class="glyphicon glyphicon-warning-sign form-control-feedback" aria-hidden="true"></span>
  <span id="passwordStatus" class="help-block">Weak password</span>
</div>
<div class="form-group has-error has-feedback">
  <label class="control-label" for="phone">Phone Number</label>
  <input type="tel" class="form-control" id="phone" aria-describedby="phoneStatus">
  <span class="glyphicon glyphicon-remove form-control-feedback" aria-hidden="true"></span>
  <span id="phoneStatus" class="help-block">Please enter a valid phone number</span>
</div>

View Output

As with previous examples, if you want text to only be used on screen readers, you can use Bootstrap's .sr-only class.

Static Control

You can use Bootstrap's .form-control-static on a <p> element to present plain text next to a label (eg. instead of using an input field).

View Output