core-logo

Bootstrap switches

On this page:



Switch default

<label class="c-switch c-switch-primary">
  <input type="checkbox" class="c-switch-input" checked>
  <span class="c-switch-slider"></span>
</label>
<label class="c-switch c-switch-secondary">
  <input type="checkbox" class="c-switch-input" checked>
  <span class="c-switch-slider"></span>
</label>
<label class="c-switch c-switch-success">
  <input type="checkbox" class="c-switch-input" checked>
  <span class="c-switch-slider"></span>
</label>
<label class="c-switch c-switch-danger">
  <input type="checkbox" class="c-switch-input" checked>
  <span class="c-switch-slider"></span>
</label>
<label class="c-switch c-switch-warning">
  <input type="checkbox" class="c-switch-input" checked>
  <span class="c-switch-slider"></span>
</label>
<label class="c-switch c-switch-info">
  <input type="checkbox" class="c-switch-input" checked>
  <span class="c-switch-slider"></span>
</label>
<label class="c-switch c-switch-light">
  <input type="checkbox" class="c-switch-input" checked>
  <span class="c-switch-slider"></span>
</label>
<label class="c-switch c-switch-dark">
  <input type="checkbox" class="c-switch-input" checked>
  <span class="c-switch-slider"></span>
</label>

Switch default - pills

<label class="c-switch c-switch-pill c-switch-primary">
  <input type="checkbox" class="c-switch-input" checked>
  <span class="c-switch-slider"></span>
</label>
<label class="c-switch c-switch-pill c-switch-secondary">
  <input type="checkbox" class="c-switch-input" checked>
  <span class="c-switch-slider"></span>
</label>
<label class="c-switch c-switch-pill c-switch-success">
  <input type="checkbox" class="c-switch-input" checked>
  <span class="c-switch-slider"></span>
</label>
<label class="c-switch c-switch-pill c-switch-danger">
  <input type="checkbox" class="c-switch-input" checked>
  <span class="c-switch-slider"></span>
</label>
<label class="c-switch c-switch-pill c-switch-warning">
  <input type="checkbox" class="c-switch-input" checked>
  <span class="c-switch-slider"></span>
</label>
<label class="c-switch c-switch-pill c-switch-info">
  <input type="checkbox" class="c-switch-input" checked>
  <span class="c-switch-slider"></span>
</label>
<label class="c-switch c-switch-pill c-switch-light">
  <input type="checkbox" class="c-switch-input" checked>
  <span class="c-switch-slider"></span>
</label>
<label class="c-switch c-switch-pill c-switch-dark">
  <input type="checkbox" class="c-switch-input" checked>
  <span class="c-switch-slider"></span>
</label>

Switch outline

<label class="c-switch c-switch-outline-primary">
  <input type="checkbox" class="c-switch-input" checked>
  <span class="c-switch-slider"></span>
</label>
<label class="c-switch c-switch-outline-secondary">
  <input type="checkbox" class="c-switch-input" checked>
  <span class="c-switch-slider"></span>
</label>
<label class="c-switch c-switch-outline-success">
  <input type="checkbox" class="c-switch-input" checked>
  <span class="c-switch-slider"></span>
</label>
<label class="c-switch c-switch-outline-danger">
  <input type="checkbox" class="c-switch-input" checked>
  <span class="c-switch-slider"></span>
</label>
<label class="c-switch c-switch-outline-warning">
  <input type="checkbox" class="c-switch-input" checked>
  <span class="c-switch-slider"></span>
</label>
<label class="c-switch c-switch-outline-info">
  <input type="checkbox" class="c-switch-input" checked>
  <span class="c-switch-slider"></span>
</label>
<label class="c-switch c-switch-outline-light">
  <input type="checkbox" class="c-switch-input" checked>
  <span class="c-switch-slider"></span>
</label>
<label class="c-switch c-switch-outline-dark">
  <input type="checkbox" class="c-switch-input" checked>
  <span class="c-switch-slider"></span>
</label>

Switch outline - pills

<label class="c-switch c-switch-pill c-switch-outline-primary">
  <input type="checkbox" class="c-switch-input" checked>
  <span class="c-switch-slider"></span>
