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.
Add .form-check-inline to display check/radio items side by side. For switch-style checkboxes, add .form-switch to the wrapper.
<!-- 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>Use .form-switch for binary on/off settings (like notification preferences) — it communicates the toggleable nature better than a plain checkbox.