Basic Switch

use class .switch-label to add a label to switch.

Toggle this switch element
Disabled switch element

Colors

Use class .custom-switch-#{$color-name} with .custom-switch to change switch's color

Primary

Success

Danger

Info

Warning

Dark

Text

Use class .switch-text-left & .switch-text-right inside of .custom-control-label to create a switch with text.

Icons

Use class .switch-icon-left & .switch-icon-right inside of .custom-control-label to create a switch with icon.

Primary

Success

Danger

Info

Warning

Dark

Sizes

use class .switch-{md | lg} with .custom-switch for medium or large size

Default

Medium

Large

Theme Customizer

Customize & Preview in Real Time
Menu Colors

Theme Layout
Light
Dark
Semi Dark

Collapse Sidebar
Collapse Menu

Navbar Colors

Footer Type

Hide Scroll To Top
Buy Now