<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.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 ----------> <div class="container"> <div> <label class="switch"> <input type="checkbox"> <span class="slider"></span> </label> Switch1 </div> <div> <label class="switch"> <input type="checkbox"> <span class="slider"></span> </label> Switch2 </div> <div> <label class="switch"> <input type="checkbox"> <span class="slider"></span> </label> Switch3 </div> </div>

.switch input { display:none; } .switch { display:inline-block; width:60px; height:30px; margin:8px; transform:translateY(50%); position:relative; } .slider { position:absolute; top:0; bottom:0; left:0; right:0; border-radius:30px; box-shadow:0 0 0 2px #777, 0 0 4px #777; cursor:pointer; border:4px solid transparent; overflow:hidden; transition:.4s; } .slider:before { position:absolute; content:""; width:100%; height:100%; background:#777; border-radius:30px; transform:translateX(-30px); transition:.4s; } input:checked + .slider:before { transform:translateX(30px); background:limeGreen; } input:checked + .slider { box-shadow:0 0 0 2px limeGreen,0 0 2px limeGreen; }