diff --git a/docs/assets/scss/docs.scss b/docs/assets/scss/docs.scss index 8d68e31879..bf16e82a5e 100644 --- a/docs/assets/scss/docs.scss +++ b/docs/assets/scss/docs.scss @@ -1244,10 +1244,7 @@ body { .visible-on, .hidden-on { .col-xs-6 { - .hidden-xs, - .hidden-sm, - .hidden-md, - .hidden-lg { + > .not-visible { color: #999; border: 1px solid #ddd; } @@ -1256,10 +1253,7 @@ body { .visible-on, .hidden-on { .col-xs-6 { - .visible-xs-block, - .visible-sm-block, - .visible-md-block, - .visible-lg-block { + .visible { color: #468847; background-color: #dff0d8; border: 1px solid #d6e9c6; @@ -1267,6 +1261,32 @@ body { } } +@include media-breakpoint-only(xs) { + .hidden-xs-only { + display: none !important; + } +} +@include media-breakpoint-only(sm) { + .hidden-sm-only { + display: none !important; + } +} +@include media-breakpoint-only(md) { + .hidden-md-only { + display: none !important; + } +} +@include media-breakpoint-only(lg) { + .hidden-lg-only { + display: none !important; + } +} +@include media-breakpoint-only(xl) { + .hidden-xl-only { + display: none !important; + } +} + // // Brand guidelines // diff --git a/docs/layout/media-queries.md b/docs/layout/media-queries.md index f5d66a4173..d628b4589f 100644 --- a/docs/layout/media-queries.md +++ b/docs/layout/media-queries.md @@ -7,48 +7,64 @@ Since Bootstrap is designed to be mobile-first, we employ media queries in our C ### Common queries -Bootstrap uses the following media query ranges in our source Sass files for key breakpoints in our layout, grid system, and components. +Bootstrap mainly uses the following media query ranges in our source Sass files for key breakpoints in our layout, grid system, and components. {% highlight scss %} -/* Extra small devices (phones, less than 768px) */ +/* Extra small devices (portrait phones, less than ???px) */ /* No media query since this is the default in Bootstrap */ -/* Small devices (tablets, 768px and up) */ -@media (min-width: @screen-sm-min) { ... } +/* Small devices (landscape phones, 34em and up) */ +@media (min-width: 34em) { ... } -/* Medium devices (desktops, 992px and up) */ -@media (min-width: @screen-md-min) { ... } +/* Medium devices (tablets, 48em and up) */ +@media (min-width: 48em) { ... } -/* Large devices (large desktops, 1200px and up) */ -@media (min-width: @screen-lg-min) { ... } +/* Large devices (desktops, 62em and up) */ +@media (min-width: 62em) { ... } + +/* Extra large devices (large desktops, 75em and up) */ +@media (min-width: 75em) { ... } {% endhighlight %} -We occasionally expand on these media queries to include a max-width to limit CSS to a narrower set of devices. - +These media queries are available via Sass mixins: {% highlight scss %} -@media (max-width: @screen-xs-max) { ... } -@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... } -@media (min-width: @screen-md-min) and (max-width: @screen-md-max) { ... } -@media (min-width: @screen-lg-min) { ... } -{% endhighlight %} +@include media-breakpoint-up(xs) { ... } +@include media-breakpoint-up(sm) { ... } +@include media-breakpoint-up(md) { ... } +@include media-breakpoint-up(lg) { ... } +@include media-breakpoint-up(lxl) { ... } -### Sass mixins - -The above media queries are also available via Sass mixins: - -{% highlight scss %} -// List of mixins -@include media-xs { ... } -@include media-sm { ... } -@include media-sm-max { ... } -@include media-md { ... } -@include media-md-max { ... } -@include media-lg { ... } - -// Usage -@include media-xs { - .element { +// Example usage: +@include media-breakpoint-up(sm) { + .some-class { display: block; } } {% endhighlight %} + +We occasionally use media queries that go in the other direction (the given screen size *or smaller*): +{% highlight scss %} +/* Extra small devices (portrait phones, less than 34em) */ +@media (max-width: 33.9em) { ... } + +/* Small devices (landscape phones, less than 48em) */ +@media (max-width: 47.9em) { ... } + +/* Medium devices (tablets, less than 62em) */ +@media (max-width: 61.9em) { ... } + +/* Large devices (desktops, less than 75em) */ +@media (max-width: 74.9em) { ... } + +/* Extra large devices (large desktops) */ +/* No media query since the extra-large breakpoint has no upper bound on its width */ +{% endhighlight %} + +These media queries are available via Sass mixins: +{% highlight scss %} +@include media-breakpoint-down(xs) { ... } +@include media-breakpoint-down(sm) { ... } +@include media-breakpoint-down(md) { ... } +@include media-breakpoint-down(lg) { ... } +@include media-breakpoint-down(lxl) { ... } +{% endhighlight %} diff --git a/docs/layout/responsive-utilities.md b/docs/layout/responsive-utilities.md index 472682f6bf..a9dd4cdb0b 100644 --- a/docs/layout/responsive-utilities.md +++ b/docs/layout/responsive-utilities.md @@ -9,7 +9,11 @@ Try to use these on a limited basis and avoid creating entirely different versio ## Available classes -Use a single or combination of the available classes for toggling content across viewport breakpoints. +* The `.hidden-*-up` classes hide the element when the viewport is at the given breakpoint or wider. For example, `.hidden-md-up` hides an element on medium, large, and extra-large viewports. +* The `.hidden-*-down` classes hide the element when the viewport is at the given breakpoint or smaller. For example, `.hidden-md-down` hides an element on extra-small, small, and medium viewports). +* There are no explicit "visible"/"show" responsive utility classes; you make an element visible by simply not hiding it at that breakpoint 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. For example, `.hidden-sm-down.hidden-xl-up` shows the element only on medium and large viewports. Using multiple `.hidden-*-up` classes or multiple `.hidden-*-down` classes is redundant and pointless. +* These 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 breakpoint sizes; you will instead need to use custom CSS in such cases.
@@ -18,76 +22,102 @@ Use a single or combination of the available classes for toggling content across + - - - - - - - - + - - - - - - - - - - - - - - + - - - + + - - + + + - - - + + + + - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + @@ -97,54 +127,32 @@ Use a single or combination of the available classes for toggling content across
Extra small devices - Phones (<768px) + Portrait phones (<34em) Small devices - Tablets (≥768px) + Landscape phones (≥34em) Medium devices - Desktops (≥992px) + Tablets (≥48em) Large devices - Desktops (≥1200px) + Desktops (≥62em) + + Extra large devices + Desktops (≥75em)
.visible-xs-*Visible
.visible-sm-*.hidden-xs-down Visible
.visible-md-* Visible
.visible-lg-*Visible Visible
.hidden-xs.hidden-sm-down Visible Visible Visible
.hidden-smVisible.hidden-md-down Visible Visible
.hidden-mdVisibleVisible.hidden-lg-down Visible
.hidden-lg.hidden-xl-down
.hidden-xs-up
.hidden-sm-upVisible
.hidden-md-upVisibleVisible
.hidden-lg-upVisibleVisibleVisible
.hidden-xl-upVisible Visible Visible Visible
-As of v3.2.0, the `.visible-*-*` classes for each breakpoint come in three variations, one for each CSS `display` property value listed below. - -
- - - - - - - - - - - - - - - - - - - - - -
Group of classesCSS display
.visible-*-blockdisplay: block;
.visible-*-inlinedisplay: inline;
.visible-*-inline-blockdisplay: inline-block;
-
-

So, for extra small (xs) screens for example, the available .visible-*-* classes are: .visible-xs-block, .visible-xs-inline, and .visible-xs-inline-block.

-

Print classes

Similar to the regular responsive classes, use these for toggling content for print.

- + - + - + + + + + + + + + + + @@ -159,106 +167,63 @@ As of v3.2.0, the `.visible-*-*` classes for each breakpoint come in three varia Resize your browser or load on different devices to test the responsive utility classes. -### Visible on... - Green checkmarks indicate the element **is visible** in your current viewport.
- - ✔ Visible on x-small + ✔ Visible on extra small + Extra small
- - ✔ Visible on small -
-
-
- Medium - ✔ Visible on medium + ✔ Visible on small or narrower + Small or narrower
- - ✔ Visible on large + ✔ Visible on medium or narrower + Medium or narrower +
+
+ ✔ Visible on large or narrower + Large or narrower
-
- - ✔ Visible on x-small and small +
+ ✔ Visible on small or wider + Small or wider
-
- - ✔ Visible on medium and large +
+ ✔ Visible on medium or wider + Medium or wider
-
-
- - ✔ Visible on x-small and medium +
+ ✔ Visible on large or wider + Large or wider
-
- - ✔ Visible on small and large -
-
-
- - ✔ Visible on x-small and large -
-
- - ✔ Visible on small and medium +
+ ✔ Visible on extra large + Extra large
- -### Hidden on... - -Here, green checkmarks also indicate the element **is hidden** in your current viewport. - -
+
- - ✔ Hidden on x-small + ✔ Your viewport is exactly extra small + Your viewport is NOT exactly extra small
- - ✔ Hidden on small -
-
-
- Medium - ✔ Hidden on medium + ✔ Your viewport is exactly small + Your viewport is NOT exactly small
- - ✔ Hidden on large -
-
-
-
- - ✔ Hidden on x-small and small -
-
- - ✔ Hidden on medium and large -
-
-
- - ✔ Hidden on x-small and medium -
-
- - ✔ Hidden on small and large -
-
-
- - ✔ Hidden on x-small and large -
-
- - ✔ 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 e1fff04e75..a03be5dea6 100644 --- a/docs/migration.md +++ b/docs/migration.md @@ -67,7 +67,7 @@ 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 custom CSS in such cases. +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
ClassesClass Browser Print
- .visible-print-block
- .visible-print-inline
- .visible-print-inline-block - 		.visible-print-block VisibleVisible
(as display: block)
.visible-print-inlineVisible
(as display: inline)
.visible-print-inline-blockVisible
(as display: inline-block)
.hidden-print