Checkbox
Copy
<!-- Default checkbox --><div class="form-check"><input class="form-check-input" type="checkbox" value="" id="defaultCheckbox"><label class="form-check-label" for="defaultCheckbox"> Default checkbox</label></div><!-- Checked checkbox --><div class="form-check"><input class="form-check-input" type="checkbox" value="" id="checkedCheckbox" checked><label class="form-check-label" for="checkedCheckbox">Checked checkbox</label></div><!-- Indeterminate checkbox --><div class="form-check"><input class="form-check-input indeterminate" type="checkbox" value="" id="indeterminateCheckbox"><label class="form-check-label" for="indeterminateCheckbox">Indeterminate checkbox</label></div><!-- Disabled checkbox --><div class="form-check"><input class="form-check-input" type="checkbox" value="" id="disabledCheckbox" disabled><label class="form-check-label" for="disabledCheckbox">Disabled checkbox</label></div><!-- Disabled checked checkbox --><div class="form-check"><input class="form-check-input" type="checkbox" value="" id="disabledCheckbox2" checked disabled><label class="form-check-label" for="disabledCheckbox2">Disabled checked checkbox</label></div>Colorful Checkbox
Copy
<!-- Success checkbox --><div class="form-check"><input class="form-check-input form-check-success" type="checkbox" value="" id="successCheckbox" checked><label class="form-check-label" for="successCheckbox"> Success checkbox</label></div><!-- Danger checkbox --><div class="form-check"><input class="form-check-input form-check-danger" type="checkbox" value="" id="dangerCheckbox" checked><label class="form-check-label" for="dangerCheckbox"> Danger checkbox</label></div><!-- Warning checkbox --><div class="form-check"><input class="form-check-input form-check-warning" type="checkbox" value="" id="warningCheckbox" checked><label class="form-check-label" for="warningCheckbox"> Warning checkbox</label></div><!-- Info checkbox --><div class="form-check"><input class="form-check-input form-check-info" type="checkbox" value="" id="infoCheckbox" checked><label class="form-check-label" for="infoCheckbox"> Info checkbox</label></div><!-- Secondary checkbox --><div class="form-check"><input class="form-check-input form-check-secondary" type="checkbox" value="" id="secondaryCheckbox" checked><label class="form-check-label" for="secondaryCheckbox"> Secondary checkbox</label></div><!-- Light checkbox --><div class="form-check"><input class="form-check-input form-check-light" type="checkbox" value="" id="lightCheckbox" checked><label class="form-check-label" for="lightCheckbox"> Light checkbox</label></div><!-- Dark checkbox --><div class="form-check"><input class="form-check-input form-check-dark" type="checkbox" value="" id="darkCheckbox" checked><label class="form-check-label" for="darkCheckbox"> Dark checkbox</label></div>Checkbox card
Copy
<!-- List Checkbox --><div class="list-group"><label class="list-group-item" for="listCheckbox1"><input class="form-check-input me-2" id="listCheckbox1" type="checkbox" value="">List Checkbox 1</label><label class="list-group-item" for="listCheckbox2"><input class="form-check-input me-2" id="listCheckbox2" type="checkbox" value="" checked>List Checkbox 2</label><label class="list-group-item" for="listCheckbox3"><input class="form-check-input me-2" id="listCheckbox3" type="checkbox" value="">List Checkbox 3</label><label class="list-group-item" for="listCheckbox4"><input class="form-check-input me-2" id="listCheckbox4" type="checkbox" value="">List Checkbox 4</label></div>