diff options
| author | Mark Otto <[email protected]> | 2020-09-22 16:38:58 -0700 |
|---|---|---|
| committer | Mark Otto <[email protected]> | 2020-09-23 13:30:11 -0700 |
| commit | 73e56404050fc13a5da3bb031fba0980406e7e6c (patch) | |
| tree | de2daa0e021ad71f9366977a8a47c724c49cf7b5 | |
| parent | 3b8c17029f605726bdb65bd277ac142aec0d37ae (diff) | |
| download | bootstrap-73e56404050fc13a5da3bb031fba0980406e7e6c.tar.xz bootstrap-73e56404050fc13a5da3bb031fba0980406e7e6c.zip | |
Add example of responsive behavior for aspect ratios
| -rw-r--r-- | site/assets/scss/_component-examples.scss | 9 | ||||
| -rw-r--r-- | site/content/docs/5.0/helpers/ratio.md | 17 |
2 files changed, 26 insertions, 0 deletions
diff --git a/site/assets/scss/_component-examples.scss b/site/assets/scss/_component-examples.scss index 18b2c192e..5ced39351 100644 --- a/site/assets/scss/_component-examples.scss +++ b/site/assets/scss/_component-examples.scss @@ -181,6 +181,15 @@ justify-content: center; } } +.bd-example-ratios-breakpoint { + .ratio-4x3 { + width: 16rem; + + @include media-breakpoint-up(md) { + --aspect-ratio: 50%; // 2x1 + } + } +} .bd-example-modal { background-color: #fafafa; diff --git a/site/content/docs/5.0/helpers/ratio.md b/site/content/docs/5.0/helpers/ratio.md index 10ea9bc39..df24c1c60 100644 --- a/site/content/docs/5.0/helpers/ratio.md +++ b/site/content/docs/5.0/helpers/ratio.md @@ -55,6 +55,23 @@ For example, to create a 2x1 aspect ratio, set `--aspect-ratio: 50%` on the `.ra </div> {{< /example >}} +This CSS variable makes it easy to modify the aspect ratio across breakpoints. The following is 4x3 to start, but changes to a custom 2x1 at the medium breakpoint. + +{{< highlight scss >}} +.ratio-4x3 { + @include media-breakpoint-up(md) { + --aspect-ratio: 50%; // 2x1 + } +} +{{< /highlight >}} + +{{< example class="bd-example-ratios bd-example-ratios-breakpoint" >}} +<div class="ratio ratio-4x3"> + <div class="ratio-item">4x3, then 2x1</div> +</div> +{{< /example >}} + + ## Sass map Within `_variables.scss`, you can change the aspect ratios you want to use. Here's our default `$ratio-aspect-ratios` map. Modify the map as you like and recompile your Sass to put them to use. |