<div class="container d-flex my-3">
    <div class="border-dark bg-light border mx-auto p-4">
        <h2>Custom-Toggle Bootstrap Sizes</h2>
        <br>

        <!-- These are basic boostrap custom switches
             https://getbootstrap.com/docs/4.4/components/forms/#switches -->
        <h3>Default Size</h3>
        <div class="custom-control custom-switch">
            <input type="checkbox" class="custom-control-input" id="customSwitch1">
            <label class="custom-control-label" for="customSwitch1">
                Default Sized Custom Toggle
            </label>
        </div>
        <code>.custom-control.custom-switch</code>
        <br><br>

        <h3>Large Size</h3>
        <div class="custom-control custom-switch custom-switch-lg">
            <input type="checkbox" class="custom-control-input" id="customSwitch2">
            <label class="custom-control-label" for="customSwitch2">
                Large Sized Custom Toggle
            </label>
        </div>
        <code>.custom-control.custom-switch.custom-switch-lg</code>
        <br><br>

        <h3>Extra Large Size</h3>
        <div class="custom-control custom-switch custom-switch-xl">
            <input type="checkbox" class="custom-control-input" id="customSwitch3">
            <label class="custom-control-label" for="customSwitch3">
                Extra Large Sized Custom Toggle
            </label>
        </div>
        <code>.custom-control.custom-switch.custom-switch-xl</code>
    </div>
</div>

// Custom styling - Not neccesary for the sizes. 
body {background:gray}
.custom-control-input:checked ~ .custom-control-label::before {
  background-color: green;
  border-color: darken(green, 10%);
}

//---------------CUSTOM SIZE STYLING---------------//

// Add class `.custom-switch-lg` to a `custom-switch`
.custom-switch.custom-switch-lg {
  padding-bottom: 1rem;
  padding-left: 2.25rem;

  & .custom-control-label {
    padding-left: .75rem;
    padding-top: 0.15rem;

    &::before {
      border-radius: 1rem;
      height: 1.5rem;
      width: 2.5rem;
    }

    &::after {
      border-radius: .65rem;
      height: calc(1.5rem - 4px);
      width: calc(1.5rem - 4px);
    }
  }
  
  .custom-control-input:checked ~ .custom-control-label::after{
  transform: translateX(1rem);
  }
}

// Add class `.custom-switch-xl` to a `custom-switch`
.custom-switch.custom-switch-xl {
  padding-bottom: 1rem;
  padding-left: 2.25rem;

  & .custom-control-label {
    padding-left: 2rem;
    padding-top: 0.5rem;
  
    &::before {
      border-radius: 1rem;
      height: 2rem;
      width: 3.5rem;
    }

    &::after {
      border-radius: 2rem;
      height: calc(2rem - 4px);
      width: calc(2rem - 4px);
    }
  }
  
  .custom-control-input:checked ~ .custom-control-label::after {
  transform: translateX(1.5rem);
  }
}