Bootstrap gives you all the tools to easily customize your forms. With Bootstrap, you can add new form “controls,” like checkboxes or text areas, with an already established styling. This article will show you the basic ways to customize your form and the code needed to include each control.

Topics:

Setting Up Spacing

In order to have a tidy form, you need to first understand how Bootstrap sets up spacing.

Form-Group Class

For all of these forms, you need to encase each label and control in a <div> element with a class=”form-group”. Controls and labels within these <div> elements have styled spacing.Form-Group Image Example

Each element and label needs to be in its own form-group class. 

<form> 
<div class=”form-group”>
  <label for="example">Email Address</label>
  <input type="email" class="form-control" placeholder="Enter your email">
</div>

<div class=”form-group”>
  <label for="example">Password</label>
  <input type="password" class="form-control" placeholder="Enter your password">
</div>

<button type="submit" class="btn btn-default">Login</button>
</form>

Form-Control Class

The form-control class sets the width of the control to 100%, causing it to span the width of the form and resize with the window. This can be used on input and select controls.

Form-Control in a Selection

This is how a select control would be formatted with form-control included.

<select class="form-control">
  <option>Option 1</option>
  <option>Option 2</option>
  <option>Option 3</option>
  <option>Option 4</option>
  <option>Option 5</option>
</select>
Select Form Control Difference image
This is what a select would look like with and without the form-control class.

Form-Control in an Input

This is how an input control would be formatted with the form-control added.

<input type="text" class="form-control">
Form-Control Input difference image
This is what an input looks like with and without the form-control class.

Controls to Add

Controls, like text fields and checkboxes, are elements that can be easily added to your form.

Inputs

Inputs are fields where the user can enter text.

Text input example image

This is a basic input example using the HTML5 “text” attribute. The type declares the kind of input. The placeholder defines text that is displayed within the input box.

Bootstrap inputs support HTML5 input types, meaning that you can use any of the following types:

  • color
  • date
  • datetime
  • datetime-local
  • email
  • month
  • number
  • password
  • search
  • tel
  • text
  • time
  • url
  • week

These types can be declared by adding a type=”—“ to your input, like in the example. If you wanted to add an email input, you would change it to type=“email”

Email input image example

<input type="email" class="form-control" placeholder="email input">

Keep in mind that you need to include an input type if you want your control to be correctly styled.

Text Area

The text area control is an area that allows for large quantities of text, such as would be used for a comment section.

Textarea example image

<textarea class="form-control" rows="3" placeholder="This is the text area!"></textarea>

When adding a text area, you can customize the size by declaring how many rows you want it to span. Since Bootstrap is built on rows and columns, you can make the text area smaller or larger by increasing or decreasing the number of rows.

Checkboxes

The checkboxes allow users to select multiple options. By default, checkboxes are displayed vertically. However, you can change the checkboxes to display horizontally by changing the type to type=”checkbox-inline”.

Basic Checkboxes

basic checkboxes image

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

Inline Checkbox

Inline Checkboxes image

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

 

The inline checkboxes are set up differently than the basic checkboxes. In the inline checkbox code, the <label> element is the one that is given the class=”checkbox-inline”. However, if you look at the basic checkbox code, you will see that the class=”checkbox” is declared in a <div> element, not the <label> element.

Radio Button

A radio button is similar to a checkbox. However, only one radio button may be selected at a time, while checkboxes may have multiple selected. As with checkboxes, the default is to display the radio buttons vertically, though you can also change the code to display them horizontally.

Basic Radio Button

basic radio button image

<div class="radio">
  <label>
    <input type="radio" name="radioButtons" id="Radio1" value="opt1" checked>
    Option 1
  </label>
</div>
<div class="radio">
  <label>
    <input type="radio" name="radioButtons" id="Radio2" value="opt2">
    Option 2
  </label>
</div>
<div class="radio">
  <label>
    <input type="radio" name="radioButtons" id="Radio3" value="opt3">
    Option 3
  </label>
</div>

Be sure to include the name and id attributes in your radio button code. If you don’t, the user will be able to select multiple radio buttons at the same time.

Inline Radio Button

radio inline image

<label class="radio-inline">
  <input type="radio" name="radioInline" id="inlineRadio1" value="inlineOpt1"> Option 1
</label>
<label class="radio-inline">
  <input type="radio" name="radioInline" id="inlineRadio2" value="inlineOpt2"> Option 2
</label>
<label class="radio-inline">
  <input type="radio" name="radioInline" id="inlineRadio3" value="inlineOpt3"> Option 3
</label>

As with the checkboxes, the inline radio button code differs from the basic radio button code. The class=“radio-inline” is situated in the <label> element in the inline radio code instead of in a <div> element, like it is in the basic radio code.

Selection Menus

Drop-down selection allows the user to select an option(s) from a list of options. You can create a drop-down selection that only allows one option to be selected. To allow users to select more than one option, you can create a multiple selection menu.

Drop-down Selection (One Option Allowed)

Drop-Down selection image

<select class="form-control">
  <option>Option 1</option>
  <option>Option 2</option>
  <option>Option 3</option>
  <option>Option 4</option>
  <option>Option 5</option>
</select>

Multiple Selection Menu (Multiple Options Allowed)

Multiple Option Selection Menu image

<select multiple class="form-control">
  <option>Option 1</option>
  <option>Option 2</option>
  <option>Option 3</option>
  <option>Option 4</option>
  <option>Option 5</option>
</select>

The only difference between the two is within the <select> element. In the drop-down selection, it reads <select class=”form-control”>. However, in the multiple selection menu, it is shown as <select multiple class=”form-control”>.

Add Help Text to a Component

You can add help text to your controls. Bootstrap will automatically format the text as help text. Simply add text below the control code and add class=”help-block” to the text’s element (in the example, it is <span>).

Help text image

<label>Help Text Example</label>
<input type="text" class="form-control">
<span class="help-block">This is the help text. If there is a lot of text, it will extend to multiple lines</span>