Bootstrap 3.3.7 Forms and GUI Components

Basic classes related to forms

The basis for user input is the form. Forms are created by combining the HTML <form> tag with different control tags. Bootstrap does not change that foundation, but it provides its own visual styles.

<form>
  <div class="form-group">
    <label for="foo">Label</label>
    <input type="text" class="form-control" id="foo">
  </div>
</form>

class="form-group"

Each form control is usually grouped with a <div class="form-group">. Bootstrap then arranges each group as a form item.

class="form-control"

Text-related controls and <select> elements use class="form-control". This applies Bootstrap’s form styling to controls such as <input type="text">, <input type="password">, <textarea>, and <select>.

<form>
  <div class="form-group">
    <label for="txt1">Text:</label>
    <input type="text" class="form-control" id="txt1">
  </div>
  <div class="form-group">
    <label for="pw1">Password:</label>
    <input type="password" class="form-control" id="pw1">
  </div>
  <div class="form-group">
    <label for="ta1">Text Area:</label>
    <textarea class="form-control" id="ta1" rows="3"></textarea>
  </div>
  <div class="form-group">
    <label for="sl1">Select:</label>
    <select class="form-control" id="sl1">
      <option>One</option>
      <option>Two</option>
      <option>Three</option>
    </select>
  </div>
  <div class="form-group">
    <input type="button" class="btn" value="Click">
  </div>
</form>

Checkboxes and radio buttons

Checkboxes and radio buttons do not use form-group and form-control. They have dedicated classes.

Checkbox

<div class="checkbox">
  <label for="foo">
    <input type="checkbox" id="foo">
    Label
  </label>
</div>

Radio button

<div class="radio">
  <label for="foo">
    <input type="radio" id="foo">
    Label
  </label>
</div>

Use <label> together with the input so the label and control behave as one item.

Disabled class

To make a checkbox or radio button unavailable, set the disabled attribute on the input and add the disabled class to the wrapping <div>. The mouse cursor then indicates that the control cannot be used.

<div class="checkbox disabled">
  <label for="cb2">
    <input type="checkbox" id="cb2" disabled>
    Check Box
  </label>
</div>

Inline forms

Forms are normally arranged vertically. If there are only a few input items and you want them horizontally, use an inline form.

<form class="form-inline">

The controls are written the same way as normal forms, using form-group and form-control. When the available width becomes narrow, Bootstrap automatically stacks the controls vertically.