Custom checkbox without label's "for" attribute (Bootstrap 4)

Question

Is there a way to still have the Bootstrap 4 custom checkbox styling without using the id on the input and the attribute for on the label? The styling for checked is not there when you remove it.

Example:

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<div class="custom-control custom-checkbox mb-3">
  <input type="checkbox" class="custom-control-input" id="customControlValidation1" required>
  <label class="custom-control-label">Check this custom checkbox</label>
</div>

I've tried wrapping the input with label, but that doesn't seem to do anything either. Is there a way I could avoid giving the input a static id and still get the Boostrap styled checkbox? Thanks!

Answer 1

Here is simplest solution. Label should be used as wrapper for checkbox being clickable.

<div class="custom-control custom-checkbox">
  <label><input type="checkbox" name="checkbox-name" class="custom-control-input">
    <div class="custom-control-label"></div>
    </label>
</div>