CoreUI Logo
Sneak Peek! CoreUI 3 is coming! Please try the latest version - CoreUI PRO 3.0.0-alpha.. Try CoreUI PRO 3.0.0-alpha

Bootstrap switches

Switch default

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

<label class="switch switch-secondary">
  <input type="checkbox" class="switch-input" checked>
  <span class="switch-slider"></span>
</label>

<label class="switch switch-success">
  <input type="checkbox" class="switch-input" checked>
  <span class="switch-slider"></span>
</label>

<label class="switch switch-danger">
  <input type="checkbox" class="switch-input" checked>
  <span class="switch-slider"></span>
</label>

<label class="switch switch-warning">
  <input type="checkbox" class="switch-input" checked>
  <span class="switch-slider"></span>
</label>

<label class="switch switch-info">
  <input type="checkbox" class="switch-input" checked>
  <span class="switch-slider"></span>
</label>

<label class="switch switch-light">
  <input type="checkbox" class="switch-input" checked>
  <span class="switch-slider"></span>
</label>

<label class="switch switch-dark">
  <input type="checkbox" class="switch-input" checked>
  <span class="switch-slider"></span>
</label>

Switch default - pills

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

<label class="switch switch-pill switch-secondary">
  <input type="checkbox" class="switch-input" checked>
  <span class="switch-slider"></span>
</label>

<label class="switch switch-pill switch-success">
  <input type="checkbox" class="switch-input" checked>
  <span class="switch-slider"></span>
</label>

<label class="switch switch-pill switch-danger">
  <input type="checkbox" class="switch-input" checked>
  <span class="switch-slider"></span>
</label>

<label class="switch switch-pill switch-warning">
  <input type="checkbox" class="switch-input" checked>
  <span class="switch-slider"></span>
</label>

<label class="switch switch-pill switch-info">
  <input type="checkbox" class="switch-input" checked>
  <span class="switch-slider"></span>
</label>

<label class="switch switch-pill switch-light">
  <input type="checkbox" class="switch-input" checked>
  <span class="switch-slider"></span>
</label>

<label class="switch switch-pill switch-dark">
  <input type="checkbox" class="switch-input" checked>
  <span class="switch-slider"></span>
</label>

Switch outline

CoreUI Pro Component

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

<label class="switch switch-outline-secondary">
  <input type="checkbox" class="switch-input" checked>
  <span class="switch-slider"></span>
</label>

<label class="switch switch-outline-success">
  <input type="checkbox" class="switch-input" checked>
  <span class="switch-slider"></span>
</label>

<label class="switch switch-outline-danger">
  <input type="checkbox" class="switch-input" checked>
  <span class="switch-slider"></span>
</label>

<label class="switch switch-outline-warning">
  <input type="checkbox" class="switch-input" checked>
  <span class="switch-slider"></span>
</label>

<label class="switch switch-outline-info">
  <input type="checkbox" class="switch-input" checked>
  <span class="switch-slider"></span>
</label>

<label class="switch switch-outline-light">
  <input type="checkbox" class="switch-input" checked>
  <span class="switch-slider"></span>
</label>

<label class="switch switch-outline-dark">
  <input type="checkbox" class="switch-input" checked>
  <span class="switch-slider"></span>
</label>

Switch outline - pills

CoreUI Pro Component

<label class="switch switch-pill switch-outline-primary">
  <input type="checkbox" class="switch-input" checked>
  <span class="switch-slider"></span>
</label>

<label class="switch switch-pill switch-outline-secondary">
  <input type="checkbox" class="switch-input" checked>
  <span class="switch-slider"></span>
</label>

<label class="switch switch-pill switch-outline-success">
  <input type="checkbox" class="switch-input" checked>
  <span class="switch-slider"></span>
</label>

<label class="switch switch-pill switch-outline-danger">
  <input type="checkbox" class="switch-input" checked>
  <span class="switch-slider"></span>
</label>

<label class="switch switch-pill switch-outline-warning">
  <input type="checkbox" class="switch-input" checked>
  <span class="switch-slider"></span>
