Missing visible-** and hidden-** in Bootstrap v4
The hidden-* and visible-* classes no longer exist in Bootstrap 4 Beta. If you want to hide an element on specific tiers or breakpoints in Bootstrap 4, use the d-* display classes accordingly. Remember xs is the default (implied) breakpoint, unless overridden by a larger breakpoint.
Old Class | New Class |
---|---|
hidden-xs-down |
d-none d-sm-block |
hidden-sm-down |
d-none d-md-block |
hidden-md-down |
d-none d-lg-block |
hidden-lg-down |
d-none d-xl-block |
hidden-xl-down |
d-none (same as hidden ) |
hidden-xs-up |
d-none (same as hidden ) |
hidden-sm-up |
d-sm-none |
hidden-md-up |
d-md-none |
hidden-lg-up |
d-lg-none |
hidden-xl-up |
d-xl-none |
hidden-xs (only) |
d-none d-sm-block (same as hidden-xs-down ) |
hidden-sm (only) |
d-block d-sm-none d-md-block |
hidden-md (only) |
d-block d-md-none d-lg-block |
hidden-lg (only) |
d-block d-lg-none d-xl-block |
hidden-xl (only) |
d-block d-xl-none |
visible-xs (only) |
d-block d-sm-none |
visible-sm (only) |
d-none d-sm-block d-md-none |
visible-md (only) |
d-none d-md-block d-lg-none |
visible-lg (only) |
d-none d-lg-block d-xl-none |
visible-xl (only) |
d-none d-xl-block |