<h3 class="mb-3">

  Buggy:

</h3>

​

<div class="row">

  <div class="col-3">

    <div class="form-check form-switch">

      <input class="form-check-input" type="checkbox" id="switch" />

      <label class="form-check-label" for="switch">This is a very long label for the switch that should wrap</label>

    </div>

  </div>

  <div class="col-3">

    <div class="form-check">

      <input class="form-check-input" type="checkbox" id="checkbox" />

      <label class="form-check-label" for="checkbox">This is a very long label for the checkbox that should wrap</label>

    </div>

  </div>

  <div class="col-3">

    <div class="form-check">

      <input class="form-check-input" type="radio" id="radio" />

      <label class="form-check-label" for="radio">This is a very long label for the radio that should wrap</label>

    </div>

  </div>

</div>

​

<h3 class="my-3">

  Bugfix:

</h3>

​

<div class="row bugfix">

  <div class="col-3">

    <div class="form-check form-switch">

      <input class="form-check-input" type="checkbox" id="switch2" />

      <label class="form-check-label" for="switch2">This is a very long label for the switch that should wrap</label>

    </div>

  </div>

  <div class="col-3">

    <div class="form-check">

      <input class="form-check-input" type="checkbox" id="checkbox2" />

      <label class="form-check-label" for="checkbox2">This is a very long label for the checkbox that should wrap</label>

    </div>

  </div>

  <div class="col-3">

    <div class="form-check">

      <input class="form-check-input" type="radio" id="radio2" />

      <label class="form-check-label" for="radio2">This is a very long label for the radio that should wrap</label>

    </div>

  </div>

</div>

​

​