Bootstrap - Checks & radios

Ethan D. - June 1, 2024

Basic Usage

In Bootstrap, creating checkboxes and radio buttons is simple. Here's how you can create them and understand the difference between the two:

Creating a Checkbox

To create a checkbox in Bootstrap, you can use this code:

Example: Creating a Checkbox

<div class="form-check">
  <input class="form-check-input" type="checkbox" value="" id="checkboxExample">
  <label class="form-check-label" for="checkboxExample">
    Checkbox label
  </label>
</div>

In this code, we have a <div> with the class form-check, which holds the checkbox. Inside the container, we have an <input> with the class form-check-input and type checkbox. We also have a <label> with the class form-check-label that labels the checkbox.

Creating a Radio Button

To create a radio button in Bootstrap, you can use a similar structure:

Example: Creating a Radio Button

<div class="form-check">
  <input class="form-check-input" type="radio" name="radioExample" id="radioExample1" value="option1">
  <label class="form-check-label" for="radioExample1">
    Radio button label
  </label>
</div>

The code for a radio button is almost the same as the checkbox, with a few differences. The type of the <input> is set to radio, and we also include a name attribute. Radio buttons with the same name are grouped together, allowing only one option to be selected at a time.

Difference between Checkboxes and Radio Buttons

The main difference between checkboxes and radio buttons is in their function and use:

Checkboxes	Radio Buttons
Allow users to select multiple options from a group	Allow users to select only one option from a group
Each checkbox works on its own, and users can check or uncheck them as needed	When a user selects a radio button, any previously selected radio button within the same group is automatically deselected
Used when there are multiple choices, and the user can select any combination of options	Used when users must choose a single option among several alternatives

By using the right class names and structures provided by Bootstrap, you can easily create checkboxes and radio buttons in your forms. Remember to choose between checkboxes and radio buttons based on the type of user input and selection behavior you need.

Customization

Bootstrap offers ways to customize checkboxes and radio buttons to fit your design needs. Let's see how to display them inline, disable them, and apply custom styling.

Inline Checkboxes and Radios

If you want to display checkboxes or radio buttons inline, you can add the .form-check-inline class to the container <div> element.

Example: Inline Checkboxes

<div class="form-check form-check-inline">
  <input class="form-check-input" type="checkbox" id="inlineCheckbox1" value="option1">
  <label class="form-check-label" for="inlineCheckbox1">Option 1</label>
</div>
<div class="form-check form-check-inline">
  <input class="form-check-input" type="checkbox" id="inlineCheckbox2" value="option2">
  <label class="form-check-label" for="inlineCheckbox2">Option 2</label>
</div>

By adding the .form-check-inline class, the checkboxes or radio buttons will be displayed inline, side by side.

Example: Inline Radio Buttons

<div class="form-check form-check-inline">
  <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1">
  <label class="form-check-label" for="inlineRadio1">Option 1</label>
</div>
<div class="form-check form-check-inline">
  <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2">
  <label class="form-check-label" for="inlineRadio2">Option 2</label>
</div>

Disabled State

To disable a checkbox or radio button, you can add the disabled attribute to the <input> element. This will prevent the user from interacting with the input.

Example: Disabled Checkbox and Radio Button

<div class="form-check">
  <input class="form-check-input" type="checkbox" value="" id="disabledCheckbox" disabled>
  <label class="form-check-label" for="disabledCheckbox">
    Disabled checkbox
  </label>
</div>

<div class="form-check">
  <input class="form-check-input" type="radio" name="disabledRadio" id="disabledRadio" value="option1" disabled>
  <label class="form-check-label" for="disabledRadio">
    Disabled radio button
  </label>
</div>

When a checkbox or radio button is disabled, it will appear grayed out, showing that it cannot be selected or changed. Bootstrap adjusts the styling of disabled inputs to show their state.

Custom Styling

Bootstrap lets you customize the look of checkboxes and radio buttons using custom CSS classes. You can change the size, color, and other visual aspects to match your design.

To apply custom styling, you can add your own CSS classes to the <input> or <label> elements and define the styles in your CSS file.

Example: Custom Checkbox Styling

<div class="form-check">
  <input class="form-check-input custom-checkbox" type="checkbox" value="" id="customCheckbox">
  <label class="form-check-label" for="customCheckbox">
    Custom checkbox
  </label>
</div>

.custom-checkbox {
  width: 20px;
  height: 20px;
  background-color: #f0f0f0;
  border-radius: 4px;
}

You can change the width, height, background color, border radius, and other properties to get the look you want.

Remember to use proper class names and selectors to target the specific checkboxes or radio buttons you want to style, making sure your custom styles don't conflict with Bootstrap's default styles.

By following these customization techniques, you can change the display, state, and look of checkboxes and radio buttons in Bootstrap to fit your application's design needs.

Integration with Forms

To use checkboxes and radio buttons in a Bootstrap form, place them inside a <form> element with other form controls like text inputs, selects, and textareas.

Example: HTML for checkboxes and radio buttons

<form>
  <div class="form-group">
    <label>Checkbox Options</label>
    <div class="form-check">
      <input class="form-check-input" type="checkbox" id="checkbox1" value="option1">
      <label class="form-check-label" for="checkbox1">Option 1</label>
    </div>
    <div class="form-check">
      <input class="form-check-input" type="checkbox" id="checkbox2" value="option2">
      <label class="form-check-label" for="checkbox2">Option 2</label>
    </div>
  </div>

  <div class="form-group">
    <label>Radio Button Options</label>
    <div class="form-check">
      <input class="form-check-input" type="radio" name="radioOptions" id="radio1" value="option1">
      <label class="form-check-label" for="radio1">Option 1</label>
    </div>
    <div class="form-check">
      <input class="form-check-input" type="radio" name="radioOptions" id="radio2" value="option2">
      <label class="form-check-label" for="radio2">Option 2</label>
    </div>
  </div>
</form>

The checkboxes and radio buttons are grouped inside <div> elements with the class form-group. This helps organize and space the form controls.

Validation and Error Handling

Bootstrap has classes for form validation and error handling. When a checkbox or radio button is required and not selected, add the is-invalid class to the <input> element to show an error state.

Example: HTML for validation and error handling

<form>
  <div class="form-group">
    <label>Required Checkbox</label>
    <div class="form-check">
      <input class="form-check-input is-invalid" type="checkbox" id="requiredCheckbox" required>
      <label class="form-check-label" for="requiredCheckbox">I agree to the terms and conditions</label>
      <div class="invalid-feedback">Please agree to the terms and conditions</div>
    </div>
  </div>

  <div class="form-group">
    <label>Required Radio Buttons</label>
    <div class="form-check">
      <input class="form-check-input is-invalid" type="radio" name="requiredRadio" id="requiredRadio1" value="option1" required>
      <label class="form-check-label" for="requiredRadio1">Option 1</label>
    </div>
    <div class="form-check">
      <input class="form-check-input is-invalid" type="radio" name="requiredRadio" id="requiredRadio2" value="option2" required>
      <label class="form-check-label" for="requiredRadio2">Option 2</label>
      <div class="invalid-feedback">Please select an option</div>
    </div>
  </div>
</form>

The is-invalid class is added to the <input> elements to show an error state when the required checkbox or radio button is not selected. The invalid-feedback class displays an error message below the form control.

Bootstrap's form validation classes and error handling let you give clear feedback to users when they miss required fields or make invalid selections.