</label>

<label class="switch switch-pill switch-outline-info">
  <input type="checkbox" class="switch-input" checked>
  <span class="switch-slider"></span>
</label>

<label class="switch switch-pill switch-outline-light">
  <input type="checkbox" class="switch-input" checked>
  <span class="switch-slider"></span>
</label>

<label class="switch switch-pill switch-outline-dark">
  <input type="checkbox" class="switch-input" checked>
  <span class="switch-slider"></span>
</label>

Switch outline alternative

CoreUI Pro Component

<label class="switch switch-outline-primary-alt">
  <input type="checkbox" class="switch-input" checked>
  <span class="switch-slider"></span>
</label>

<label class="switch switch-outline-secondary-alt">
  <input type="checkbox" class="switch-input" checked>
  <span class="switch-slider"></span>
</label>

<label class="switch switch-outline-success-alt">
  <input type="checkbox" class="switch-input" checked>
  <span class="switch-slider"></span>
</label>

<label class="switch switch-outline-danger-alt">
  <input type="checkbox" class="switch-input" checked>
  <span class="switch-slider"></span>
</label>

<label class="switch switch-outline-warning-alt">
  <input type="checkbox" class="switch-input" checked>
  <span class="switch-slider"></span>
</label>

<label class="switch switch-outline-info-alt">
  <input type="checkbox" class="switch-input" checked>
  <span class="switch-slider"></span>
</label>

<label class="switch switch-outline-light-alt">
  <input type="checkbox" class="switch-input" checked>
  <span class="switch-slider"></span>
</label>

<label class="switch switch-outline-dark-alt">
  <input type="checkbox" class="switch-input" checked>
  <span class="switch-slider"></span>
</label>

Switch outline alternative - pills

CoreUI Pro Component

<label class="switch switch-pill switch-outline-primary-alt">
  <input type="checkbox" class="switch-input" checked>
  <span class="switch-slider"></span>
</label>

<label class="switch switch-pill switch-outline-secondary-alt">
  <input type="checkbox" class="switch-input" checked>
  <span class="switch-slider"></span>
</label>

<label class="switch switch-pill switch-outline-success-alt">
  <input type="checkbox" class="switch-input" checked>
  <span class="switch-slider"></span>
</label>

<label class="switch switch-pill switch-outline-danger-alt">
  <input type="checkbox" class="switch-input" checked>
  <span class="switch-slider"></span>
</label>

<label class="switch switch-pill switch-outline-warning-alt">
  <input type="checkbox" class="switch-input" checked>
  <span class="switch-slider"></span>
</label>

<label class="switch switch-pill switch-outline-info-alt">
  <input type="checkbox" class="switch-input" checked>
  <span class="switch-slider"></span>
</label>

<label class="switch switch-pill switch-outline-light-alt">
  <input type="checkbox" class="switch-input" checked>
  <span class="switch-slider"></span>
</label>

<label class="switch switch-pill switch-outline-dark-alt">
  <input type="checkbox" class="switch-input" checked>
  <span class="switch-slider"></span>
</label>

Switch with text

CoreUI Pro Component

<label class="switch switch-label switch-primary">
  <input type="checkbox" class="switch-input" checked>
  <span class="switch-slider" data-checked="On" data-unchecked="Off"></span>
</label>

<label class="switch switch-label switch-secondary">
  <input type="checkbox" class="switch-input" checked>
  <span class="switch-slider" data-checked="On" data-unchecked="Off"></span>
</label>

<label class="switch switch-label switch-success">
  <input type="checkbox" class="switch-input" checked>
  <span class="switch-slider" data-checked="On" data-unchecked="Off"></span>
</label>

<label class="switch switch-label switch-danger">
  <input type="checkbox" class="switch-input" checked>
  <span class="switch-slider" data-checked="On" data-unchecked="Off"></span>
</label>

<label class="switch switch-label switch-warning">
  <input type="checkbox" class="switch-input" checked>
  <span class="switch-slider" data-checked="On" data-unchecked="Off"></span>
