Bootstrap Checks & Radios

Overview

Bootstrap provides custom styled checkboxes and radio buttons.

Checkboxes

<div class="form-check">
    <input class="form-check-input" type="checkbox" id="check1">
    <label class="form-check-label" for="check1">
        Checkbox option
    </label>
</div>

<div class="form-check">
    <input class="form-check-input" type="checkbox" id="check2" checked>
    <label class="form-check-label" for="check2">
        Checked by default
    </label>
</div>

<div class="form-check">
    <input class="form-check-input" type="checkbox" id="check3" disabled>
    <label class="form-check-label" for="check3">
        Disabled checkbox
    </label>
</div>

Radio Buttons

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

Switches

<div class="form-check form-switch">
    <input class="form-check-input" type="checkbox" id="switch1">
    <label class="form-check-label" for="switch1">
        Switch option
    </label>
</div>

Inline

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

Next Steps

Next: Bootstrap Range →