In this tutorial we will learn to style forms in Bootstrap.

Forms are an important part of any website. It allows the user to submit data and fetch data. Bootstrap provides classes that helps us to style our forms.

Form Group class

Wrap label and controls like input or select inside .form-group for proper spacing.

<form>
  <div class="form-group">
    <!-- some more html elements goes here -->
  </div>
</form>

Form Control class

We can use the .form-control class on all textual <input>, <select> and <textarea> to set their width to 100% by default.

<form>
  <div class="form-group">
    <label for="email">Email</label>
    <input type="email"
           class="form-control"
           id="email"
           name="email">
  </div>
  <div class="form-group">
    <label for="password">Password</label>
    <input type="password"
           class="form-control"
           id="password"
           name="password">
  </div>
  <div class="form-group">
    <label for="file">Upload File</label>
    <input type="file"
           id="image"
           name="image">
  </div>
  <div class="form-group">
    <label for="description">Description</label>
    <textarea rows="3"
           class="form-control"
           id="description"
           name="description"></textarea>
  </div>
  <div class="form-group">
    <label for="file">Upload File</label>
    <select class="form-control"
           id="team"
           name="team">
      <option value="-">--- Select Team ---</option>
      <option value="team-a">Team A</option>
      <option value="team-b">Team B</option>
      <option value="team-c">Team C</option>
    </select>
  </div>
  <button type="submit"
          class="btn btn-success">
    Submit
  </button>
</form>

Output:

Inline form

To create inline form we use the .form-inline class in the opening form tag.

This only applies to forms within viewports that are at least 768px wide.

<form class="form-inline">
  <div class="form-group">
    <label for="email">Email</label>
    <input type="email"
           class="form-control">
  </div>
  <div class="form-group">
    <label for="password">Password</label>
    <input type="password"
           class="form-control">
  </div>
  <button type="submit"
          class="btn btn-primary">
    Login
  </button>
</form>

Output:

Horizontal form

To create horizontal form we use the .form-horizontal class in the opening form tag.

<form class="form-horizontal">
  <div class="form-group">
    <label for="email"
           class="col-sm-2 control-label">Email</label>
    <div class="col-sm-6">
      <input type="email"
             class="form-control">
    </div>
  </div>
  <div class="form-group">
    <label for="password"
           class="col-sm-2 control-label">Password</label>
    <div class="col-sm-6">
      <input type="password"
             class="form-control col-sm-10">
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-6">
      <button type="submit"
              class="btn btn-primary">
        Login
      </button>
    </div>
  </div>
</form>

Output:

Input file

For the input file type we don't use the .form-control class. You can use it though if you want border around it.

Without the .form-control class.

<div class="form-group">
  <label for="file">Upload File</label>
  <input type="file"
         id="image"
         name="image">
</div>

Output:

With the .form-control class.

<div class="form-group">
  <label for="file">Upload File</label>
  <input type="file"
         class="form-control"
         id="image"
         name="image">
</div>

Output:

Checkbox

When we want to allow the user to select multiple options we use the checkbox. And to style checkbox we use the .checkbox class.

<div class="checkbox">
  <label>
    <input type="checkbox"
           value="Option 1">
    Option 1
  </label>
</div>
<div class="checkbox">
  <label>
    <input type="checkbox"
           value="Option 2">
    Option 2
  </label>
</div>
<div class="checkbox">
  <label>
    <input type="checkbox"
           value="Option 3">
    Option 3
  </label>
</div>

Output:

Inline checkbox

To make the checkbox inline we use the .checkbox-inline class.

<div class="checkbox-inline">
  <label>
    <input type="checkbox"
           value="Option 1">
    Option 1
  </label>
</div>
<div class="checkbox-inline">
  <label>
    <input type="checkbox"
           value="Option 2">
    Option 2
  </label>
</div>
<div class="checkbox-inline">
  <label>
    <input type="checkbox"
           value="Option 3">
    Option 3
  </label>
</div>

Output:

Disabled checkbox

To disable a checkbox we use the .disabled class and add the disabled attribute to the input element.

<div class="checkbox">
  <label>
    <input type="checkbox"
           value="Option 1">
    Option 1
  </label>
</div>
<div class="checkbox">
  <label>
    <input type="checkbox"
           value="Option 2">
    Option 2
  </label>
</div>
<div class="checkbox disabled">
  <label>
    <input type="checkbox"
           value="Option 3"
           disabled>
    Option 3
  </label>
</div>

Output:

Radio

When we want to allow the user to select only one option from many options we use the radio.

<div class="radio">
  <label>
    <input type="radio"
           name="options"
           value="Option 1">
    Option 1
  </label>
</div>
<div class="radio">
  <label>
    <input type="radio"
           name="options"
           value="Option 2">
    Option 2
  </label>
</div>
<div class="radio">
  <label>
    <input type="radio"
           name="options"
           value="Option 3">
    Option 3
  </label>
</div>

Output:

Inline radio

To make the radio inline we use the .radio-inline class.

<div class="radio-inline">
  <label>
    <input type="radio"
           name="options"
           value="Option 1">
    Option 1
  </label>
</div>
<div class="radio-inline">
  <label>
    <input type="radio"
           name="options"
           value="Option 2">
    Option 2
  </label>
</div>
<div class="radio-inline">
  <label>
    <input type="radio"
           name="options"
           value="Option 3">
    Option 3
  </label>
</div>

Output:

Disabled radio

To disable a radio we use the .disabled class and add the disabled attribute to the input element.

<div class="radio">
  <label>
    <input type="radio"
           name="options"
           value="Option 1">
    Option 1
  </label>
</div>
<div class="radio">
  <label>
    <input type="radio"
           name="options"
           value="Option 2">
    Option 2
  </label>
</div>
<div class="radio disabled">
  <label>
    <input type="radio"
           name="options"
           value="Option 3"
           disabled>
    Option 3
  </label>
</div>

Output:

This covers some of the commonly used elements of a form. For more details you can checkout Bootstrap official website.

See you in the next tutorial.