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"> <h3 class="h5">A demo of radio buttons as switch</h3> <input type="radio" name="radio1" checked data-on-color="success" data-off-color="warning" class="switch-radio1"> <input type="radio" name="radio1" data-on-color="danger" data-off-color="warning" class="switch-radio1"> <input type="radio" name="radio1" data-on-color="info" data-off-color="primary" class="switch-radio1"> </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 radio buttons as switch