form-check-inline and invalid-feedback rendering issue
Created by: GBH
This is a valid way to render inline inputs. In order to show invalid feedback we need to cram it on the last container there or it will be display: none. Obviously it renders like hell. (can't get JS bin to work, sorry)
<div class="form-check form-check-inline">
<input class="form-check-input is-invalid" type="checkbox" value="x" name="user[test][]" id="user_test_x" />
<label class="form-check-label" for="user_test_x">X</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input is-invalid" type="checkbox" value="y" name="user[test][]" id="user_test_y" />
<label class="form-check-label" for="user_test_y">Y</label>
<div class="invalid-feedback">is invalid</div>
</div>I don't have a solution, just providing an example.
For server-side validations it's easy to override css and add display: block for invalid-feedback.