In bootstrap 4, if you want to change or increase custom switch (a beautiful switch from iOS), you should dive into bootstrap's css file and change its dimensions of a class of custom-switch.
html code as following:
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="switchA" name="switch">
<label class="custom-control-label" for="switchA">Custom checkbox</label>
</div>
In boostrap.css (version 4.3.1 and not minified) file, you should find
the custom-switch class and change the following parameters in
the below. You must delete all the comments I added on.
.custom-switch {
padding-left: 2.25rem;
padding-bottom: 1rem; // added for positioning
}
.custom-control-label { // added for alignment with the switch
padding-top: 0.5rem;
padding-left: 2rem;
padding-bottom: 0.1rem;
}
.custom-switch .custom-control-label::before {
left: -2.25rem;
height: 2rem;
width: 3.5rem; // it was 1.75rem before. Sliding way is longer than before.
pointer-events: all;
border-radius: 1rem;
}
.custom-switch .custom-control-label::after {
top: calc(0.25rem + 2px);
left: calc(-2.25rem + 2px);
width: calc(2rem - 4px); // it was calc(1rem - 4px) before. Oval is bigger than before.
height: calc(2rem - 4px); // it was calc(1rem - 4px) before. Oval is bigger than before.
background-color: #adb5bd;
border-radius: 2rem; // it was 0.5rem before. Oval is bigger than before.
transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, -webkit-transform 0.15s ease-in-out;
transition: transform 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
transition: transform 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, -webkit-transform 0.15s ease-in-out;
}
@media (prefers-reduced-motion: reduce) {
.custom-switch .custom-control-label::after {
transition: none;
}
}
.custom-switch .custom-control-input:checked ~ .custom-control-label::after {
background-color: #fff;
-webkit-transform: translateX(1.5rem); //translateX(0.75rem);
transform: translateX(1.5rem); //translateX(0.75rem);
}
After copied these code to Bootstrap file, you must delete all
comments I put in. Otherwise, It won't increase the size. I hope you enjoy
your a bigger pretty switch now.