</label>
<label class="c-switch c-switch-pill c-switch-outline-secondary">
  <input type="checkbox" class="c-switch-input" checked>
  <span class="c-switch-slider"></span>
</label>
<label class="c-switch c-switch-pill c-switch-outline-success">
  <input type="checkbox" class="c-switch-input" checked>
  <span class="c-switch-slider"></span>
</label>
<label class="c-switch c-switch-pill c-switch-outline-danger">
  <input type="checkbox" class="c-switch-input" checked>
  <span class="c-switch-slider"></span>
</label>
<label class="c-switch c-switch-pill c-switch-outline-warning">
  <input type="checkbox" class="c-switch-input" checked>
  <span class="c-switch-slider"></span>
</label>
<label class="c-switch c-switch-pill c-switch-outline-info">
  <input type="checkbox" class="c-switch-input" checked>
  <span class="c-switch-slider"></span>
</label>
<label class="c-switch c-switch-pill c-switch-outline-light">
  <input type="checkbox" class="c-switch-input" checked>
  <span class="c-switch-slider"></span>
</label>
<label class="c-switch c-switch-pill c-switch-outline-dark">
  <input type="checkbox" class="c-switch-input" checked>
  <span class="c-switch-slider"></span>
</label>

Switch outline alternative

<label class="c-switch c-switch-outline-primary-alt">
  <input type="checkbox" class="c-switch-input" checked>
  <span class="c-switch-slider"></span>
</label>
<label class="c-switch c-switch-outline-secondary-alt">
  <input type="checkbox" class="c-switch-input" checked>
  <span class="c-switch-slider"></span>
</label>
<label class="c-switch c-switch-outline-success-alt">
  <input type="checkbox" class="c-switch-input" checked>
  <span class="c-switch-slider"></span>
</label>
<label class="c-switch c-switch-outline-danger-alt">
  <input type="checkbox" class="c-switch-input" checked>
  <span class="c-switch-slider"></span>
</label>
<label class="c-switch c-switch-outline-warning-alt">
  <input type="checkbox" class="c-switch-input" checked>
  <span class="c-switch-slider"></span>
</label>
<label class="c-switch c-switch-outline-info-alt">
  <input type="checkbox" class="c-switch-input" checked>
  <span class="c-switch-slider"></span>
</label>
<label class="c-switch c-switch-outline-light-alt">
  <input type="checkbox" class="c-switch-input" checked>
  <span class="c-switch-slider"></span>
</label>
<label class="c-switch c-switch-outline-dark-alt">
  <input type="checkbox" class="c-switch-input" checked>
  <span class="c-switch-slider"></span>
</label>

Switch outline alternative - pills

<label class="c-switch c-switch-pill c-switch-outline-primary-alt">
  <input type="checkbox" class="c-switch-input" checked>
  <span class="c-switch-slider"></span>
</label>
<label class="c-switch c-switch-pill c-switch-outline-secondary-alt">
  <input type="checkbox" class="c-switch-input" checked>
  <span class="c-switch-slider"></span>
</label>
<label class="c-switch c-switch-pill c-switch-outline-success-alt">
  <input type="checkbox" class="c-switch-input" checked>
  <span class="c-switch-slider"></span>
</label>
<label class="c-switch c-switch-pill c-switch-outline-danger-alt">
  <input type="checkbox" class="c-switch-input" checked>
  <span class="c-switch-slider"></span>
</label>
<label class="c-switch c-switch-pill c-switch-outline-warning-alt">
  <input type="checkbox" class="c-switch-input" checked>
  <span class="c-switch-slider"></span>
</label>
<label class="c-switch c-switch-pill c-switch-outline-info-alt">
  <input type="checkbox" class="c-switch-input" checked>
  <span class="c-switch-slider"></span>
</label>
<label class="c-switch c-switch-pill c-switch-outline-light-alt">
  <input type="checkbox" class="c-switch-input" checked>
  <span class="c-switch-slider"></span>
</label>
<label class="c-switch c-switch-pill c-switch-outline-dark-alt">
  <input type="checkbox" class="c-switch-input" checked>
  <span class="c-switch-slider"></span>
</label>

Switch with text

