Doc update - remove media-breakpoint-up(xs) (#26316)

* Doc update - remove media-breakpoint-up(xs)

If media-breakpoint-down(xl) is not listed, then media-breakpoint-up(xs) does not need to be listed either.
The above 4 media queries are now aligned with the 4 media-breakpoint-up mixins (just like their media-breakpoint-down counterparts).

* Improve media-breakpoint-up/down docs

diff --git a/docs/4.1/layout/overview.md b/docs/4.1/layout/overview.md
index 0b2f44d33fb9b9fae6be7e3ce0dc3a552ae3f597..102e25727dee8aad21a56722941feeaa66100893 100644 (file)
--- a/docs/4.1/layout/overview.md
+++ b/docs/4.1/layout/overview.md
@@ -52,7 +52,7 @@ Bootstrap primarily uses the following media query ranges—or breakpoints—in
 
 {% highlight scss %}
 // Extra small devices (portrait phones, less than 576px)
-// No media query since this is the default in Bootstrap
+// No media query for `xs` since this is the default in Bootstrap
 
 // Small devices (landscape phones, 576px and up)
 @media (min-width: 576px) { ... }
@@ -70,15 +70,18 @@ Bootstrap primarily uses the following media query ranges—or breakpoints—in
 Since we write our source CSS in Sass, all our media queries are available via Sass mixins:
 
 {% highlight scss %}
-@include media-breakpoint-up(xs) { ... }
+// No media query necessary for xs breakpoint as it's effectively `@media (min-width: 0) { ... }`
 @include media-breakpoint-up(sm) { ... }
 @include media-breakpoint-up(md) { ... }
 @include media-breakpoint-up(lg) { ... }
 @include media-breakpoint-up(xl) { ... }
 
-// Example usage:
+// Example: Hide starting at `min-width: 0`, and then show at the `sm` breakpoint
+.custom-class {
+  display: none;
+}
 @include media-breakpoint-up(sm) {
-  .some-class {
+  .custom-class {
     display: block;
   }
 }
@@ -112,6 +115,14 @@ Once again, these media queries are also available via Sass mixins:
 @include media-breakpoint-down(sm) { ... }
 @include media-breakpoint-down(md) { ... }
 @include media-breakpoint-down(lg) { ... }
+// No media query necessary for xl breakpoint as it has no upper bound on its width
+
+// Example: Style from medium breakpoint and down
+@include media-breakpoint-down(md) {
+  .custom-class {
+    display: block;
+  }
+}
 {% endhighlight %}
 
 There are also media queries and mixins for targeting a single segment of screen sizes using the minimum and maximum breakpoint widths.