Skip to content

Commit

Permalink
Doc update - remove media-breakpoint-up(xs) (#26316)
Browse files Browse the repository at this point in the history
* 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
  • Loading branch information
DavidDeSloovere authored and mdo committed Apr 29, 2018
1 parent c111323 commit 447f9f6
Showing 1 changed file with 15 additions and 4 deletions.
19 changes: 15 additions & 4 deletions docs/4.1/layout/overview.md
Original file line number Diff line number Diff line change
Expand Up @@ -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) { ... }
Expand All @@ -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;
}
}
Expand Down Expand Up @@ -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.
Expand Down

0 comments on commit 447f9f6

Please sign in to comment.