3

I use Bootstrap 5 and I wand to use a switch-toggle.

I don't want to use any other addons, but only with bootstrap.

How to put a Text BEFORE the toggle switch.

This does not work:

<div class="form-check form-switch">
  off
  <input type="checkbox" class="form-check-input" id="site_state">
  <label for="site_state" class="form-check-label">on</label>
</div>

Anyone have an idea ?

Akkie
  • 41
  • 1
  • 6

2 Answers2

8

What if you put your Off label before the checkbox and make everything display: inline-block?

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet"/>


<div class="container">
    <div class="row">
        <div class="col">
            <div class="d-inline-block me-1">Off</div>
            <div class="form-check form-switch d-inline-block">
                <input type="checkbox" class="form-check-input" id="site_state" style="cursor: pointer;">
                <label for="site_state" class="form-check-label">On</label>
                </div>
        </div>
    </div>
</div>
Rich DeBourke
  • 2,873
  • 2
  • 15
  • 17
  • Hi. Of course, I also thought of "d-inline-block" first, but I hadn't thought of constructing a complete scaffolding around it. But the solution works and I would like to thank you very much! – Akkie Mar 11 '21 at 19:24
2

You could wrap it in a d-flex..

<div class="d-flex">
    off
    <div class="form-switch ms-2">
        <input type="checkbox" class="form-check-input" id="site_state">
    </div>
    <label for="site_state" class="form-check-label">on</label>
</div>

Demo

Carol Skelly
  • 351,302
  • 90
  • 710
  • 624