</label>

<label class="switch switch-label switch-info">
  <input type="checkbox" class="switch-input" checked>
  <span class="switch-slider" data-checked="On" data-unchecked="Off"></span>
</label>

<label class="switch switch-label switch-light">
  <input type="checkbox" class="switch-input" checked>
  <span class="switch-slider" data-checked="On" data-unchecked="Off"></span>
</label>

<label class="switch switch-label switch-dark">
  <input type="checkbox" class="switch-input" checked>
  <span class="switch-slider" data-checked="On" data-unchecked="Off"></span>
</label>

Switch with text - pills

CoreUI Pro Component

<label class="switch switch-pill switch-label switch-primary">
  <input type="checkbox" class="switch-input" checked>
  <span class="switch-slider" data-checked="On" data-unchecked="Off"></span>
</label>

<label class="switch switch-pill switch-label switch-secondary">
  <input type="checkbox" class="switch-input" checked>
  <span class="switch-slider" data-checked="On" data-unchecked="Off"></span>
</label>

<label class="switch switch-pill switch-label switch-success">
  <input type="checkbox" class="switch-input" checked>
  <span class="switch-slider" data-checked="On" data-unchecked="Off"></span>
</label>

<label class="switch switch-pill switch-label switch-danger">
  <input type="checkbox" class="switch-input" checked>
  <span class="switch-slider" data-checked="On" data-unchecked="Off"></span>
</label>

<label class="switch switch-pill switch-label switch-warning">
  <input type="checkbox" class="switch-input" checked>
  <span class="switch-slider" data-checked="On" data-unchecked="Off"></span>
</label>

<label class="switch switch-pill switch-label switch-info">
  <input type="checkbox" class="switch-input" checked>
  <span class="switch-slider" data-checked="On" data-unchecked="Off"></span>
</label>

<label class="switch switch-pill switch-label switch-light">
  <input type="checkbox" class="switch-input" checked>
  <span class="switch-slider" data-checked="On" data-unchecked="Off"></span>
</label>

<label class="switch switch-pill switch-label switch-dark">
  <input type="checkbox" class="switch-input" checked>
  <span class="switch-slider" data-checked="On" data-unchecked="Off"></span>
</label>

Switch with text outline

CoreUI Pro Component

<label class="switch switch-label switch-outline-primary">
  <input type="checkbox" class="switch-input" checked>
  <span class="switch-slider" data-checked="On" data-unchecked="Off"></span>
</label>

<label class="switch switch-label switch-outline-secondary">
  <input type="checkbox" class="switch-input" checked>
  <span class="switch-slider" data-checked="On" data-unchecked="Off"></span>
</label>

<label class="switch switch-label switch-outline-success">
  <input type="checkbox" class="switch-input" checked>
  <span class="switch-slider" data-checked="On" data-unchecked="Off"></span>
</label>

<label class="switch switch-label switch-outline-danger">
  <input type="checkbox" class="switch-input" checked>
  <span class="switch-slider" data-checked="On" data-unchecked="Off"></span>
</label>

<label class="switch switch-label switch-outline-warning">
  <input type="checkbox" class="switch-input" checked>
  <span class="switch-slider" data-checked="On" data-unchecked="Off"></span>
</label>

<label class="switch switch-label switch-outline-info">
  <input type="checkbox" class="switch-input" checked>
  <span class="switch-slider" data-checked="On" data-unchecked="Off"></span>
</label>

<label class="switch switch-label switch-outline-light">
  <input type="checkbox" class="switch-input" checked>
  <span class="switch-slider" data-checked="On" data-unchecked="Off"></span>
</label>

<label class="switch switch-label switch-outline-dark">
  <input type="checkbox" class="switch-input" checked>
  <span class="switch-slider" data-checked="On" data-unchecked="Off"></span>
</label>

Switch with text outline - pills

CoreUI Pro Component

<label class="switch switch-pill switch-label switch-outline-primary">
  <input type="checkbox" class="switch-input" checked>
  <span class="switch-slider" data-checked="On" data-unchecked="Off"></span>
