<div class="row">
  <div class="col-12">
    <div class="card mb-4">
      <div class="card-body">
        <h5 class="mb-4">{{ 'form-components.switch' | translate }}</h5>
        <h6>{{ 'form-components.basic' | translate }}</h6>
        <div class="mb-4">
          <div class="custom-control custom-switch">
            <input type="checkbox" class="custom-control-input" id="customSwitch1">
            <label class="custom-control-label" for="customSwitch1">Toggle this switch element</label>
          </div>
        </div>
        <h6>{{ 'form-components.disabled' | translate }}</h6>
        <div class="mb-4">
          <div class="custom-control custom-switch">
            <input type="checkbox" class="custom-control-input" disabled id="customSwitch2">
            <label class="custom-control-label" for="customSwitch2">Disabled switch element</label>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
