Skip to content

Commit 447f9f6

Browse files
DavidDeSlooveremdo
authored andcommitted
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
1 parent c111323 commit 447f9f6

File tree

1 file changed

+15
-4
lines changed

1 file changed

+15
-4
lines changed

docs/4.1/layout/overview.md

Lines changed: 15 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -52,7 +52,7 @@ Bootstrap primarily uses the following media query ranges—or breakpoints—in
5252

5353
{% highlight scss %}
5454
// Extra small devices (portrait phones, less than 576px)
55-
// No media query since this is the default in Bootstrap
55+
// No media query for `xs` since this is the default in Bootstrap
5656

5757
// Small devices (landscape phones, 576px and up)
5858
@media (min-width: 576px) { ... }
@@ -70,15 +70,18 @@ Bootstrap primarily uses the following media query ranges—or breakpoints—in
7070
Since we write our source CSS in Sass, all our media queries are available via Sass mixins:
7171

7272
{% highlight scss %}
73-
@include media-breakpoint-up(xs) { ... }
73+
// No media query necessary for xs breakpoint as it's effectively `@media (min-width: 0) { ... }`
7474
@include media-breakpoint-up(sm) { ... }
7575
@include media-breakpoint-up(md) { ... }
7676
@include media-breakpoint-up(lg) { ... }
7777
@include media-breakpoint-up(xl) { ... }
7878

79-
// Example usage:
79+
// Example: Hide starting at `min-width: 0`, and then show at the `sm` breakpoint
80+
.custom-class {
81+
display: none;
82+
}
8083
@include media-breakpoint-up(sm) {
81-
.some-class {
84+
.custom-class {
8285
display: block;
8386
}
8487
}
@@ -112,6 +115,14 @@ Once again, these media queries are also available via Sass mixins:
112115
@include media-breakpoint-down(sm) { ... }
113116
@include media-breakpoint-down(md) { ... }
114117
@include media-breakpoint-down(lg) { ... }
118+
// No media query necessary for xl breakpoint as it has no upper bound on its width
119+
120+
// Example: Style from medium breakpoint and down
121+
@include media-breakpoint-down(md) {
122+
.custom-class {
123+
display: block;
124+
}
125+
}
115126
{% endhighlight %}
116127

117128
There are also media queries and mixins for targeting a single segment of screen sizes using the minimum and maximum breakpoint widths.

0 commit comments

Comments
 (0)