[Bootstrap 4] Adding 'd-flex' class to HasError component

[stevebauman]

For bootstrap 4 there is an issue that the is-invalid error message won't be displayed unless it's a child element of the input.

This means for input-group's and form-group's, the error message isn't displayed since it's default is display:none:

twbs/bootstrap#23454

So far the only clean solution to this has been forgetting the input box itself and apply the d-flex class onto the error message div so at least that is displayed.

What are your thoughts on applying this to the HasError component?

[cretueusebiu]

I usually just add d-block where I encounter this:

<has-error class="d-block"/>

Or just add some global css:

.invalid-feedback {
  display: block;
}

You can always just create your own HasError.vue and implement it in another way.
I do this when I'm working with other frameworks than Bootstrap.

[stevebauman]

Thanks for the quick response!

Yea sounds good, I'll just copy the HasError.vue component and apply the d-block class for now, until Bootstrap fixes it.

Appreciate your time.