Bootstrap

About Lesson

BS5 Checks and Radios

Checkboxes allow multiple selections, whereas radio buttons restrict selection to one option.

.form-check → Provides spacing and styling.
.form-check-input → Styles the checkbox or radio button.
.form-check-label → Associates labels with inputs for better accessibility.

1. Checkbox Example:

HTML

    <div class="form-check">
      <input class="form-check-input" type="checkbox" id="check1">
      <label class="form-check-label" for="check1">Check me out 1</label>
    </div>
    <div class="form-check">
      <input class="form-check-input" type="checkbox" id="check2">
      <label class="form-check-label" for="check2">Check me out  2</label>
    </div>

Output:

2. Radio Example:

HTML

    <div class="form-check">
      <input class="form-check-input" type="radio" name="options" id="radio1">
      <label class="form-check-label" for="radio1">Option 1</label>
    </div>
    <div class="form-check">
      <input class="form-check-input" type="radio" name="options" id="radio2">
      <label class="form-check-label" for="radio2">Option 2</label>
    </div>

Output: