-
-### Hidden on...
-
-Here, green checkmarks also indicate the element **is hidden** in your current viewport.
-
-
+
- Extra small
- ✔ Hidden on x-small
+ ✔ Your viewport is exactly extra small
+ Your viewport is NOT exactly extra small
- Small
- ✔ Hidden on small
-
-
-
- Medium
- ✔ Hidden on medium
+ ✔ Your viewport is exactly small
+ Your viewport is NOT exactly small
- Large
- ✔ Hidden on large
-
-
-
-
- Extra small and small
- ✔ Hidden on x-small and small
-
-
- Medium and large
- ✔ Hidden on medium and large
-
-
-
- Extra small and medium
- ✔ Hidden on x-small and medium
-
-
- Small and large
- ✔ Hidden on small and large
-
-
-
- Extra small and large
- ✔ Hidden on x-small and large
-
-
- Small and medium
- ✔ Hidden on small and medium
+ ✔ Your viewport is exactly medium
+ Your viewport is NOT exactly medium
+
+
+ ✔ Your viewport is exactly large
+ Your viewport is NOT exactly large
+
+
+ ✔ Your viewport is exactly extra large
+ Your viewport is NOT exactly extra large
diff --git a/docs/migration.md b/docs/migration.md
index c73fcaeae4..a03be5dea6 100644
--- a/docs/migration.md
+++ b/docs/migration.md
@@ -67,6 +67,8 @@ The following deprecated Less/SCSS variables have been removed in v4.0.0:
* `@screen-xs`, `@screen-xs-min`. The extra small breakpoint has no lower bound, so these variables were logically absurd. Reformulate your expression in terms of `$screen-xs-max` instead.
* `@grid-float-breakpoint`
+The responsive utility classes have been overhauled. The old classes (`.hidden-xs` `.hidden-sm` `.hidden-md` `.hidden-lg` `.visible-xs-block` `.visible-xs-inline` `.visible-xs-inline-block` `.visible-sm-block` `.visible-sm-inline` `.visible-sm-inline-block` `.visible-md-block` `.visible-md-inline` `.visible-md-inline-block` `.visible-lg-block` `.visible-lg-inline` `.visible-lg-inline-block`) are gone. They have been replaced by `.hidden-xs-up` `.hidden-xs-down` `.hidden-sm-up` `.hidden-sm-down` `.hidden-md-up` `.hidden-md-down` `.hidden-lg-up` `.hidden-lg-down`. The `.hidden-*-up` classes hide the element when the viewport is at the given breakpoint or wider (e.g. `.hidden-md-up` hides an element on medium, large, and extra-large devices). The `.hidden-*-down` classes hide the element when the viewport is at the given breakpoint or smaller (e.g. `.hidden-md-down` hides an element on extra-small, small, and medium devices). Rather than using explicit `.visible-*` classes, you make an element visible by simply not hiding it at that screen size. You can combine one `.hidden-*-up` class with one `.hidden-*-down` class to show an element only on a given interval of screen sizes (e.g. `.hidden-sm-down.hidden-xl-up` shows the element only on medium and large devices). Note that the changes to the grid breakpoints in v4 means that you'll need to go one breakpoint larger to achieve the same results (e.g. `.hidden-md` is more similar to `.hidden-lg-down` than to `.hidden-md-down`). .The new responsive utility classes don't attempt to accommodate less common cases where an element's visibility can't be expressed as a single contiguous range of viewport sizes; you will instead need to use custom CSS in such cases.
+
## Misc notes to prioritize
- Removed the `min--moz-device-pixel-ratio` typo hack for retina media queries
diff --git a/scss/_carousel.scss b/scss/_carousel.scss
index 4802aea4c9..692ac938bb 100644
--- a/scss/_carousel.scss
+++ b/scss/_carousel.scss
@@ -218,7 +218,7 @@
// Scale up controls for tablets and up
-@include media-sm {
+@include media-breakpoint-up(sm) {
// Scale up the controls a smidge
.carousel-control {
.icon-prev,
diff --git a/scss/_dropdown.scss b/scss/_dropdown.scss
index 99c7e79c95..bd96d8f225 100644
--- a/scss/_dropdown.scss
+++ b/scss/_dropdown.scss
@@ -195,7 +195,7 @@
//
// TODO: remove?
-// @include media-sm {
+// @include media-breakpoint-up(sm) {
// .navbar-right {
// .dropdown-menu {
// .dropdown-menu-right();
diff --git a/scss/_forms.scss b/scss/_forms.scss
index dd2ff33df3..f385c152f5 100644
--- a/scss/_forms.scss
+++ b/scss/_forms.scss
@@ -416,7 +416,7 @@ input[type="checkbox"] {
.form-inline {
// Kick in the inline
- @include media-sm {
+ @include media-breakpoint-up(sm) {
// Inline-block all the things for "inline"
.form-group {
display: inline-block;
@@ -516,7 +516,7 @@ input[type="checkbox"] {
// Reset spacing and right align labels, but scope to media queries so that
// labels on narrow viewports stack the same as a default form example.
- @include media-sm {
+ @include media-breakpoint-up(sm) {
.control-label {
padding-top: ($padding-base-vertical + .1); // Default padding plus a border
margin-bottom: 0;
@@ -537,14 +537,14 @@ input[type="checkbox"] {
// Quick utility class for applying `.input-lg` and `.input-sm` styles to the
// inputs and labels within a `.form-group`.
.form-group-lg {
- @include media-sm {
+ @include media-breakpoint-up(sm) {
.control-label {
padding-top: $padding-lg-vertical;
}
}
}
.form-group-sm {
- @include media-sm {
+ @include media-breakpoint-up(sm) {
.control-label {
padding-top: ($padding-sm-vertical + .1);
}
diff --git a/scss/_grid.scss b/scss/_grid.scss
index 1129cff6d0..ed9f232af0 100644
--- a/scss/_grid.scss
+++ b/scss/_grid.scss
@@ -12,7 +12,7 @@
// For each breakpoint, define the maximum width of the container in a media query
@each $breakpoint, $container-max-width in $container-max-widths {
- @include media-breakpoint-min($breakpoint) {
+ @include media-breakpoint-up($breakpoint) {
max-width: $container-max-width;
}
}
diff --git a/scss/_jumbotron.scss b/scss/_jumbotron.scss
index 61a5918b34..f826cd6160 100644
--- a/scss/_jumbotron.scss
+++ b/scss/_jumbotron.scss
@@ -19,7 +19,7 @@
border-top-color: darken($jumbotron-bg, 10%);
}
-@include media-sm {
+@include media-breakpoint-up(sm) {
.jumbotron {
padding: ($jumbotron-padding * 2) $jumbotron-padding;
}
diff --git a/scss/_mixins.scss b/scss/_mixins.scss
index 5cba1afdf8..36f52a8932 100644
--- a/scss/_mixins.scss
+++ b/scss/_mixins.scss
@@ -25,7 +25,6 @@
// Utilities
@import "mixins/breakpoints";
-@import "mixins/media-queries";
@import "mixins/hide-text";
@import "mixins/image";
@import "mixins/label";
diff --git a/scss/_modal.scss b/scss/_modal.scss
index 2566c3ef2d..da3b90c0b4 100644
--- a/scss/_modal.scss
+++ b/scss/_modal.scss
@@ -126,7 +126,7 @@
}
// Scale up the modal
-@include media-sm {
+@include media-breakpoint-up(sm) {
// Automatically set modal's width for larger viewports
.modal-dialog {
width: $modal-md;
@@ -140,6 +140,6 @@
.modal-sm { width: $modal-sm; }
}
-@include media-md {
+@include media-breakpoint-up(md) {
.modal-lg { width: $modal-lg; }
}
diff --git a/scss/_navbar.scss b/scss/_navbar.scss
index b163dad9cd..2c12049a01 100644
--- a/scss/_navbar.scss
+++ b/scss/_navbar.scss
@@ -14,7 +14,7 @@
margin-bottom: $navbar-margin-bottom;
@include clearfix;
- @include media-sm {
+ @include media-breakpoint-up(sm) {
@include border-radius($navbar-border-radius);
}
}
@@ -30,7 +30,7 @@
.navbar-static-top {
z-index: $zindex-navbar;
- @include media-sm {
+ @include media-breakpoint-up(sm) {
@include border-radius(0);
}
}
@@ -45,7 +45,7 @@
margin-bottom: 0; // override .navbar defaults
// Undo the rounded corners
- @include media-sm {
+ @include media-breakpoint-up(sm) {
@include border-radius(0);
}
}
@@ -119,7 +119,7 @@
@extend .form-inline;
.form-group {
- @include media-sm {
+ @include media-breakpoint-up(sm) {
margin-bottom: 5px;
&:last-child {
@@ -132,7 +132,7 @@
// @include navbar-vertical-align($input-height-base);
// Undo 100% width for pull classes
- @include media-sm {
+ @include media-breakpoint-up(sm) {
width: auto;
padding-top: 0;
padding-bottom: 0;
@@ -181,7 +181,7 @@
.navbar-text {
// @include navbar-vertical-align($line-height-computed);
- @include media-sm {
+ @include media-breakpoint-up(sm) {
float: left;
margin-right: $navbar-padding-horizontal;
margin-left: $navbar-padding-horizontal;
@@ -197,7 +197,7 @@
//
// Declared after the navbar components to ensure more specificity on the margins.
-@include media-sm {
+@include media-breakpoint-up(sm) {
.navbar-left {
@include pull-left();
}
diff --git a/scss/_utilities-responsive.scss b/scss/_utilities-responsive.scss
index 8c77d1833c..837cda7b9a 100644
--- a/scss/_utilities-responsive.scss
+++ b/scss/_utilities-responsive.scss
@@ -2,6 +2,19 @@
// Responsive: 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;
+ }
+ }
+}
+
// IE10 in Windows (Phone) 8
//
@@ -23,98 +36,6 @@
}
-.visible-xs-block,
-.visible-xs-inline,
-.visible-xs-inline-block,
-.visible-sm-block,
-.visible-sm-inline,
-.visible-sm-inline-block,
-.visible-md-block,
-.visible-md-inline,
-.visible-md-inline-block,
-.visible-lg-block,
-.visible-lg-inline,
-.visible-lg-inline-block {
- display: none !important;
-}
-
-.visible-xs-block {
- @include media-xs {
- display: block !important;
- }
-}
-.visible-xs-inline {
- @include media-xs {
- display: inline !important;
- }
-}
-.visible-xs-inline-block {
- @include media-xs {
- display: inline-block !important;
- }
-}
-
-.visible-sm-block {
- @include media-sm-max {
- display: block !important;
- }
-}
-.visible-sm-inline {
- @include media-sm-max {
- display: inline !important;
- }
-}
-.visible-sm-inline-block {
- @include media-sm-max {
- display: inline-block !important;
- }
-}
-
-.visible-md-block {
- @include media-md-max {
- display: block !important;
- }
-}
-.visible-md-inline {
- @include media-md-max {
- display: inline !important;
- }
-}
-.visible-md-inline-block {
- @include media-md-max {
- display: inline-block !important;
- }
-}
-
-.visible-lg-block {
- @include media-lg {
- display: block !important;
- }
-}
-.visible-lg-inline {
- @include media-lg {
- display: inline !important;
- }
-}
-.visible-lg-inline-block {
- @include media-lg {
- display: inline-block !important;
- }
-}
-
-@include media-sm-max {
- @include responsive-invisibility(".hidden-sm");
-}
-
-@include media-md-max {
- @include responsive-invisibility(".hidden-md");
-}
-
-@include media-lg {
- @include responsive-invisibility(".hidden-lg");
-}
-
-
// Print utilities
//
// Media queries are placed on the inside to be mixin-friendly.
diff --git a/scss/mixins/_breakpoints.scss b/scss/mixins/_breakpoints.scss
index 71a15cd043..232b9416f9 100644
--- a/scss/mixins/_breakpoints.scss
+++ b/scss/mixins/_breakpoints.scss
@@ -39,7 +39,8 @@
}
// Media of at least the minimum breakpoint width. No query for the smallest breakpoint.
-@mixin media-breakpoint-min($name, $breakpoints: $grid-breakpoints) {
+// Makes the @content apply to the given breakpoint and wider.
+@mixin media-breakpoint-up($name, $breakpoints: $grid-breakpoints) {
$min: breakpoint-min($name, $breakpoints);
@if $min {
@media (min-width: $min) {
@@ -51,7 +52,8 @@
}
// Media of at most the maximum breakpoint width. No query for the largest breakpoint.
-@mixin media-breakpoint-max($name, $breakpoints: $grid-breakpoints) {
+// Makes the @content apply to the given breakpoint and narrower.
+@mixin media-breakpoint-down($name, $breakpoints: $grid-breakpoints) {
$max: breakpoint-max($name, $breakpoints);
@if $max {
@media (max-width: $max) {
@@ -64,6 +66,7 @@
// Media between the breakpoint's minimum and maximum widths.
// No minimum for the smallest breakpoint, and no maximum for the largest one.
+// Makes the @content apply only to the given breakpoint, not viewports any wider or narrower.
@mixin media-breakpoint-only($name, $breakpoints: $grid-breakpoints) {
// Nested media query combination does not work in libsass yet
// https://github.com/sass/libsass/issues/185
@@ -76,8 +79,8 @@
}
} @else {
// One of min or max is a no-op, so this branch is not affected by libsass#185
- @include media-breakpoint-min($name, $breakpoints) {
- @include media-breakpoint-max($name, $breakpoints) {
+ @include media-breakpoint-up($name, $breakpoints) {
+ @include media-breakpoint-down($name, $breakpoints) {
@content;
}
}
diff --git a/scss/mixins/_grid-framework.scss b/scss/mixins/_grid-framework.scss
index 0d346db57d..32705025e0 100644
--- a/scss/mixins/_grid-framework.scss
+++ b/scss/mixins/_grid-framework.scss
@@ -19,7 +19,7 @@
@extend %grid-column;
}
}
- @include media-breakpoint-min($breakpoint) {
+ @include media-breakpoint-up($breakpoint) {
// Work around cross-media @extend (https://github.com/sass/sass/issues/1050)
%grid-column-float-#{$breakpoint} {
float: left;
diff --git a/scss/mixins/_media-queries.scss b/scss/mixins/_media-queries.scss
deleted file mode 100644
index 28130d2e7e..0000000000
--- a/scss/mixins/_media-queries.scss
+++ /dev/null
@@ -1,25 +0,0 @@
-// Media query mixins for default breakpoints
-
-@mixin media-xs() {
- @include media-breakpoint-max(xs) { @content }
-}
-
-@mixin media-sm() {
- @include media-breakpoint-min(sm) { @content }
-}
-
-@mixin media-sm-max() {
- @include media-breakpoint-only(sm) { @content }
-}
-
-@mixin media-md() {
- @include media-breakpoint-min(md) { @content }
-}
-
-@mixin media-md-max() {
- @include media-breakpoint-only(md) { @content }
-}
-
-@mixin media-lg() {
- @include media-breakpoint-min(lg) { @content }
-}