If you're looking to customize or enlarge the beautiful switch from iOS in Bootstrap 4, you'll need to delve into the framework's CSS file and adjust the dimensions of the custom-switch class.
https://i.sstatic.net/GsT0k.png
Here is an example of HTML code showcasing the custom switch:
<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 the boostrap.css (version 4.3.1 and unminified) file, locate the custom-switch class and adjust the parameters listed below. Be sure to remove all the comments included.
.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. Slider length increased.
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 size enlarged.
height: calc(2rem - 4px); // it was calc(1rem - 4px) before. Oval size enlarged.
background-color: #adb5bd;
border-radius: 2rem; // it was 0.5rem before. Oval size enlarged.
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);
}
Once you've integrated this code into your Bootstrap file, remember to delete all
comments provided for the changes to take effect. Now enjoy your larger and more attractive switch!