Switch

  1. Home
  2. Form Components
  3. Switch
Bootstrap Cards Buttons Extended

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

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