@@include('../layouts/head-page-meta.html', {'title': 'Switch'}) @@include('../layouts/head-css.html') @@include('../layouts/layout-vertical.html')
@@include('../layouts/breadcrumb.html', {'breadcrumb-item': 'Forms', 'breadcrumb-item-active': 'Switch'})
Switch [ v1 ]
Default Switch
primary
secondary
success
danger
warning
info
dark
Use class
input-[color name]
in
<input>
tag
Custom Switch
primary
secondary
success
danger
warning
info
dark
Use class
custom-switch-v1
in
<div>
tag
Color States
primary
secondary
success
danger
warning
info
dark
Use class
input-light-[color name]
Inline Switch
Inline 1
Inline 2
Inline 3
With Checked State
Inline 1
Inline 2
Inline 3
Use class
form-check-inline
Switch in Horizontal Form
Switches
Default
Option 2
Disabled
Checked
Inline Switches
Inline 1
Inline 2
Inline 3
Inline States
Inline 1
Inline 2
Inline 3
Sizing
Small Switches
Default
Option 2
Disabled
Checked
Some help text goes here
Large Switches
Default
Option 2
Disabled
Checked
Some help text goes here
Color States
primary
secondary
success
danger
warning
info
dark
Some help text goes here
Color States
primary
secondary
success
danger
warning
info
dark
Some help text goes here
@@include('../layouts/footer-block.html') @@include('../layouts/footer-js.html') @@include('../layouts/customizer.html')