Skip to content

Instantly share code, notes, and snippets.

@elliotboney
Last active November 15, 2017 14:04
Show Gist options
  • Save elliotboney/c051b4c71cdfd8991c60e894c64b7963 to your computer and use it in GitHub Desktop.
Save elliotboney/c051b4c71cdfd8991c60e894c64b7963 to your computer and use it in GitHub Desktop.
Missing visible-** and hidden-** in Bootstrap v4
// Restore Bootstrap 4 alpha "hidden" utility classes.
@each $bp in map-keys($grid-breakpoints) {
.hidden-#{$bp}-up {
@include media-breakpoint-up($bp) {
display: none !important;
}
}
.hidden-#{$bp}-down {
@include media-breakpoint-down($bp) {
display: none !important;
}
}
.hidden-#{$bp}-only{
@include media-breakpoint-only($bp) {
display:none !important;
}
}
}

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
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment