Forms

Examples and usage guidelines for form control styles, layout options, and custom components for creating a wide variety of forms.

Overview

Be sure to use an appropriate type attribute on all inputs (e.g., email for email address or number for numerical information) to take advantage of newer input controls like email verification, number selection, and more.

Here’s a quick example to demonstrate Bootstrap’s form styles. Keep reading for documentation on required classes, form layout, and more.

<div class="card">
  <div class="card-body">
    <form>
      <div class="form-group">
        <label for="exampleInputEmail1">Email address</label>
        <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
        <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
      </div>
      <div class="form-group">
        <label for="exampleInputPassword1">Password</label>
        <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
      </div>
      <div class="form-check">
          <label class="form-check-label">
              <input class="form-check-input" type="checkbox" value="">
              Option one is this
              <span class="form-check-sign">
                  <span class="check"></span>
              </span>
          </label>
      </div>

      <button type="submit" class="btn btn-primary">Submit</button>
    </form>
  </div>
</div>

Form controls

Textual form controls—like <input>s, <select>s, and <textarea>s—are styled with the .form-control class. Included are styles for general appearance, focus state, sizing, and more.

Be sure to explore our custom forms to further style <select>s.

<div class="card">
  <div class="card-body">
    <form>
      <div class="form-group">
        <label for="exampleFormControlInput1">Email address</label>
        <input type="email" class="form-control" id="exampleFormControlInput1" placeholder="[email protected]">
      </div>
      <div class="form-group">
        <label for="exampleFormControlSelect1">Example select</label>
        <select class="form-control" id="exampleFormControlSelect1">
          <option>1</option>
          <option>2</option>
          <option>3</option>
          <option>4</option>
          <option>5</option>
        </select>
      </div>
      <div class="form-group">
        <label for="exampleFormControlSelect2">Example multiple select</label>
        <select multiple class="form-control" id="exampleFormControlSelect2">
          <option>1</option>
          <option>2</option>
          <option>3</option>
          <option>4</option>
          <option>5</option>
        </select>
      </div>
      <div class="form-group">
        <label for="exampleFormControlTextarea1">Example textarea</label>
        <textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
      </div>
    </form>
  </div>
</div>

Examples

<div class="card">
    <div class="card-body">
      <div class="form-group has-success">
        <input type="text" value="Success" class="form-control form-control-success" />
      </div>
    </div>
  </div>

<div class="card">
    <div class="card-body">
      <div class="form-group has-danger">
          <input type="email" value="Error Input" class="form-control form-control-danger" />
      </div>
    </div>
  </div>

<div class="card">
    <div class="card-body">
      <div class="input-group">
          <div class="input-group-prepend">
            <div class="input-group-text">
              <i class="tim-icons icon-single-02"></i>
           </div>
         </div>
        <input type="text" class="form-control" placeholder="With Nucleo Icons">
      </div>
    </div>
  </div>

<div class="card">
    <div class="card-body">
      <div class="input-group">
        <div class="input-group-prepend">
          <div class="input-group-text">
            <i class="fab fa-dribbble"></i>
          </div>
        </div>
        <input type="text" class="form-control" placeholder="With Font Awesome Icons">
      </div>
    </div>
  </div>

Checkboxes and radios

Default checkboxes and radios are improved upon with the help of .form-check, a single class for both input types that improves the layout and behavior of their HTML elements. Checkboxes are for selecting one or several options in a list, while radios are for selecting one option from many.

Disabled checkboxes and radios are supported, but to provide a not-allowed cursor on hover of the parent <label>, you’ll need to add the .disabled class to the parent .form-check. The disabled class will also lighten the text color to help indicate the input’s state.

Default (stacked)

By default, any number of checkboxes and radios that are immediate sibling will be vertically stacked and appropriately spaced with .form-check.

Option one is this and that—be sure to include why it's great

Option two is disabled

<div class="card">
  <div class="card-body">
    <div class="form-check">
        <label class="form-check-label">
            <input class="form-check-input" type="checkbox" value="">
            Option one is this and that&mdash;be sure to include why it's great
            <span class="form-check-sign">
                <span class="check"></span>
            </span>
        </label>
    </div>

    <div class="form-check disabled">
        <label class="form-check-label">
            <input class="form-check-input" type="checkbox" value="" disabled>
            Option two is disabled
            <span class="form-check-sign">
                <span class="check"></span>
            </span>
        </label>
    </div>
  </div>
</div>

Radio is off

Radio is on

Disabled radio is off

<div class="card">
  <div class="card-body">
    <div class="form-check form-check-radio">
        <label class="form-check-label">
            <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios1" value="option1" >
            Radio is off
            <span class="form-check-sign"></span>
        </label>
    </div>
    <div class="form-check form-check-radio">
        <label class="form-check-label">
            <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios2" value="option2" checked>
            Radio is on
            <span class="form-check-sign"></span>
        </label>
    </div>

    <div class="form-check form-check-radio disabled">
        <label class="form-check-label">
            <input class="form-check-input" type="radio" name="exampleRadios1" id="exampleRadios1" value="option1" disabled>
            Disabled radio is off
            <span class="form-check-sign"></span>
        </label>
    </div>
  </div>
</div>

Inline

Group checkboxes or radios on the same horizontal row by adding .form-check-inline to any .form-check.

<div class="card">
  <div class="card-body">
    <div class="form-check form-check-inline">
      <label class="form-check-label">
        <input class="form-check-input" type="checkbox" id="inlineCheckbox1" value="option1"> 1
        <span class="form-check-sign"></span>
      </label>
    </div>
    <div class="form-check form-check-inline">
      <label class="form-check-label">
        <input class="form-check-input" type="checkbox" id="inlineCheckbox2" value="option2"> 2
        <span class="form-check-sign"></span>
      </label>
    </div>
    <div class="form-check form-check-inline disabled">
      <label class="form-check-label">
        <input class="form-check-input" type="checkbox" id="inlineCheckbox3" value="option3" disabled> 3
        <span class="form-check-sign"></span>
      </label>
    </div>
  </div>
</div>

<div class="card">
  <div class="card-body">
    <div class="form-check form-check-radio form-check-inline">
      <label class="form-check-label">
        <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1"> 1
        <span class="form-check-sign"></span>
      </label>
    </div>
    <div class="form-check form-check-radio form-check-inline">
      <label class="form-check-label">
        <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2"> 2
        <span class="form-check-sign"></span>
      </label>
    </div>
    <div class="form-check form-check-radio form-check-inline disabled">
      <label class="form-check-label">
        <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3" disabled> 3
        <span class="form-check-sign"></span>
      </label>
    </div>
  </div>
</div>

Layout

Since Bootstrap applies display: block and width: 100% to almost all our form controls, forms will by default stack vertically. Additional classes can be used to vary this layout on a per-form basis.

Form grid

More complex forms can be built using our grid classes. Use these for form layouts that require multiple columns, varied widths, and additional alignment options.

<div class="card">
  <div class="card-body">
    <form>
      <div class="row">
        <div class="col">
          <input type="text" class="form-control" placeholder="First name">
        </div>
        <div class="col">
          <input type="text" class="form-control" placeholder="Last name">
        </div>
      </div>
    </form>
  </div>
</div>

Form row

You may also swap .row for .form-row, a variation of our standard grid row that overrides the default column gutters for tighter and more compact layouts.

<div class="card">
  <div class="card-body">
    <form>
      <div class="form-row">
        <div class="col">
          <input type="text" class="form-control" placeholder="First name">
        </div>
        <div class="col">
          <input type="text" class="form-control" placeholder="Last name">
        </div>
      </div>
    </form>
  </div>
</div>

More complex layouts can also be created with the grid system.

Password

Address

Address 2

City

State

Zip

Check me out

<div class="card">
  <div class="card-body">
    <form>
      <div class="form-row">
        <div class="form-group col-md-6">
          <label for="inputEmail4">Email</label>
          <input type="email" class="form-control" id="inputEmail4" placeholder="Email">
        </div>
        <div class="form-group col-md-6">
          <label for="inputPassword4">Password</label>
          <input type="password" class="form-control" id="inputPassword4" placeholder="Password">
        </div>
      </div>
      <div class="form-group">
        <label for="inputAddress">Address</label>
        <input type="text" class="form-control" id="inputAddress" placeholder="1234 Main St">
      </div>
      <div class="form-group">
        <label for="inputAddress2">Address 2</label>
        <input type="text" class="form-control" id="inputAddress2" placeholder="Apartment, studio, or floor">
      </div>
      <div class="form-row">
        <div class="form-group col-md-6">
          <label for="inputCity">City</label>
          <input type="text" class="form-control" id="inputCity">
        </div>
        <div class="form-group col-md-4">
          <label for="inputState">State</label>
          <select id="inputState" class="form-control">
            <option selected>Choose...</option>
            <option>...</option>
          </select>
        </div>
        <div class="form-group col-md-2">
          <label for="inputZip">Zip</label>
          <input type="text" class="form-control" id="inputZip">
        </div>
      </div>
      <div class="form-group">
        <div class="form-check">
          <label class="form-check-label">
              <input class="form-check-input" type="checkbox" value="">
              Check me out
              <span class="form-check-sign">
                <span class="check"></span>
              </span>
          </label>
        </div>
      </div>
      <button type="submit" class="btn btn-primary">Sign in</button>
    </form>
  </div>
</div>

Disabled forms

Add the disabled boolean attribute on an input to prevent user interactions and make it appear lighter.

<input class="form-control" id="disabledInput" type="text" placeholder="Disabled input here..." disabled>

Add the disabled attribute to a <fieldset> to disable all the controls within.

<div class="card">
  <div class="card-body">
    <form>
      <fieldset disabled>
        <div class="form-group">
          <label for="disabledTextInput">Disabled input</label>
          <input type="text" id="disabledTextInput" class="form-control" placeholder="Disabled input">
        </div>
        <div class="form-group">
          <label for="disabledSelect">Disabled select menu</label>
          <select id="disabledSelect" class="form-control">
            <option>Disabled select</option>
          </select>
        </div>
        <div class="form-check">
          <label class="form-check-label">
              <input class="form-check-input" type="checkbox" value="">
              Can't check me out
              <span class="form-check-sign">
                <span class="check"></span>
              </span>
          </label>
        </div>
        <button type="submit" class="btn btn-primary">Submit</button>
      </fieldset>
    </form>
  </div>
</div>

Caveat with anchors

By default, browsers will treat all native form controls ( <input>, <select> and <button> elements) inside a <fieldset disabled> as disabled, preventing both keyboard and mouse interactions on them. However, if your form also includes <a ... class="btn btn-*"> elements, these will only be given a style of pointer-events: none. As noted in the section about disabled state for buttons (and specifically in the sub-section for anchor elements), this CSS property is not yet standardized and isn’t fully supported in Opera 18 and below, or in Internet Explorer 10, and won’t prevent keyboard users from being able to focus or activate these links. So to be safe, use custom JavaScript to disable such links.

Cross-browser compatibility

While Bootstrap will apply these styles in all browsers, Internet Explorer 11 and below don’t fully support the disabled attribute on a <fieldset>. Use custom JavaScript to disable the fieldset in these browsers.

If you want to see more examples and properties please check the official Bootstrap Documentation.