css - has-danger no longer working on Bootstrap v4 beta?

Question

According to the Bootstrap migration guide:

Renamed .has-error to .has-danger.

However, that doesn't seem to work. Border and text has not been coloured.

For example:

<div class="form-group has-danger">
    <label class="form-control-label" for="inputDanger1">Input with danger</label>
    <input type="text" class="form-control form-control-danger" id="inputDanger1">
    <div class="form-control-feedback">Sorry, that username's taken. Try another?</div>
    <small class="form-text text-muted">Example help text that remains unchanged.</small>
</div>

Demo:

https://jsfiddle.net/uLa0spfm/

Answer 1

Managed to get it to work. @ZimSystem is correct about this.

.has-danger exist in Alpha version but it was removed in Bootstrap v4 Beta. You will need to use is-invalid selector in the input and also include class="invalid-feedback" for error message.

Here is example:

<div class="form-group has-danger">
    <label class="form-control-label">Username</label>
    <input type="text" class="form-control is-invalid">
    <div class="invalid-feedback">Sorry, that username's taken. Try another?</div>
</div>