Checkboxes & Radios

Bootstrap drastically overrides default browser styles for checkboxes and radio buttons. It replaces them with elegant, scalable SVG icons that look perfectly identical on Windows, Mac, iOS, and Android devices!

Basic Implementation

To implement natively styled Bootstrap checkboxes or radios, wrap your specific input and label identically inside a parent <div class="form-check"> element.

• The input requires the .form-check-input class.
• The label strictly requires the .form-check-label class.

<!-- Checkbox Syntax -->
<div class="form-check">
    <input class="form-check-input" type="checkbox" id="checkbox1">
    <label class="form-check-label" for="checkbox1">Remember Me</label>
</div>

<!-- Radio Syntax (Requires shared 'name' attribute!) -->
<div class="form-check">
    <input class="form-check-input" type="radio" name="subscription" id="radio1">
    <label class="form-check-label" for="radio1">Monthly</label>
</div>
<div class="form-check">
    <input class="form-check-input" type="radio" name="subscription" id="radio2">
    <label class="form-check-label" for="radio2">Yearly</label>
</div>

Toggle Switches

Bootstrap uniquely possesses a built-in switch mode. By simply adding the .form-switch modifier class onto the root .form-check wrapper element, any normal checkbox will graphically animate into a mobile-style toggle switch!

<!-- Add .form-switch to the wrapper element! -->
<div class="form-check form-switch">
    <!-- The role="switch" helps assistive screen readers identify it -->
    <input class="form-check-input" type="checkbox" role="switch" id="mySwitch">
    <label class="form-check-label" for="mySwitch">Enable Wi-Fi</label>
</div>

Inline Layout Spacing

By default, placing multiple `.form-check` layers together causes them to stack vertically block-by-block. However, if you add the .form-check-inline class to each wrapper element, the browser will seamlessly arrange them compactly side-by-side horizontally.

<div class="form-check form-check-inline">
    <input class="form-check-input" type="checkbox" id="inlineAdd1">
    <label class="form-check-label" for="inlineAdd1">1</label>
</div>
<div class="form-check form-check-inline">
    <input class="form-check-input" type="checkbox" id="inlineAdd2">
    <label class="form-check-label" for="inlineAdd2">2</label>
</div>

Toggle Buttons (Styling as Buttons)

Probably one of Bootstrap's undeniably coolest form utilities—you can visibly replace standard checkbox graphics with clickable, colorful Button styles. The underlying HTML functionality remains exactly the same as a checkbox or radio!

To implement: Omit the `.form-check` wrapper strictly. Change the input class from `.form-check-input` to genuinely simply .btn-check. Finally, apply standard `.btn` visualization classes specifically upon the adjoining <label>.

<!-- A Radio Array Styled as Buttons -->
<input type="radio" class="btn-check" name="options" id="option1" checked>
<label class="btn btn-outline-primary" for="option1">Option 1</label>

<input type="radio" class="btn-check" name="options" id="option2">
<label class="btn btn-outline-primary" for="option2">Option 2</label>

<!-- Individual Checkbox Styled as a Red Button -->
<input type="checkbox" class="btn-check" id="btnDanger">
<label class="btn btn-outline-danger" for="btnDanger">Dangerous Action</label>