[Fixed] How to interchange place of toggle and label in Angular8 using Bootstrap4

Issue

Hi i am using Angular8 with Bootstrap 4, here i have used checkboxes for one of the screen, so the checkbox comes first and then the label comes, i need to give label first and then checkbox. Can anyone help me to make it possible?

HTML:

<div class="row" [formGroup]="userInfoForm">
  <div class="col pt-lg-4 max-50">
    <label for="" class="font-weight-bold">Permissions</label>
    <div class="row">
      <div class="col-12">
        <div class="form-group custom-control custom-switch ">
          <input type="checkbox" class="custom-control-input" id="DoesUserhaveaccess" formControlName="accesstoCrs">
          <label class="custom-control-label" for="DoesUserhaveaccess">Access? </label>
        </div>
      </div>
    </div>
  </div>
</div>

Label and Toggle

Solution

As you can see in this stackblitz forked from yours, I redefined the left properties for the before and after pseudo elements. This places the switch after the text and to align all the switch, I added a width to the label container in order to be big enough for every elements in it.
It’s the only way I found to swap the label and the switch.