Form - Bootstrap Switches

One stop solution for perfect admin dashboard!

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>