Search code examples
htmlbootstrap-4

Overlapping text under a switch in html

I want to incorporate a selector switch on my website, but the label on the left side overlaps below the switch. Any ideas on how to solve this so that both labels (texts) are perfectly distributed on each side of the switch?

My code:

    <div class="row mb-4">
      <div class="col text-center">
        <div class="custom-control custom-switch mx-auto justify-content-center align-items-center" style="height: 40px;">
          <label class="align-self-start" style="margin: 0 5px;">Solo el periodo</label>
          <input type="checkbox" class="custom-control-input" id="acumulado-switch" checked>
          <label class="custom-control-label" style="margin: 0 5px;">Acumulado</label>
        </div>
      </div>

enter image description here

Solution

  • You could increase the margin of either the left or right label to compensate for the width of the switch.

    <div class="row mb-4">
  <div class="col text-center">
    <div class="custom-control custom-switch mx-auto justify-content-center align-items-center" style="height: 40px;">
      <label class="align-self-start" style="margin: 0 5px;">Solo el periodo</label>
      <input type="checkbox" class="custom-control-input" id="acumulado-switch" checked>
      <label class="custom-control-label" style="margin: 0 5px 0 35px;">Acumulado</label>
    </div>
  </div>
</div>

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.4.1/dist/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">