diff options
| -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. |