4

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>

switch

LearnProgramming
  • 814
  • 1
  • 12
  • 37

2 Answers2

0

Try this for Bootstrap 4:

<span>
    Off
    <span class="custom-control custom-switch" style="display: inline-block;">
        <input type="checkbox" name="mySwitch" id="mySwitch"
               class="custom-control-input" />
        <label class="custom-control-label" for="mySwitch">On</label>
    </span>
</span>

Changing the switch's display from 'block' to 'inline-block'

tdahman1325
  • 210
  • 3
  • 6
-3

Please refer to this page to add text -> https://mdbootstrap.com/docs/jquery/forms/switch/

vc2310
  • 131
  • 1
  • 1
  • 7