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 On/True Color switches</h2> <p> <input id="switch-onColor" type="checkbox" checked data-on-color="warning"> </p> <p> <input id="switch-onColor" type="checkbox" checked data-on-color="default"> </p> <p> <input id="switch-onColor" type="checkbox" checked data-on-color="success"> </p> <p> <input id="switch-onColor" type="checkbox" checked data-on-color="info"> </p> <p> <input id="switch-onColor" type="checkbox" checked data-on-color="primary"> </p> </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 On/True Color switches