<label class="c-switch c-switch-label c-switch-primary">
  <input type="checkbox" class="c-switch-input" checked>
  <span class="c-switch-slider" data-checked="On" data-unchecked="Off"></span>
</label>
<label class="c-switch c-switch-label c-switch-secondary">
  <input type="checkbox" class="c-switch-input" checked>
  <span class="c-switch-slider" data-checked="On" data-unchecked="Off"></span>
</label>
<label class="c-switch c-switch-label c-switch-success">
  <input type="checkbox" class="c-switch-input" checked>
  <span class="c-switch-slider" data-checked="On" data-unchecked="Off"></span>
</label>
<label class="c-switch c-switch-label c-switch-danger">
  <input type="checkbox" class="c-switch-input" checked>
  <span class="c-switch-slider" data-checked="On" data-unchecked="Off"></span>
</label>
<label class="c-switch c-switch-label c-switch-warning">
  <input type="checkbox" class="c-switch-input" checked>
  <span class="c-switch-slider" data-checked="On" data-unchecked="Off"></span>
</label>
<label class="c-switch c-switch-label c-switch-info">
  <input type="checkbox" class="c-switch-input" checked>
  <span class="c-switch-slider" data-checked="On" data-unchecked="Off"></span>
</label>
<label class="c-switch c-switch-label c-switch-light">
  <input type="checkbox" class="c-switch-input" checked>
  <span class="c-switch-slider" data-checked="On" data-unchecked="Off"></span>
</label>
<label class="c-switch c-switch-label c-switch-dark">
  <input type="checkbox" class="c-switch-input" checked>
  <span class="c-switch-slider" data-checked="On" data-unchecked="Off"></span>
</label>

Switch with text - pills

<label class="c-switch c-switch-pill c-switch-label c-switch-primary">
  <input type="checkbox" class="c-switch-input" checked>
  <span class="c-switch-slider" data-checked="On" data-unchecked="Off"></span>
</label>
<label class="c-switch c-switch-pill c-switch-label c-switch-secondary">
  <input type="checkbox" class="c-switch-input" checked>
  <span class="c-switch-slider" data-checked="On" data-unchecked="Off"></span>
</label>
<label class="c-switch c-switch-pill c-switch-label c-switch-success">
  <input type="checkbox" class="c-switch-input" checked>
  <span class="c-switch-slider" data-checked="On" data-unchecked="Off"></span>
</label>
<label class="c-switch c-switch-pill c-switch-label c-switch-danger">
  <input type="checkbox" class="c-switch-input" checked>
  <span class="c-switch-slider" data-checked="On" data-unchecked="Off"></span>
</label>
<label class="c-switch c-switch-pill c-switch-label c-switch-warning">
  <input type="checkbox" class="c-switch-input" checked>
  <span class="c-switch-slider" data-checked="On" data-unchecked="Off"></span>
</label>
<label class="c-switch c-switch-pill c-switch-label c-switch-info">
  <input type="checkbox" class="c-switch-input" checked>
  <span class="c-switch-slider" data-checked="On" data-unchecked="Off"></span>
</label>
<label class="c-switch c-switch-pill c-switch-label c-switch-light">
  <input type="checkbox" class="c-switch-input" checked>
  <span class="c-switch-slider" data-checked="On" data-unchecked="Off"></span>
</label>
<label class="c-switch c-switch-pill c-switch-label c-switch-dark">
  <input type="checkbox" class="c-switch-input" checked>
  <span class="c-switch-slider" data-checked="On" data-unchecked="Off"></span>
</label>

Switch with text outline

<label class="c-switch c-switch-label c-switch-outline-primary">
  <input type="checkbox" class="c-switch-input" checked>
  <span class="c-switch-slider" data-checked="On" data-unchecked="Off"></span>
</label>
<label class="c-switch c-switch-label c-switch-outline-secondary">
  <input type="checkbox" class="c-switch-input" checked>
  <span class="c-switch-slider" data-checked="On" data-unchecked="Off"></span>
</label>
<label class="c-switch c-switch-label c-switch-outline-success">
  <input type="checkbox" class="c-switch-input" checked>
  <span class="c-switch-slider" data-checked="On" data-unchecked="Off"></span>
