Bootstrap 4 invalid feedback with input group not displaying

The way Bootstrap does override the display from none to block is by checking first for a previous is-invalid class, for example! Check this CSS out:

That means, in case of an error, first is-invalid must be applied on an element and then invalid-feedback on another afterward! Like the following in Laravel, for instance:

{{-- Either following an input --}}

<input type="password" id="registerPassword"
       class="form-control @error('register_password') is-invalid @enderror"
       name="register_password" required autocomplete="new-password"
>

@error('register_password')
    <span class="invalid-feedback" role="alert">
        <strong>{{ $message }}</strong>
    </span>
@enderror

{{-- Or separately in DOM --}}

@error('register_password')
    <div class="is-invalid">...</div>

    <span class="invalid-feedback" role="alert">
        <strong>{{ $message }}</strong>
    </span>
@enderror

They haven't taken into account their own examples using input group addons and buttons, even with a column model. The markup does only facilitate "neighboring" elements, not parent > neighboring element (there is no CSS rule for that).

It seems, for now, you should fall back to Alpha 6 or program your own CSS classes accordingly. I've done the same, unfortunately.

Please note when reading my answer that this was posted just as the beta was released. :)

Boostrap 4 is very buggy. My suggestion is to replace:

 <div class="invalid-feedback">
 Text here
 </div>

With:

<div class="text-danger">
Text here
</div>

And the second one looks virtually the same and will not fail.

For a better look, try:

<div class="text-danger">
<small>Text here</small>
</div>