Bootstrap: invalid feedback stays hidden when use in a form group with a custom checkbox

[vpratfr]

I have a custom checkbox which gets a validation error and the invalid-feedback div stays with display-none.

Below is the code generated. A message explaining why the checkbox must be checked is sometimes important.

<div class="form-group">
   <div class="custom-control custom-checkbox is-invalid" id="agree_terms_wrapper">
      <input class="custom-control-input is-invalid" type="checkbox" name="agree_terms" id="agree_terms" value="1">
      <label class="custom-control-label" for="agree_terms">I agree to the terms and conditions</label>
   </div>
   <div class="invalid-feedback">Terms and conditions must be carefully read and accepted. You cannot access our service otherwise.</div>
</div>

[morrissey-ingenious]

Your invalid-feedback div needs to be inside the the custom-control div

<div class="form-group">
   <div class="custom-control custom-checkbox is-invalid" id="agree_terms_wrapper">
      <input class="custom-control-input is-invalid" type="checkbox" name="agree_terms" id="agree_terms" value="1">
      <label class="custom-control-label" for="agree_terms">I agree to the terms and conditions</label>
       <div class="invalid-feedback">Terms and conditions must be carefully read and accepted. You cannot access our service otherwise.</div>
   </div>
</div>

[vpratfr]

Whops. My bad :/ I had skipped that part of the docs. Thanks.

[racl101]

This Bootstrap 4 form validation error messages feature is insanely confusing and frustrating. I know so many people who have issues with it. It doesn't seem very intuitive. It was much simpler under BS3.

[Abdulmatin1]

To fix this issue use class="invalid-feedback d-block"
it works perfect.

[kamilkahar90]

sorry if my comment a little bit late... just solved it by myself... u need to put form-control class in the input