</label>

<label class="switch switch-pill switch-label switch-outline-secondary">
  <input type="checkbox" class="switch-input" checked>
  <span class="switch-slider" data-checked="On" data-unchecked="Off"></span>
</label>

<label class="switch switch-pill switch-label switch-outline-success">
  <input type="checkbox" class="switch-input" checked>
  <span class="switch-slider" data-checked="On" data-unchecked="Off"></span>
</label>

<label class="switch switch-pill switch-label switch-outline-danger">
  <input type="checkbox" class="switch-input" checked>
  <span class="switch-slider" data-checked="On" data-unchecked="Off"></span>
</label>

<label class="switch switch-pill switch-label switch-outline-warning">
  <input type="checkbox" class="switch-input" checked>
  <span class="switch-slider" data-checked="On" data-unchecked="Off"></span>
</label>

<label class="switch switch-pill switch-label switch-outline-info">
  <input type="checkbox" class="switch-input" checked>
  <span class="switch-slider" data-checked="On" data-unchecked="Off"></span>
</label>

<label class="switch switch-pill switch-label switch-outline-light">
  <input type="checkbox" class="switch-input" checked>
  <span class="switch-slider" data-checked="On" data-unchecked="Off"></span>
</label>

<label class="switch switch-pill switch-label switch-outline-dark">
  <input type="checkbox" class="switch-input" checked>
  <span class="switch-slider" data-checked="On" data-unchecked="Off"></span>
</label>

Switch with text outline alternative

CoreUI Pro Component

<label class="switch switch-label switch-outline-primary-alt">
  <input type="checkbox" class="switch-input" checked>
  <span class="switch-slider" data-checked="On" data-unchecked="Off"></span>
</label>

<label class="switch switch-label switch-outline-secondary-alt">
  <input type="checkbox" class="switch-input" checked>
  <span class="switch-slider" data-checked="On" data-unchecked="Off"></span>
</label>

<label class="switch switch-label switch-outline-success-alt">
  <input type="checkbox" class="switch-input" checked>
  <span class="switch-slider" data-checked="On" data-unchecked="Off"></span>
</label>

<label class="switch switch-label switch-outline-danger-alt">
  <input type="checkbox" class="switch-input" checked>
  <span class="switch-slider" data-checked="On" data-unchecked="Off"></span>
</label>

<label class="switch switch-label switch-outline-warning-alt">
  <input type="checkbox" class="switch-input" checked>
  <span class="switch-slider" data-checked="On" data-unchecked="Off"></span>
</label>

<label class="switch switch-label switch-outline-info-alt">
  <input type="checkbox" class="switch-input" checked>
  <span class="switch-slider" data-checked="On" data-unchecked="Off"></span>
</label>

<label class="switch switch-label switch-outline-light-alt">
  <input type="checkbox" class="switch-input" checked>
  <span class="switch-slider" data-checked="On" data-unchecked="Off"></span>
</label>

<label class="switch switch-label switch-outline-dark-alt">
  <input type="checkbox" class="switch-input" checked>
  <span class="switch-slider" data-checked="On" data-unchecked="Off"></span>
</label>

Switch with text outline alternative - pills

CoreUI Pro Component

<label class="switch switch-pill switch-label switch-outline-primary-alt">
  <input type="checkbox" class="switch-input" checked>
  <span class="switch-slider" data-checked="On" data-unchecked="Off"></span>
</label>

<label class="switch switch-pill switch-label switch-outline-secondary-alt">
  <input type="checkbox" class="switch-input" checked>
  <span class="switch-slider" data-checked="On" data-unchecked="Off"></span>
</label>

<label class="switch switch-pill switch-label switch-outline-success-alt">
  <input type="checkbox" class="switch-input" checked>
  <span class="switch-slider" data-checked="On" data-unchecked="Off"></span>
</label>

<label class="switch switch-pill switch-label switch-outline-danger-alt">
  <input type="checkbox" class="switch-input" checked>
  <span class="switch-slider" data-checked="On" data-unchecked="Off"></span>
