<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="container mt-2"> <div class="row"> <!-- Small switch --> <span class="switch switch-xs"> <input type="checkbox" class="switch" id="idChk-xs"> <label for="idChk-xs">Extreme Small switch</label> </span> </div> <div class="row"> <!-- Small switch --> <span class="switch switch-sm"> <input type="checkbox" class="switch" id="idChk-sm"> <label for="idChk-sm">Small switch</label> </span> </div> <div class="row"> <!-- Normal switch --> <span class="switch"> <input type="checkbox" class="switch" id="idChk-normal"> <label for="idChk-normal">Normal switch</label> </span> </div> <div class="row"> <!-- Large switch --> <span class="switch switch-lg"> <input type="checkbox" class="switch" id="idChk-lg"> <label for="idChk-lg">Large switch</label> </span> </div> </div> <div class="container mt-2"> <div class="row"> <div class="col"> <span class="switch switch-xs"> <input type="checkbox" class="switch" id="idChk-xs-1"> <label for="idChk-xs-1">Extreme Small switch</label> </span> <span class="switch switch-xs"> <input type="checkbox" class="switch" id="idChk-xs-2"> <label for="idChk-xs-2">Small switch</label> </span> </div> </div> </div>

.switch { } .switch input[type=checkbox] { display: none; } .switch input[type=checkbox] + label { position:relative; min-width:calc(calc(2.375rem * .8) * 2); border-radius:calc(2.375rem * .8); height:calc(2.375rem * .8); line-height:calc(2.375rem * .8); display:inline-block; cursor:pointer; outline:none; user-select:none; vertical-align:middle; text-indent:calc(calc(calc(2.375rem * .8) * 2) + .5rem); } .switch input[type=checkbox] + label::before, .switch input[type=checkbox] + label::after { content:''; position:absolute; top:0; left:0; width:calc(calc(2.375rem * .8) * 2); bottom:0; display:block; } .switch input[type=checkbox] + label::before { right:0; background-color:#dee2e6; border-radius:calc(2.375rem * .8); transition:.2s all; } .switch input[type=checkbox] + label::after { top:2px; left:2px; width:calc(calc(2.375rem * .8) - calc(2px * 2)); height:calc(calc(2.375rem * .8) - calc(2px * 2)); border-radius:50%; background-color:#fff; transition: all 0.3s ease-in 0s;; } .switch input[type=checkbox]:checked + label::before { background-color:#08d; } .switch input[type=checkbox]:checked + label::after { margin-left:calc(2.375rem * .8); } .switch input[type=checkbox]:focus + label::before { outline:none; box-shadow:0 0 0 .2rem rgba(0,136,221,.25); } .switch input[type=checkbox]:disabled + label { color:#868e96; cursor:not-allowed; } .switch input[type=checkbox]:disabled + label::before { background-color:#e9ecef; } .switch.switch-xs { font-size:.8rem; } .switch.switch-xs input[type=checkbox] + label { min-width:calc(calc(1.5375rem * .8) * 2); height:calc(1.5375rem * .8); line-height:calc(1.5375rem * .8); text-indent:calc(calc(calc(1.5375rem * .8) * 2) + .5rem); } .switch.switch-xs input[type=checkbox] + label::before { width:calc(calc(1.5375rem * .8) * 2); } .switch.switch-xs input[type=checkbox] + label::after { width:calc(calc(1.5375rem * .8) - calc(2px * 2)); height:calc(calc(1.5375rem * .8) - calc(2px * 2)); } .switch.switch-xs input[type=checkbox]:checked + label::after { margin-left:calc(1.5375rem * .8); } /* Small */ .switch.switch-sm { font-size:.875rem; } .switch.switch-sm input[type=checkbox] + label { min-width:calc(calc(1.9375rem * .8) * 2); height:calc(1.9375rem * .8); line-height:calc(1.9375rem * .8); text-indent:calc(calc(calc(1.9375rem * .8) * 2) + .5rem); } .switch.switch-sm input[type=checkbox] + label::before { width:calc(calc(1.9375rem * .8) * 2); } .switch.switch-sm input[type=checkbox] + label::after { width:calc(calc(1.9375rem * .8) - calc(2px * 2)); height:calc(calc(1.9375rem * .8) - calc(2px * 2)); } .switch.switch-sm input[type=checkbox]:checked + label::after { margin-left:calc(1.9375rem * .8); } /* Large */ .switch.switch-lg { font-size:1.25rem; } .switch.switch-lg input[type=checkbox] + label { min-width:calc(calc(3rem * .8) * 2); height:calc(3rem * .8); line-height:calc(3rem * .8); text-indent:calc(calc(calc(3rem * .8) * 2) + .5rem); } .switch.switch-lg input[type=checkbox] + label::before { width:calc(calc(3rem * .8) * 2); } .switch.switch-lg input[type=checkbox] + label::after { width:calc(calc(3rem * .8) - calc(2px * 2)); height:calc(calc(3rem * .8) - calc(2px * 2)); } .switch.switch-lg input[type=checkbox]:checked + label::after { margin-left:calc(3rem * .8); } .switch + .switch { margin-left:1rem; }