Bootstrap Checkbox Toggle

Add .switchclass to checkbox to set as switch

Add checked to set checked bootstrap switch

Add data-switch-always to switch on every click

Checked & Disabled toggle

Add data-group-cls="btn-group-sm" attribute for small switch

Add data-group-cls="btn-group-lg" attribute for large switch

Add data-group-cls="btn-group-vertical" attribute for vertical switch

Add data-off-title="VALUE" attribute for OFF hover title and data-on-title="VALUE" attribute for ON hover title

Add data-icon-cls="fa" to set font family you are using data-off-icon-cls="fa FONT_AWESOME_ICON" attribute for off switch icon & data-on-icon-cls="fa FONT_AWESOME_ICON" attribute for on switch icon

To set only icon switch set data-off-label="false" & data-off-label="false".

Add data-off-label="OffValue" attribute for off switch label & data-on-label="OnValue" attribute for on switch label

Bootstrap Switch Toggle


Add .switchBootstrap class to set bootstrap switch

ON OFF

Add checked to set checked bootstrap switch

ON OFF

Add checked disabled to set checked & disabled bootstrap switch

ON OFF

Add checked readonly for checked & readonly switch direction.

ON OFF

Add data-on-text="TEXT" to change text of the left side of the switch

Left OFF

Add data-off-text="TEXT" to change text of the right side of the switch

ON Right

use data-label-text="TEXT" for text of the center handle of the switch and that will work with data-indeterminate="true" attribute only.

FemaleGenderMale
Yes No
Online Offline
Enable Disable
 

Yes
 
No
Male GenderFemale

Male
Gender
Female
ON OFF
ON OFF
ON OFF
ON OFF
ON OFF
ON OFF
ON OFF
ON OFF
ON OFF
ON OFF
ON OFF
ON OFF

Switchery Toggle

Basic Switchery Toggle

To set Switchery toggle, add .switchery class to checkbox.

Right Switchery Toggle

To set Switchery toggle to right, wrap checkbox with .float-right class.

Switchery Sizes

To set Large Switchery toggle, add data-size="lg" to checkbox with .switchery class.

To set Default Switchery toggle, add .switchery class to checkbox.

To set Small Switchery toggle, add data-size="sm" to checkbox with .switchery class.

To set Extra Small Switchery toggle, add data-size="xs" to checkbox with .switchery class.

Switchery Labels on both sides

Template Color Switchery


Color Switchery

COLOR SWITCHERY WITH LABELS ON BOTH SIDES

Theme Customizer


Customize & Preview in Real Time

Menu Color Options

Layout Options

Navigation Color Options
Solid
Gradient

Solid

Gradient

Buy Now