CodeBlessU
learn code with examples

Bootstrap Forms Input Checkbox & Radio

Example links are referring to Bootstrap official site.

Bootstrap 5 Forms Input Checkbox

This example shows how to use bootstrap classes for input type="checkbox". Its 3-step process to define bootstrap 5 style for input checkbox.

  1. Create div class="form-check" to form pair of input type="checkbox" and label.
  2. Use class="form-check-input" for input type="checkbox".
  3. Use class="form-check-label" for label.
Example
<div class="form-check">
  <input class="form-check-input" type="checkbox" value="" id="checkboxId1" checked>
  <label class="form-check-label" for="checkboxId1">
    Checkbox Example
  </label>
</div>

  • Use div class="form-check form-check-inline" to make checkbox inline instead of vertical stack. Example
  • Bootstrap classes for checkbox recognizes following cases and defines/updates style for it.
    • If disabled attribute is present, it updates style. Example

Bootstrap 5 Forms Input Radio

Style classes for input type="radio" is same as Input Checkbox. Please refer above section of Bootstrap 5 Forms Input Checkbox. Example

<div class="form-check">
  <input class="form-check-input" type="radio" id="radioID1" checked>
  <label class="form-check-label" for="radioID1">
    Radio Example
  </label>
</div>

In this page...

Copyright © All rights reserved.