Here is the code snippet that I am currently working with:
.custom-switch {
padding-left: 0;
}
.custom-switch .custom-control-label {
left: 0;
padding-left: 2.5rem;
}
.custom-switch .custom-control-label::before {
top: 0.125rem;
left: 0;
width: 2rem;
height: 1.25rem;
border-radius: 1rem;
transition: background-color .15s ease-out;
background-color: #fff;
}
.custom-switch .custom-control-label::after {
top: 0.3125rem;
left: .25rem;
width: .875rem;
height: .875rem;
-webkit-transform: none;
transform: none;
background-color: #fff;
border-radius: 1rem;
background-color: #adb5bd;
}
.custom-switch .custom-control-input:checked~.custom-control-label::after {
background-color: #fff;
-webkit-transform: translateX(0.625rem);
transform: translateX(0.625rem);
box-shadow: -0.125rem 0 0.125rem rgba(0, 0, 0, 0.2);
}<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<div class="custom-control custom-switch">
<input type="checkbox" class="custom-control-input" id="example-switch-custom4" name="example-switch-custom">
<label class="custom-control-label" for="example-switch-custom">Test</label>
</div>The current layout shows the label on the right side (see image here https://i.sstatic.net/Z5hWp.jpg). Is there a simple way to adjust the positioning to have it on the left side instead? Appreciate any help! Thanks!