Bootstrap, how to make a text on left and right of a switch button?

I would like to make a text on the left and right side of the switch button just like the one that is shown in picture below. How to solve this problem?

CODE

<div class="m-form__group form-group row">
    <label class="col-4 col-form-label">Switch yes/no</label>
    <div class="col-8">

        <span class="m-switch m-switch--outline m-switch--icon m-switch--success">
            <label>
                <input type="checkbox" checked="checked" name="">
                <span></span>
                <small>On</small>
            </label>
        </span>
    </div>
</div>