Bootstrap 4 invalid feedback with input group not displaying

Question

I have been looking into Bootstrap 4 - beta, however when using .is-invalid with .input-group it doesn\'t seem to show up.

Answer 1

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 --}}



@error('register_password')
    
        {{ $message }}
    
@enderror

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

@error('register_password')
    
...

    
        {{ $message }}
    
@enderror