"Bootstrap 4 Material Design Switchers"
Bootstrap 4.0.0 Snippet by annguyen

<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 class="row justify-content-center"> <div class="col-4"> <div class="card"> <div class="card-header bg-primary text-white">Bootstrap 4 Material Design Switchers</div> <!-- List group --> <ul class="list-group list-group-flush"> <li class="list-group-item justify-content-between"> Default Switch disabled <div class="material-switch disabled"> <input id="switch1" name="switch1" type="checkbox" /> <label for="switch1" class="bg-inverse"></label> </div> </li> <li class="list-group-item justify-content-between"> Default Switch <div class="material-switch"> <input id="switch2" name="switch2" type="checkbox" /> <label for="switch2" class="bg-inverse"></label> </div> </li> <li class="list-group-item justify-content-between"> Primary Switch <div class="material-switch"> <input id="switch3" name="switch3" type="checkbox" /> <label for="switch3" class="bg-primary"></label> </div> </li> <li class="list-group-item justify-content-between"> Success Switch <div class="material-switch"> <input id="switch4" name="switch4" type="checkbox" /> <label for="switch4" class="bg-success"></label> </div> </li> <li class="list-group-item justify-content-between"> Info Switch <div class="material-switch"> <input id="switch5" name="switch5" type="checkbox" /> <label for="switch5" class="bg-info"></label> </div> </li> <li class="list-group-item justify-content-between"> Warning Switch <div class="material-switch"> <input id="switch6" name="switch6" type="checkbox" /> <label for="switch6" class="bg-warning"></label> </div> </li> <li class="list-group-item justify-content-between"> Danger Switch <div class="material-switch"> <input id="switch7" name="switch7" type="checkbox" /> <label for="switch7" class="bg-danger"></label> </div> </li> </ul> </div> </div> </div> </div>
.material-switch>input[type="checkbox"] { display: none; } .material-switch.disabled>label { opacity: .65; pointer-events: none; } .material-switch>label { cursor: pointer; height: 0px; position: relative; width: 40px; } .material-switch>label::before { background: rgb(0, 0, 0); box-shadow: inset 0px 0px 10px rgba(0, 0, 0, 0.5); border-radius: 8px; content: ''; height: 16px; margin-top: -4px; position: absolute; opacity: 0.3; transition: all 0.3s ease-in-out; width: 40px; } .material-switch>label::after { background: rgb(255, 255, 255); border-radius: 16px; box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.3); content: ''; height: 24px; left: -4px; margin-top: -4px; position: absolute; top: -4px; transition: all 0.2s ease-in-out; width: 24px; } .material-switch>input[type="checkbox"]:checked+label::before { background: inherit; opacity: 0.5; } .material-switch>input[type="checkbox"]:checked+label::after { background: inherit; left: 20px; }

Related: See More


Questions / Comments: