Bootstrap Demo
Bootstrap Code
Output
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"> <link href="css/bootstrap-switch/bootstrap-switch.css" rel="stylesheet"> </head> <body> <main id="content" role="main"> <div class="container"> <div class="row"> <div class="col-sm-6 col-lg-4"> <h2 class="h4">A demo of Bootstrap switch</h2> <p> <input id="switch-state" type="checkbox" checked> </p> <div class="btn-group"> <button type="button" data-switch-toggle="state" class="btn btn-danger">Toggle</button> <button type="button" data-switch-set="state" data-switch-value="true" class="btn btn-default">Set true</button> <button type="button" data-switch-set="state" data-switch-value="false" class="btn btn-default">Set false</button> <button type="button" data-switch-get="state" class="btn btn-success">Get</button> </div> </div> </div> </div> </main> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> <script src="js/bootstrap-switch/highlight.js"></script> <script src="js/bootstrap-switch/bootstrap-switch.js"></script> <script src="js/bootstrap-switch/main.js"></script> </body> </html>
A demo of Bootstrap switch
Toggle
Set true
Set false
Get