</label>
<label class="c-switch c-switch-label c-switch-outline-danger">
  <input type="checkbox" class="c-switch-input" checked>
  <span class="c-switch-slider" data-checked="On" data-unchecked="Off"></span>
</label>
<label class="c-switch c-switch-label c-switch-outline-warning">
  <input type="checkbox" class="c-switch-input" checked>
  <span class="c-switch-slider" data-checked="On" data-unchecked="Off"></span>
</label>
<label class="c-switch c-switch-label c-switch-outline-info">
  <input type="checkbox" class="c-switch-input" checked>
  <span class="c-switch-slider" data-checked="On" data-unchecked="Off"></span>
</label>
<label class="c-switch c-switch-label c-switch-outline-light">
  <input type="checkbox" class="c-switch-input" checked>
  <span class="c-switch-slider" data-checked="On" data-unchecked="Off"></span>
</label>
<label class="c-switch c-switch-label c-switch-outline-dark">
  <input type="checkbox" class="c-switch-input" checked>
  <span class="c-switch-slider" data-checked="On" data-unchecked="Off"></span>
</label>

Switch with text outline - pills

<label class="c-switch c-switch-pill c-switch-label c-switch-outline-primary">
  <input type="checkbox" class="c-switch-input" checked>
  <span class="c-switch-slider" data-checked="On" data-unchecked="Off"></span>
</label>
<label class="c-switch c-switch-pill c-switch-label c-switch-outline-secondary">
  <input type="checkbox" class="c-switch-input" checked>
  <span class="c-switch-slider" data-checked="On" data-unchecked="Off"></span>
</label>
<label class="c-switch c-switch-pill c-switch-label c-switch-outline-success">
  <input type="checkbox" class="c-switch-input" checked>
  <span class="c-switch-slider" data-checked="On" data-unchecked="Off"></span>
</label>
<label class="c-switch c-switch-pill c-switch-label c-switch-outline-danger">
  <input type="checkbox" class="c-switch-input" checked>
  <span class="c-switch-slider" data-checked="On" data-unchecked="Off"></span>
</label>
<label class="c-switch c-switch-pill c-switch-label c-switch-outline-warning">
  <input type="checkbox" class="c-switch-input" checked>
  <span class="c-switch-slider" data-checked="On" data-unchecked="Off"></span>
</label>
<label class="c-switch c-switch-pill c-switch-label c-switch-outline-info">
  <input type="checkbox" class="c-switch-input" checked>
  <span class="c-switch-slider" data-checked="On" data-unchecked="Off"></span>
</label>
<label class="c-switch c-switch-pill c-switch-label c-switch-outline-light">
  <input type="checkbox" class="c-switch-input" checked>
  <span class="c-switch-slider" data-checked="On" data-unchecked="Off"></span>
</label>
<label class="c-switch c-switch-pill c-switch-label c-switch-outline-dark">
  <input type="checkbox" class="c-switch-input" checked>
  <span class="c-switch-slider" data-checked="On" data-unchecked="Off"></span>
</label>

Switch with text outline alternative

<label class="c-switch c-switch-label c-switch-outline-primary-alt">
  <input type="checkbox" class="c-switch-input" checked>
  <span class="c-switch-slider" data-checked="On" data-unchecked="Off"></span>
</label>
<label class="c-switch c-switch-label c-switch-outline-secondary-alt">
  <input type="checkbox" class="c-switch-input" checked>
  <span class="c-switch-slider" data-checked="On" data-unchecked="Off"></span>
</label>
<label class="c-switch c-switch-label c-switch-outline-success-alt">
  <input type="checkbox" class="c-switch-input" checked>
  <span class="c-switch-slider" data-checked="On" data-unchecked="Off"></span>
</label>
<label class="c-switch c-switch-label c-switch-outline-danger-alt">
  <input type="checkbox" class="c-switch-input" checked>
  <span class="c-switch-slider" data-checked="On" data-unchecked="Off"></span>
</label>
<label class="c-switch c-switch-label c-switch-outline-warning-alt">
  <input type="checkbox" class="c-switch-input" checked>
  <span class="c-switch-slider" data-checked="On" data-unchecked="Off"></span>
