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.

<form action="/html/tags/html_form_tag_action.cfm">
<div class="form-group">
<label for="first_name">First Name</label>
<input type="text" class="form-control" id="first_name" name="first_name">
</div>
<div class="form-group">
<label for="last_name">Last Name</label>
<input type="text" class="form-control" id="last_name" name="last_name">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>

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.

<form action="/html/tags/html_form_tag_action.cfm" class="form-inline">
<div class="form-group">
<label for="first_name">First Name</label>
<input type="text" class="form-control" id="first_name" name="first_name">
</div>
<div class="form-group">
<label for="last_name">Last Name</label>
<input type="text" class="form-control" id="last_name" name="last_name">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>

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.

<form action="/html/tags/html_form_tag_action.cfm" class="form-inline">
<div class="form-group">
<label for="first_name" class="sr-only">First Name</label>
<input type="text" class="form-control" id="first_name" name="first_name" placeholder="First Name">
</div>
<div class="form-group">
<label for="last_name" class="sr-only">Last Name</label>
<input type="text" class="form-control" id="last_name" name="last_name" placeholder="Last Name">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>

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.

<form action="/html/tags/html_form_tag_action.cfm" class="form-horizontal">
<div class="form-group">
<label for="first_name" class="col-xs-3 control-label">First Name</label>
<div class="col-xs-9">
<input type="text" class="form-control" id="first_name" name="first_name">
</div>
</div>
<div class="form-group">
<label for="last_name" class="col-xs-3 control-label">Last Name</label>
<div class="col-xs-9">
<input type="text" class="form-control" id="last_name" name="last_name">
</div>
</div>
<div class="form-group">
<div class="col-xs-offset-3 col-xs-9">
<button type="submit" class="btn btn-default">Submit</button>
</div>
</div>
</form>

Form Control Size

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

<div class="form-group">
<input type="text" class="form-control input-sm" placeholder="Small">
</div>
<div class="form-group">
<input type="text" class="form-control" id="last_name" placeholder="Default size">
</div>
<div class="form-group">
<input type="text" class="form-control input-lg" placeholder="Large">
</div>

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

<form class="form-horizontal">
<div class="form-group form-group-sm">
<label for="first_name" class="col-xs-3 control-label">First Name</label>
<div class="col-xs-9">
<input type="text" class="form-control" id="first_name">
</div>
</div>
<div class="form-group form-group-lg">
<label for="last_name" class="col-xs-3 control-label">Last Name</label>
<div class="col-xs-9">
<input type="text" class="form-control" id="last_name">
</div>
</div>
</form>

Column Size

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

<div class="row">
<div class="col-xs-5">
<input type="text" class="form-control" placeholder=".col-xs-5">
</div>
<div class="col-xs-3">
<input type="text" class="form-control" placeholder=".col-xs-3">
</div>
</div>

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.

<label for="accountId">Account Id</label>
<input type="text" id="accountId" class="form-control" aria-describedby="helpAccountId">
<span id="helpAccountId" class="help-block">Your account ID is located at the top of your invoice.</span>

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>

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

<form class="form-horizontal">
<div class="form-group">
<label class="col-xs-3 control-label">Username</label>
<div class="col-xs-8">
<p class="form-control-static">Bugsy</p>
</div>
</div>
<div class="form-group">
<label for="pwd" class="col-xs-3 control-label">Password</label>
<div class="col-xs-8">
<input type="password" class="form-control" id="pwd" placeholder="Password">
</div>
</div>
</form>