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 t

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>

Answer 2

Being that Bootstrap 4 is still in Beta, much of the migration documentation is not in sync with actual releases. Validation has changed in beta, and has-danger no longer exists.

Also see: Can't make the validation work in Bootstrap 4

Answer 3

It would appear that the beta version doesn't have the .has-* classes. As a work around, use the alpha-6 version

https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css

Updated fiddle with new CDN.

https://jsfiddle.net/uLa0spfm/1/