Styling Form Input Elements (Checkboxes, Radio Buttons) with Bootstrap

Learn how to style checkboxes and radio buttons using Bootstrap for improved visual appeal and user experience. This tutorial demonstrates Bootstrap's utility classes for customizing checkbox and radio button styles, arrangement (horizontal, vertical), and provides examples for creating user-friendly forms.

Styling Form Input Elements with Bootstrap

Bootstrap Checkbox and Radio Buttons

Bootstrap provides styling for checkboxes and radio buttons, improving their visual appeal and making them more user-friendly. Checkboxes allow multiple selections, while radio buttons allow only a single selection from a set of options. Bootstrap offers utility classes to arrange these horizontally or vertically.

Checkboxes

This example shows a basic checkbox. To make checkboxes appear on the same line, use the `.checkbox-inline` class.

<input type="checkbox" id="option1">
<label for="option1">Option 1</label><br>
<input type="checkbox" id="option2" class="checkbox-inline">
<label for="option2">Option 2</label>

Radio Buttons

This example shows a basic radio button. To make radio buttons appear horizontally, use the `.radio-inline` class.

<input type="radio" name="options" id="option1">
<label for="option1">Option 1</label><br>
<input type="radio" name="options" id="option2" class="radio-inline">
<label for="option2">Option 2</label>

Bootstrap 4 Form Controls

Bootstrap 4 styles various form controls:

• <input> (text, password, email, number, etc.)
• <textarea>
• <select>
• Checkboxes and Radio Buttons

To apply Bootstrap styling to these elements, add the class `form-control` to them.

Examples: Bootstrap Form Controls

The examples below show how Bootstrap styles different form elements. You'll need to include the necessary Bootstrap CSS to see the styling applied.

Input Fields

This example shows basic text and password input fields styled using Bootstrap.

<input type="text" class="form-control" placeholder="Name">
<input type="password" class="form-control" placeholder="Password">

Textarea

This example shows a textarea for multiline text input.

<textarea class="form-control" rows="3">Comment</textarea>

Select List

This example shows single and multiple select list dropdowns.

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

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