</label>
<label class="c-switch c-switch-label c-switch-outline-info-alt">
  <input type="checkbox" class="c-switch-input" checked>
  <span class="c-switch-slider" data-checked="On" data-unchecked="Off"></span>
</label>
<label class="c-switch c-switch-label c-switch-outline-light-alt">
  <input type="checkbox" class="c-switch-input" checked>
  <span class="c-switch-slider" data-checked="On" data-unchecked="Off"></span>
</label>
<label class="c-switch c-switch-label c-switch-outline-dark-alt">
  <input type="checkbox" class="c-switch-input" checked>
  <span class="c-switch-slider" data-checked="On" data-unchecked="Off"></span>
</label>

Switch with text outline alternative - pills

<label class="c-switch c-switch-pill c-switch-label c-switch-outline-primary-alt">
  <input type="checkbox" class="c-switch-input" checked>
  <span class="c-switch-slider" data-checked="On" data-unchecked="Off"></span>
</label>
<label class="c-switch c-switch-pill c-switch-label c-switch-outline-secondary-alt">
  <input type="checkbox" class="c-switch-input" checked>
  <span class="c-switch-slider" data-checked="On" data-unchecked="Off"></span>
</label>
<label class="c-switch c-switch-pill c-switch-label c-switch-outline-success-alt">
  <input type="checkbox" class="c-switch-input" checked>
  <span class="c-switch-slider" data-checked="On" data-unchecked="Off"></span>
</label>
<label class="c-switch c-switch-pill c-switch-label c-switch-outline-danger-alt">
  <input type="checkbox" class="c-switch-input" checked>
  <span class="c-switch-slider" data-checked="On" data-unchecked="Off"></span>
</label>
<label class="c-switch c-switch-pill c-switch-label c-switch-outline-warning-alt">
  <input type="checkbox" class="c-switch-input" checked>
  <span class="c-switch-slider" data-checked="On" data-unchecked="Off"></span>
</label>
<label class="c-switch c-switch-pill c-switch-label c-switch-outline-info-alt">
  <input type="checkbox" class="c-switch-input" checked>
  <span class="c-switch-slider" data-checked="On" data-unchecked="Off"></span>
</label>
<label class="c-switch c-switch-pill c-switch-label c-switch-outline-light-alt">
  <input type="checkbox" class="c-switch-input" checked>
  <span class="c-switch-slider" data-checked="On" data-unchecked="Off"></span>
</label>
<label class="c-switch c-switch-pill c-switch-label c-switch-outline-dark-alt">
  <input type="checkbox" class="c-switch-input" checked>
  <span class="c-switch-slider" data-checked="On" data-unchecked="Off"></span>
</label>

Switch with icon

<label class="c-switch c-switch-label c-switch-primary">
  <input type="checkbox" class="c-switch-input" checked>
  <span class="c-switch-slider" data-checked="&#x2713;" data-unchecked="&#x2715;"></span>
</label>
<label class="c-switch c-switch-label c-switch-secondary">
  <input type="checkbox" class="c-switch-input" checked>
  <span class="c-switch-slider" data-checked="&#x2713;" data-unchecked="&#x2715;"></span>
</label>
<label class="c-switch c-switch-label c-switch-success">
  <input type="checkbox" class="c-switch-input" checked>
  <span class="c-switch-slider" data-checked="&#x2713;" data-unchecked="&#x2715;"></span>
</label>
<label class="c-switch c-switch-label c-switch-danger">
  <input type="checkbox" class="c-switch-input" checked>
  <span class="c-switch-slider" data-checked="&#x2713;" data-unchecked="&#x2715;"></span>
</label>
<label class="c-switch c-switch-label c-switch-warning">
  <input type="checkbox" class="c-switch-input" checked>
  <span class="c-switch-slider" data-checked="&#x2713;" data-unchecked="&#x2715;"></span>
</label>
<label class="c-switch c-switch-label c-switch-info">
  <input type="checkbox" class="c-switch-input" checked>
  <span class="c-switch-slider" data-checked="&#x2713;" data-unchecked="&#x2715;"></span>
</label>
<label class="c-switch c-switch-label c-switch-light">
  <input type="checkbox" class="c-switch-input" checked>
  <span class="c-switch-slider" data-checked="&#x2713;" data-unchecked="&#x2715;"></span>
