"Beautiful iOS 7 style switches"
Bootstrap 3.3.0 Snippet by mrmccormack

Post to Facebook Tweet this

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!-- these would go in <head> --> <link href="demo.css" rel="stylesheet"> <link href="http://abpetkov.github.io/switchery/dist/switchery.min.css" rel="stylesheet"> <!-- bootstrap --> <div class="container"> <div class="row"> <h2>Beautiful iOS 7 style switches in Bootstrap</h2> Reference: <a href="http://abpetkov.github.io/switchery/">http://abpetkov.github.io/switchery/</a> <p> <a href="http://bootsnipp.com/iframe/vOZkd" target="_blank">full screen</a> </p> <hr> <div class="col-md-4"> <label class="pointer"> <input type="checkbox" value="" class="js-switch" checked> Advanced features.</label> <br> <label class="pointer"> <input type="checkbox" value="" class="js-switch" checked> Option 1</label> <br> <label class="pointer"> <input type="checkbox" value="" class="js-switch"> Option 2</label> <br> <label class="pointer"> <input type="checkbox" value="" disabled class="js-switch"> Option 3 (disabled)</label> </div> <div class="col-md-4"> <img src="https://c2.staticflickr.com/4/3273/2666202522_a19f246bab_b.jpg" class="img-responsive" alt="Creative Commons License" title="Creative Commons License"></div> </div> <div class="col-md-4"> </div> <hr> <br> <br> <br> <p> <a href="http://validator.w3.org/check?uri=http%3A%2F%2Fbootsnipp.com%2Fiframe%2FvOZkd" target="_blank"><small>HTML</small><sup>5</sup></a> </p> </div> <script type="text/javascript" src="http://abpetkov.github.io/switchery/dist/switchery.min.js"></script>
.pointer { cursor:pointer; } .row{ padding:20px; }
$(document).ready(function () { // Ref: http://abpetkov.github.io/switchery/dist/switchery.min.css" rel="stylesheet var elems = Array.prototype.slice.call(document.querySelectorAll('.js-switch')); elems.forEach(function(html) { var switchery = new Switchery(html); }); });

Related: See More

Argon Design System
Tabs style 1
Hover Effect Style
Instagram Style User Online

Questions / Comments: