SCSS

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/css/bootstrap.min.css">
<h3>Default style</h3>

<div class="form-group">
  <div class="custom-control custom-switch">
    <input id="test1" type="checkbox" class="custom-control-input">
    <label for="test1" class="custom-control-label">default text size</label>
  </div>
</div>

<div class="form-group h1">
  <div class="custom-control custom-switch">
    <input id="test2" type="checkbox" class="custom-control-input">
    <label for="test2" class="custom-control-label">h1 text size</label>
  </div>
</div>

<hr>

<h3>With <code>.custom-switch-adaptive</code></h3>

<div class="form-group">
  <div class="custom-control custom-switch custom-switch-adaptive">
    <input id="test3" type="checkbox" class="custom-control-input">
    <label for="test3" class="custom-control-label">default text size</label>
  </div>
</div>

<div class="form-group h1">
  <div class="custom-control custom-switch custom-switch-adaptive">
    <input id="test4" type="checkbox" class="custom-control-input">
    <label for="test4" class="custom-control-label">h1 text size</label>
  </div>
</div>

SCSS

$text-muted: #6C757D;
$light: #F8F9FA;
$white: #FFF;
$success: #28a745;

.custom-switch.custom-switch-adaptive {
  padding-left: 0;

  .custom-control-label {
    padding: 0 1.5em;
    position: relative;
    border-radius: 1em;
    line-height: 1.4em;
    color: $text-muted;
    border: 1px solid $text-muted;
    background-color: $light;
    transition: background-color 200ms;

    &::before {
      content: none;
    }
    &::after {
      position: absolute;
      height: 1em;
      top: 0.2em;
      left: 0.2em;
      width: 1em;
      border-radius: 1em;

      transition: left 200ms;
    }
  }


  .custom-control-input:checked ~ .custom-control-label {
    color: $white;
    background-color: $success;
    border-color: $success;

    &::after {
      background-color: $white;
      left: calc(100% - 1.2em);

      transform: none;
      -webkit-transform: none;
    }
  }
}