</label>

<label class="switch switch-pill switch-label switch-outline-warning-alt">
  <input type="checkbox" class="switch-input" checked>
  <span class="switch-slider" data-checked="On" data-unchecked="Off"></span>
</label>

<label class="switch switch-pill switch-label switch-outline-info-alt">
  <input type="checkbox" class="switch-input" checked>
  <span class="switch-slider" data-checked="On" data-unchecked="Off"></span>
</label>

<label class="switch switch-pill switch-label switch-outline-light-alt">
  <input type="checkbox" class="switch-input" checked>
  <span class="switch-slider" data-checked="On" data-unchecked="Off"></span>
</label>

<label class="switch switch-pill switch-label switch-outline-dark-alt">
  <input type="checkbox" class="switch-input" checked>
  <span class="switch-slider" data-checked="On" data-unchecked="Off"></span>
</label>

Switch with icon

CoreUI Pro Component

<label class="switch switch-label switch-primary">
  <input type="checkbox" class="switch-input" checked>
  <span class="switch-slider" data-checked="&#x2713;" data-unchecked="&#x2715;"></span>
</label>

<label class="switch switch-label switch-secondary">
  <input type="checkbox" class="switch-input" checked>
  <span class="switch-slider" data-checked="&#x2713;" data-unchecked="&#x2715;"></span>
</label>

<label class="switch switch-label switch-success">
  <input type="checkbox" class="switch-input" checked>
  <span class="switch-slider" data-checked="&#x2713;" data-unchecked="&#x2715;"></span>
</label>

<label class="switch switch-label switch-danger">
  <input type="checkbox" class="switch-input" checked>
  <span class="switch-slider" data-checked="&#x2713;" data-unchecked="&#x2715;"></span>
</label>

<label class="switch switch-label switch-warning">
  <input type="checkbox" class="switch-input" checked>
  <span class="switch-slider" data-checked="&#x2713;" data-unchecked="&#x2715;"></span>
</label>

<label class="switch switch-label switch-info">
  <input type="checkbox" class="switch-input" checked>
  <span class="switch-slider" data-checked="&#x2713;" data-unchecked="&#x2715;"></span>
</label>

<label class="switch switch-label switch-light">
  <input type="checkbox" class="switch-input" checked>
  <span class="switch-slider" data-checked="&#x2713;" data-unchecked="&#x2715;"></span>
</label>

<label class="switch switch-label switch-dark">
  <input type="checkbox" class="switch-input" checked>
  <span class="switch-slider" data-checked="&#x2713;" data-unchecked="&#x2715;"></span>
</label>

Switch with icon - pills

CoreUI Pro Component

<label class="switch switch-label switch-pill switch-primary">
  <input type="checkbox" class="switch-input" checked>
  <span class="switch-slider" data-checked="&#x2713;" data-unchecked="&#x2715;"></span>
</label>

<label class="switch switch-label switch-pill switch-secondary">
  <input type="checkbox" class="switch-input" checked>
  <span class="switch-slider" data-checked="&#x2713;" data-unchecked="&#x2715;"></span>
</label>

<label class="switch switch-label switch-pill switch-success">
  <input type="checkbox" class="switch-input" checked>
  <span class="switch-slider" data-checked="&#x2713;" data-unchecked="&#x2715;"></span>
</label>

<label class="switch switch-label switch-pill switch-danger">
  <input type="checkbox" class="switch-input" checked>
  <span class="switch-slider" data-checked="&#x2713;" data-unchecked="&#x2715;"></span>
</label>

<label class="switch switch-label switch-pill switch-warning">
  <input type="checkbox" class="switch-input" checked>
  <span class="switch-slider" data-checked="&#x2713;" data-unchecked="&#x2715;"></span>
</label>

<label class="switch switch-label switch-pill switch-info">
  <input type="checkbox" class="switch-input" checked>
  <span class="switch-slider" data-checked="&#x2713;" data-unchecked="&#x2715;"></span>