</label>
<label class="c-switch c-switch-label c-switch-dark">
  <input type="checkbox" class="c-switch-input" checked>
  <span class="c-switch-slider" data-checked="&#x2713;" data-unchecked="&#x2715;"></span>
</label>

Switch with icon - pills

<label class="c-switch c-switch-label c-switch-pill c-switch-primary">
  <input type="checkbox" class="c-switch-input" checked>
  <span class="c-switch-slider" data-checked="&#x2713;" data-unchecked="&#x2715;"></span>
</label>
<label class="c-switch c-switch-label c-switch-pill c-switch-secondary">
  <input type="checkbox" class="c-switch-input" checked>
  <span class="c-switch-slider" data-checked="&#x2713;" data-unchecked="&#x2715;"></span>
</label>
<label class="c-switch c-switch-label c-switch-pill c-switch-success">
  <input type="checkbox" class="c-switch-input" checked>
  <span class="c-switch-slider" data-checked="&#x2713;" data-unchecked="&#x2715;"></span>
</label>
<label class="c-switch c-switch-label c-switch-pill c-switch-danger">
  <input type="checkbox" class="c-switch-input" checked>
  <span class="c-switch-slider" data-checked="&#x2713;" data-unchecked="&#x2715;"></span>
</label>
<label class="c-switch c-switch-label c-switch-pill c-switch-warning">
  <input type="checkbox" class="c-switch-input" checked>
  <span class="c-switch-slider" data-checked="&#x2713;" data-unchecked="&#x2715;"></span>
</label>
<label class="c-switch c-switch-label c-switch-pill c-switch-info">
  <input type="checkbox" class="c-switch-input" checked>
  <span class="c-switch-slider" data-checked="&#x2713;" data-unchecked="&#x2715;"></span>
</label>
<label class="c-switch c-switch-label c-switch-pill c-switch-light">
  <input type="checkbox" class="c-switch-input" checked>
  <span class="c-switch-slider" data-checked="&#x2713;" data-unchecked="&#x2715;"></span>
</label>
<label class="c-switch c-switch-label c-switch-pill c-switch-dark">
  <input type="checkbox" class="c-switch-input" checked>
  <span class="c-switch-slider" data-checked="&#x2713;" data-unchecked="&#x2715;"></span>
</label>

Switch with icon outline

<label class="c-switch c-switch-label c-switch-outline-primary">
  <input type="checkbox" class="c-switch-input" checked>
  <span class="c-switch-slider" data-checked="&#x2713;" data-unchecked="&#x2715;"></span>
</label>
<label class="c-switch c-switch-label c-switch-outline-secondary">
  <input type="checkbox" class="c-switch-input" checked>
  <span class="c-switch-slider" data-checked="&#x2713;" data-unchecked="&#x2715;"></span>
</label>
<label class="c-switch c-switch-label c-switch-outline-success">
  <input type="checkbox" class="c-switch-input" checked>
  <span class="c-switch-slider" data-checked="&#x2713;" data-unchecked="&#x2715;"></span>
</label>
<label class="c-switch c-switch-label c-switch-outline-danger">
  <input type="checkbox" class="c-switch-input" checked>
  <span class="c-switch-slider" data-checked="&#x2713;" data-unchecked="&#x2715;"></span>
</label>
<label class="c-switch c-switch-label c-switch-outline-warning">
  <input type="checkbox" class="c-switch-input" checked>
  <span class="c-switch-slider" data-checked="&#x2713;" data-unchecked="&#x2715;"></span>
</label>
<label class="c-switch c-switch-label c-switch-outline-info">
  <input type="checkbox" class="c-switch-input" checked>
  <span class="c-switch-slider" data-checked="&#x2713;" data-unchecked="&#x2715;"></span>
</label>
<label class="c-switch c-switch-label c-switch-outline-light">
  <input type="checkbox" class="c-switch-input" checked>
  <span class="c-switch-slider" data-checked="&#x2713;" data-unchecked="&#x2715;"></span>
