<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class=""> <div class=""> <label class="switch"> <input type="checkbox"> <span class="slider round"></span> </label> <label>No</label> </div> </div>

.switch { position: relative; display: inline-block; width: 25px; height: 10px; margin: 8px 5px; } .switch input {display:none; background-color: #ccc;} .slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #ccc; -webkit-transition: .4s; transition: .4s; } .slider:before { position: absolute; content: ""; height: 16px; width: 16px; left: 0px; right: 0px; bottom: -3px; background-color: #2196F3; -webkit-transition: .4s; transition: .4s; } input:checked + .slider:before { -webkit-transform: translateX(10px); -ms-transform: translateX(10px); transform: translateX(10px); } /* Rounded sliders */ .slider.round { border-radius: 20px; } .slider.round:before { border-radius: 50%; }