Bootstrap 4.0 invalid-feedback doesn't show

Question

I am using the Bootstrap 4.0 (non-beta) validation and have a problem to display the invalid-feedback text.

<div class="form-row">
  <label class="form-control-label">Name:</label>
  <div class="col-4">
    <input class="form-control is-invalid" min="0" type="number"/>
  </div>
    <div class="col-4">
    <div class="invalid-feedback">
    Invalid Feedback Text
    </div>
  </div>
</div>

In the above example the text "Invalid Feedback Text" is not displayed.

The reason for it is that the invalid-feedback div is not a direct sibling of the the input control.

This has been an issue with the alpha/beta versions however I was under the impression that this has been fixed in the 4.0 release. (At least the relevant ticket has been closed.)

So, how can I use the bootstrap validation if I can not have the feedback text as a direct sibling of the relevant input control? (It is simply not feasible in my application.)

Here is a fiddle: https://jsfiddle.net/zygrsrox/

Answer 1

You're right, the intention is that the input is a sibling of the feedback message. The only way you can force the invalid-feeback to show is to use something like d-block (or some custom CSS selector). Perhaps you can add d-block programatically in your app during validation.

<div class="form-row">
  <label class="form-control-label">Name:</label>
  <div class="col-4">
    <input class="form-control is-invalid" min="0" type="number"/>
  </div>
  <div class="col-4">
    <div class="invalid-feedback d-block">
    Invalid Feedback Text
    </div>
  </div>
</div>