</label>
<label class="c-switch c-switch-label c-switch-outline-dark">
  <input type="checkbox" class="c-switch-input" checked>
  <span class="c-switch-slider" data-checked="&#x2713;" data-unchecked="&#x2715;"></span>
</label>

Switch with icon outline - pills

<label class="c-switch c-switch-label c-switch-pill c-switch-outline-primary">
  <input type="checkbox" class="c-switch-input" checked>
  <span class="c-switch-slider" data-checked="&#x2713;" data-unchecked="&#x2715;"></span>
</label>
<label class="c-switch c-switch-label c-switch-pill c-switch-outline-secondary">
  <input type="checkbox" class="c-switch-input" checked>
  <span class="c-switch-slider" data-checked="&#x2713;" data-unchecked="&#x2715;"></span>
</label>
<label class="c-switch c-switch-label c-switch-pill c-switch-outline-success">
  <input type="checkbox" class="c-switch-input" checked>
  <span class="c-switch-slider" data-checked="&#x2713;" data-unchecked="&#x2715;"></span>
</label>
<label class="c-switch c-switch-label c-switch-pill c-switch-outline-danger">
  <input type="checkbox" class="c-switch-input" checked>
  <span class="c-switch-slider" data-checked="&#x2713;" data-unchecked="&#x2715;"></span>
</label>
<label class="c-switch c-switch-label c-switch-pill c-switch-outline-warning">
  <input type="checkbox" class="c-switch-input" checked>
  <span class="c-switch-slider" data-checked="&#x2713;" data-unchecked="&#x2715;"></span>
</label>
<label class="c-switch c-switch-label c-switch-pill c-switch-outline-info">
  <input type="checkbox" class="c-switch-input" checked>
  <span class="c-switch-slider" data-checked="&#x2713;" data-unchecked="&#x2715;"></span>
</label>
<label class="c-switch c-switch-label c-switch-pill c-switch-outline-light">
  <input type="checkbox" class="c-switch-input" checked>
  <span class="c-switch-slider" data-checked="&#x2713;" data-unchecked="&#x2715;"></span>
</label>
<label class="c-switch c-switch-label c-switch-pill c-switch-outline-dark">
  <input type="checkbox" class="c-switch-input" checked>
  <span class="c-switch-slider" data-checked="&#x2713;" data-unchecked="&#x2715;"></span>
</label>

Switch with icon outline alternative

<label class="c-switch c-switch-label c-switch-outline-primary-alt">
  <input type="checkbox" class="c-switch-input" checked>
  <span class="c-switch-slider" data-checked="&#x2713;" data-unchecked="&#x2715;"></span>
</label>
<label class="c-switch c-switch-label c-switch-outline-secondary-alt">
  <input type="checkbox" class="c-switch-input" checked>
  <span class="c-switch-slider" data-checked="&#x2713;" data-unchecked="&#x2715;"></span>
</label>
<label class="c-switch c-switch-label c-switch-outline-success-alt">
  <input type="checkbox" class="c-switch-input" checked>
  <span class="c-switch-slider" data-checked="&#x2713;" data-unchecked="&#x2715;"></span>
</label>
<label class="c-switch c-switch-label c-switch-outline-danger-alt">
  <input type="checkbox" class="c-switch-input" checked>
  <span class="c-switch-slider" data-checked="&#x2713;" data-unchecked="&#x2715;"></span>
</label>
<label class="c-switch c-switch-label c-switch-outline-warning-alt">
  <input type="checkbox" class="c-switch-input" checked>
  <span class="c-switch-slider" data-checked="&#x2713;" data-unchecked="&#x2715;"></span>
</label>
<label class="c-switch c-switch-label c-switch-outline-info-alt">
  <input type="checkbox" class="c-switch-input" checked>
  <span class="c-switch-slider" data-checked="&#x2713;" data-unchecked="&#x2715;"></span>
</label>
<label class="c-switch c-switch-label c-switch-outline-light-alt">
  <input type="checkbox" class="c-switch-input" checked>
  <span class="c-switch-slider" data-checked="&#x2713;" data-unchecked="&#x2715;"></span>
</label>
<label class="c-switch c-switch-label c-switch-outline-dark-alt">
  <input type="checkbox" class="c-switch-input" checked>
  <span class="c-switch-slider" data-checked="&#x2713;" data-unchecked="&#x2715;"></span>
