SyntaxStudy
Sign Up
Bootstrap Bootstrap Checkboxes and Radios
Bootstrap Beginner 5 min read

Bootstrap Checkboxes and Radios

Bootstrap Checkboxes and Radios

Bootstrap styles checkboxes and radio buttons using the .form-check wrapper class. This replaces the browser default appearance with a consistent, customizable UI across all browsers.

Inline Layout

Add .form-check-inline to display check/radio items side by side. For switch-style checkboxes, add .form-switch to the wrapper.

Example
<!-- Checkboxes -->
<div class="form-check">
  <input class="form-check-input" type="checkbox" id="cb1" checked>
  <label class="form-check-label" for="cb1">Option 1</label>
</div>
<div class="form-check">
  <input class="form-check-input" type="checkbox" id="cb2">
  <label class="form-check-label" for="cb2">Option 2</label>
</div>

<!-- Switch style -->
<div class="form-check form-switch">
  <input class="form-check-input" type="checkbox" role="switch" id="sw1">
  <label class="form-check-label" for="sw1">Enable feature</label>
</div>

<!-- Inline radios -->
<div class="form-check form-check-inline">
  <input class="form-check-input" type="radio" name="r" id="r1" value="1">
  <label class="form-check-label" for="r1">Yes</label>
</div>
<div class="form-check form-check-inline">
  <input class="form-check-input" type="radio" name="r" id="r2" value="2">
  <label class="form-check-label" for="r2">No</label>
</div>
Pro Tip

Use .form-switch for binary on/off settings (like notification preferences) — it communicates the toggleable nature better than a plain checkbox.