diff options
| -rw-r--r-- | docs/4.1/layout/overview.md | 19 |
1 files changed, 15 insertions, 4 deletions
diff --git a/docs/4.1/layout/overview.md b/docs/4.1/layout/overview.md index 0b2f44d33f..102e25727d 100644 --- 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. |