</label>

<label class="switch switch-label switch-pill switch-light">
  <input type="checkbox" class="switch-input" checked>
  <span class="switch-slider" data-checked="&#x2713;" data-unchecked="&#x2715;"></span>
</label>

<label class="switch switch-label switch-pill switch-dark">
  <input type="checkbox" class="switch-input" checked>
  <span class="switch-slider" data-checked="&#x2713;" data-unchecked="&#x2715;"></span>
</label>

Switch with icon outline

CoreUI Pro Component

<label class="switch switch-label switch-outline-primary">
  <input type="checkbox" class="switch-input" checked>
  <span class="switch-slider" data-checked="&#x2713;" data-unchecked="&#x2715;"></span>
</label>

<label class="switch switch-label switch-outline-secondary">
  <input type="checkbox" class="switch-input" checked>
  <span class="switch-slider" data-checked="&#x2713;" data-unchecked="&#x2715;"></span>
</label>

<label class="switch switch-label switch-outline-success">
  <input type="checkbox" class="switch-input" checked>
  <span class="switch-slider" data-checked="&#x2713;" data-unchecked="&#x2715;"></span>
</label>

<label class="switch switch-label switch-outline-danger">
  <input type="checkbox" class="switch-input" checked>
  <span class="switch-slider" data-checked="&#x2713;" data-unchecked="&#x2715;"></span>
</label>

<label class="switch switch-label switch-outline-warning">
  <input type="checkbox" class="switch-input" checked>
  <span class="switch-slider" data-checked="&#x2713;" data-unchecked="&#x2715;"></span>
</label>

<label class="switch switch-label switch-outline-info">
  <input type="checkbox" class="switch-input" checked>
  <span class="switch-slider" data-checked="&#x2713;" data-unchecked="&#x2715;"></span>
</label>

<label class="switch switch-label switch-outline-light">
  <input type="checkbox" class="switch-input" checked>
  <span class="switch-slider" data-checked="&#x2713;" data-unchecked="&#x2715;"></span>
</label>

<label class="switch switch-label switch-outline-dark">
  <input type="checkbox" class="switch-input" checked>
  <span class="switch-slider" data-checked="&#x2713;" data-unchecked="&#x2715;"></span>
</label>

Switch with icon outline - pills

CoreUI Pro Component

<label class="switch switch-label switch-pill switch-outline-primary">
  <input type="checkbox" class="switch-input" checked>
  <span class="switch-slider" data-checked="&#x2713;" data-unchecked="&#x2715;"></span>
</label>

<label class="switch switch-label switch-pill switch-outline-secondary">
  <input type="checkbox" class="switch-input" checked>
  <span class="switch-slider" data-checked="&#x2713;" data-unchecked="&#x2715;"></span>
</label>

<label class="switch switch-label switch-pill switch-outline-success">
  <input type="checkbox" class="switch-input" checked>
  <span class="switch-slider" data-checked="&#x2713;" data-unchecked="&#x2715;"></span>
</label>

<label class="switch switch-label switch-pill switch-outline-danger">
  <input type="checkbox" class="switch-input" checked>
  <span class="switch-slider" data-checked="&#x2713;" data-unchecked="&#x2715;"></span>
</label>

<label class="switch switch-label switch-pill switch-outline-warning">
  <input type="checkbox" class="switch-input" checked>
  <span class="switch-slider" data-checked="&#x2713;" data-unchecked="&#x2715;"></span>
</label>

<label class="switch switch-label switch-pill switch-outline-info">
  <input type="checkbox" class="switch-input" checked>
  <span class="switch-slider" data-checked="&#x2713;" data-unchecked="&#x2715;"></span>
</label>

<label class="switch switch-label switch-pill switch-outline-light">
  <input type="checkbox" class="switch-input" checked>
  <span class="switch-slider" data-checked="&#x2713;" data-unchecked="&#x2715;"></span>
</label>

<label class="switch switch-label switch-pill switch-outline-dark">
  <input type="checkbox" class="switch-input" checked>
  <span class="switch-slider" data-checked="&#x2713;" data-unchecked="&#x2715;"></span>