</label>

Switch with icon outline alternative - pills

<label class="c-switch c-switch-label c-switch-pill c-switch-outline-primary-alt">
  <input type="checkbox" class="c-switch-input" checked>
  <span class="c-switch-slider" data-checked="&#x2713;" data-unchecked="&#x2715;"></span>
</label>
<label class="c-switch c-switch-label c-switch-pill c-switch-outline-secondary-alt">
  <input type="checkbox" class="c-switch-input" checked>
  <span class="c-switch-slider" data-checked="&#x2713;" data-unchecked="&#x2715;"></span>
</label>
<label class="c-switch c-switch-label c-switch-pill c-switch-outline-success-alt">
  <input type="checkbox" class="c-switch-input" checked>
  <span class="c-switch-slider" data-checked="&#x2713;" data-unchecked="&#x2715;"></span>
</label>
<label class="c-switch c-switch-label c-switch-pill c-switch-outline-danger-alt">
  <input type="checkbox" class="c-switch-input" checked>
  <span class="c-switch-slider" data-checked="&#x2713;" data-unchecked="&#x2715;"></span>
</label>
<label class="c-switch c-switch-label c-switch-pill c-switch-outline-warning-alt">
  <input type="checkbox" class="c-switch-input" checked>
  <span class="c-switch-slider" data-checked="&#x2713;" data-unchecked="&#x2715;"></span>
</label>
<label class="c-switch c-switch-label c-switch-pill c-switch-outline-info-alt">
  <input type="checkbox" class="c-switch-input" checked>
  <span class="c-switch-slider" data-checked="&#x2713;" data-unchecked="&#x2715;"></span>
</label>
<label class="c-switch c-switch-label c-switch-pill c-switch-outline-light-alt">
  <input type="checkbox" class="c-switch-input" checked>
  <span class="c-switch-slider" data-checked="&#x2713;" data-unchecked="&#x2715;"></span>
</label>
<label class="c-switch c-switch-label c-switch-pill c-switch-outline-dark-alt">
  <input type="checkbox" class="c-switch-input" checked>
  <span class="c-switch-slider" data-checked="&#x2713;" data-unchecked="&#x2715;"></span>
</label>

3D Switch

<label class="c-switch c-switch-3d c-switch-primary">
  <input type="checkbox" class="c-switch-input" checked>
  <span class="c-switch-slider"></span>
</label>
<label class="c-switch c-switch-3d c-switch-secondary">
  <input type="checkbox" class="c-switch-input" checked>
  <span class="c-switch-slider"></span>
</label>
<label class="c-switch c-switch-3d c-switch-success">
  <input type="checkbox" class="c-switch-input" checked>
  <span class="c-switch-slider"></span>
</label>
<label class="c-switch c-switch-3d c-switch-danger">
  <input type="checkbox" class="c-switch-input" checked>
  <span class="c-switch-slider"></span>
</label>
<label class="c-switch c-switch-3d c-switch-warning">
  <input type="checkbox" class="c-switch-input" checked>
  <span class="c-switch-slider"></span>
</label>
<label class="c-switch c-switch-3d c-switch-info">
  <input type="checkbox" class="c-switch-input" checked>
  <span class="c-switch-slider"></span>
</label>
<label class="c-switch c-switch-3d c-switch-light">
  <input type="checkbox" class="c-switch-input" checked>
  <span class="c-switch-slider"></span>
</label>
<label class="c-switch c-switch-3d c-switch-dark">
  <input type="checkbox" class="c-switch-input" checked>
  <span class="c-switch-slider"></span>
</label>

Switch sizes

<label class="c-switch c-switch-lg c-switch-3d c-switch-primary">
  <input type="checkbox" class="c-switch-input" checked>
  <span class="c-switch-slider"></span>
</label>

<label class="c-switch c-switch-3d c-switch-primary">
  <input type="checkbox" class="c-switch-input" checked>
  <span class="c-switch-slider"></span>
</label>

<label class="c-switch c-switch-sm c-switch-3d c-switch-primary">
  <input type="checkbox" class="c-switch-input" checked>
  <span class="c-switch-slider"></span>
</label>