Checkboxes

Basic examples

Темное на светлом

Светлое на темном

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

Sizing

<div class="sf-form-check">
    <input class="sf-form-check-input sf-form-check-input-lg" type="checkbox" id="defaultCheckboxLG">
    <label for="defaultCheckboxLG">Large</label>
</div>
<div class="sf-form-check">
    <input class="sf-form-check-input" type="checkbox" id="defaultCheckboxMD">
    <label for="defaultCheckboxMD">Middle</label>
</div>
<div class="sf-form-check">
    <input class="sf-form-check-input sf-form-check-input-sm" type="checkbox" id="defaultCheckboxSM">
    <label for="defaultCheckboxSM">Small</label>
</div>

Colors checkboxes Classic

Темное на светлом

Светлое на темном

<div class="sf-form-check check-default">
    <input class="sf-form-check-input" type="checkbox" id="inlineFormCheckbox100">
    <label for="inlineFormCheckbox100">Default</label>
</div>
<div class="sf-form-check check-primary">
    <input type="checkbox" class="sf-form-check-input" id="inlineFormCheckbox200">
    <label for="inlineFormCheckbox200">Primary</label>
</div>
<div class="sf-form-check check-secondary">
    <input class="sf-form-check-input" type="checkbox" id="inlineFormCheckbox300">
    <label for="inlineFormCheckbox300">Secondary</label>
</div>
<div class="sf-form-check check-success">
    <input class="sf-form-check-input" type="checkbox" id="inlineFormCheckbox400">
    <label for="inlineFormCheckbox400">Success</label>
</div>
<div class="sf-form-check check-info">
    <input class="sf-form-check-input" type="checkbox" id="inlineFormCheckbox500">
    <label for="inlineFormCheckbox500">Info</label>
</div>
<div class="sf-form-check check-warning">
    <input class="sf-form-check-input" type="checkbox" id="inlineFormCheckbox600">
    <label for="inlineFormCheckbox600">Warning</label>
</div>
<div class="sf-form-check check-danger">
    <input class="sf-form-check-input" type="checkbox" id="inlineFormCheckbox700">
    <label for="inlineFormCheckbox700">Danger</label>
</div>