Form - Bootstrap Switches
One stop solution for perfect admin dashboard!
Bootstrap Switch!Turn checkboxes and radio buttons into toggle switches. For official documentation, click here .
Switch states
Checked Switch
Unchecked Switch
Checked Disabled
Unchecked Disabled
Checked Read-Only
Unchecked Read-Only
<div class="row mb-20"> <div class="col-md-6"> <input type="checkbox" name="my-checkbox" class="bt-switch" checked> <small class="ml-10">Checked Switch</small> </div> <div class="col-md-6"> <input type="checkbox" name="my-checkbox" class="bt-switch"> <small class="ml-10">Unchecked Switch</small> </div></div><div class="row mb-20"> <div class="col-md-6"> <input type="checkbox" name="my-checkbox" class="bt-switch" checked disabled> <small class="ml-10">Checked Disabled</small> </div> <div class="col-md-6"> <input type="checkbox" name="my-checkbox" class="bt-switch" disabled> <small class="ml-10">Unchecked Disabled</small> </div></div><div class="row"> <div class="col-md-6"> <input type="checkbox" name="my-checkbox" class="bt-switch" checked readonly> <small class="ml-10">Checked Read-Only</small> </div> <div class="col-md-6"> <input type="checkbox" name="my-checkbox" class="bt-switch" readonly> <small class="ml-10">Unchecked Read-Only</small> </div></div>
Switch Colors
Default Color
Primary Color
Success Color
Danger Color
Info Color
Warning Color
<div class="row mb-20"> <div class="col-md-6"> <input type="checkbox" name="my-checkbox" class="bt-switch" checked data-on-color="default"> <small class="ml-10">Default Color</small> </div> <div class="col-md-6"> <input type="checkbox" name="my-checkbox" class="bt-switch" checked data-on-color="primary"> <small class="ml-10">Primary Color</small> </div></div><div class="row mb-20"> <div class="col-md-6"> <input type="checkbox" name="my-checkbox" class="bt-switch" checked data-on-color="success"> <small class="ml-10">Success Color</small> </div> <div class="col-md-6"> <input type="checkbox" name="my-checkbox" class="bt-switch" checked data-on-color="danger"> <small class="ml-10">Danger Color</small> </div></div><div class="row"> <div class="col-md-6"> <input type="checkbox" name="my-checkbox" class="bt-switch" checked data-on-color="info"> <small class="ml-10">Info Color</small> </div> <div class="col-md-6"> <input type="checkbox" name="my-checkbox" class="bt-switch" checked data-on-color="warning"> <small class="ml-10">Warning Color</small> </div></div>
Customization
Inverse Switch
Custom Off Color
Intermediate
Inverse Intermediate
<div class="row mb-20"> <div class="col-md-6"> <input type="checkbox" name="my-checkbox" class="bt-switch" checked data-inverse="true"> <small class="ml-10">Inverse Switch</small> </div> <div class="col-md-6"> <input type="checkbox" name="my-checkbox" class="bt-switch" data-off-color="danger" data-on-color="success"> <small class="ml-10">Custom Off Color</small> </div></div><div class="row mb-20"> <div class="col-md-6"> <input type="checkbox" name="my-checkbox" class="bt-switch" checked data-indeterminate="true"> <small class="ml-10">Intermediate</small> </div> <div class="col-md-6"> <input type="checkbox" name="my-checkbox" class="bt-switch" data-indeterminate="true" data-inverse="true"> <small class="ml-10">Inverse Intermediate</small> </div></div>
Custom Labels
Custom Label
Label
Label Text
Custom Button
<div class="row mb-20"> <div class="col-md-6"> <input type="checkbox" name="my-checkbox" class="bt-switch" checked data-on-text="Yes" data-off-text="off"> <small class="ml-10">Custom Label</small> </div> <div class="col-md-6"> <input type="checkbox" name="my-checkbox" class="bt-switch" checked data-on-text="Enabled" data-off-text="Disabled"> <small class="ml-10">Label</small> </div></div><div class="row mb-20"> <div class="col-md-6"> <input type="checkbox" name="my-checkbox" class="bt-switch" checked data-on-color="success" data-label-text="Switch"> <small class="ml-10">Label Text</small> </div> <div class="col-md-6"> <input type="checkbox" name="my-checkbox" class="bt-switch" checked data-on-color="danger" data-label-text="||"> <small class="ml-10">Custom Button</small> </div></div>