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.

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet" />  <div class="form-group">    <label for="label">Label</label>    <div class="input-group">        <div class="input-group-addon">        label      </div>      <input type="text" value="" name="label" class="form-control is-invalid">    </div>      <div class="invalid-feedback is-invalid">      <strong>Invalid Label</strong>    </div>  </div>

How are you meant to display an invalid message while using .input-group?

Adding the following CSS works as a workaround, but it seems odd.

.form-group.is-invalid {     .invalid-feedback {         display: block;     } } 

Answer 1

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> 

Answer 2

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. :)