</label>

Switch with icon outline alternative

CoreUI Pro Component

<label class="switch switch-label switch-outline-primary-alt">
  <input type="checkbox" class="switch-input" checked>
  <span class="switch-slider" data-checked="&#x2713;" data-unchecked="&#x2715;"></span>
</label>

<label class="switch switch-label switch-outline-secondary-alt">
  <input type="checkbox" class="switch-input" checked>
  <span class="switch-slider" data-checked="&#x2713;" data-unchecked="&#x2715;"></span>
</label>

<label class="switch switch-label switch-outline-success-alt">
  <input type="checkbox" class="switch-input" checked>
  <span class="switch-slider" data-checked="&#x2713;" data-unchecked="&#x2715;"></span>
</label>

<label class="switch switch-label switch-outline-danger-alt">
  <input type="checkbox" class="switch-input" checked>
  <span class="switch-slider" data-checked="&#x2713;" data-unchecked="&#x2715;"></span>
</label>

<label class="switch switch-label switch-outline-warning-alt">
  <input type="checkbox" class="switch-input" checked>
  <span class="switch-slider" data-checked="&#x2713;" data-unchecked="&#x2715;"></span>
</label>

<label class="switch switch-label switch-outline-info-alt">
  <input type="checkbox" class="switch-input" checked>
  <span class="switch-slider" data-checked="&#x2713;" data-unchecked="&#x2715;"></span>
</label>

<label class="switch switch-label switch-outline-light-alt">
  <input type="checkbox" class="switch-input" checked>
  <span class="switch-slider" data-checked="&#x2713;" data-unchecked="&#x2715;"></span>
</label>

<label class="switch switch-label switch-outline-dark-alt">
  <input type="checkbox" class="switch-input" checked>
  <span class="switch-slider" data-checked="&#x2713;" data-unchecked="&#x2715;"></span>
</label>

Switch with icon outline alternative - pills

CoreUI Pro Component

<label class="switch switch-label switch-pill switch-outline-primary-alt">
  <input type="checkbox" class="switch-input" checked>
  <span class="switch-slider" data-checked="&#x2713;" data-unchecked="&#x2715;"></span>
</label>

<label class="switch switch-label switch-pill switch-outline-secondary-alt">
  <input type="checkbox" class="switch-input" checked>
  <span class="switch-slider" data-checked="&#x2713;" data-unchecked="&#x2715;"></span>
</label>

<label class="switch switch-label switch-pill switch-outline-success-alt">
  <input type="checkbox" class="switch-input" checked>
  <span class="switch-slider" data-checked="&#x2713;" data-unchecked="&#x2715;"></span>
</label>

<label class="switch switch-label switch-pill switch-outline-danger-alt">
  <input type="checkbox" class="switch-input" checked>
  <span class="switch-slider" data-checked="&#x2713;" data-unchecked="&#x2715;"></span>
</label>

<label class="switch switch-label switch-pill switch-outline-warning-alt">
  <input type="checkbox" class="switch-input" checked>
  <span class="switch-slider" data-checked="&#x2713;" data-unchecked="&#x2715;"></span>
</label>

<label class="switch switch-label switch-pill switch-outline-info-alt">
  <input type="checkbox" class="switch-input" checked>
  <span class="switch-slider" data-checked="&#x2713;" data-unchecked="&#x2715;"></span>
</label>

<label class="switch switch-label switch-pill switch-outline-light-alt">
  <input type="checkbox" class="switch-input" checked>
  <span class="switch-slider" data-checked="&#x2713;" data-unchecked="&#x2715;"></span>
</label>

<label class="switch switch-label switch-pill switch-outline-dark-alt">
  <input type="checkbox" class="switch-input" checked>
  <span class="switch-slider" data-checked="&#x2713;" data-unchecked="&#x2715;"></span>
</label>

3D Switch

CoreUI Pro Component

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

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

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

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

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

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

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

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

Switch sizes

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

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

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