How do I increase the target size of a custom-checkbox in bootstrap 4?


April 2019


3 time


I'm using forms inside list items in bootstrap 4 and have been using <a href class="stretched-link"> and a small event handler inside my form controls to make the entire <li> clickable, instead of just the small label and checkbox. stretched-link increases the target to the nearest relatively positioned item.

Unfortunately compared to the standard controls the nicer custom-checkbox uses relative positioning and breaks stretched-link so that the click target is only the label text.

<link rel="stylesheet" href="" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<ul class="list-group list-group-flush">
  <li class="list-group-item">
    <div class="custom-control custom-checkbox">
      <input type="checkbox" class="custom-control-input" id="customCheck1">
      <label class="custom-control-label" for="customCheck1">Check this custom checkbox</label>

I can disable relative positioning on the custom control, but that breaks is formatting. How should I make the entire <li> control the checkbox?

0 answers