diff options
| author | Mark Otto <[email protected]> | 2020-09-22 16:33:18 -0700 |
|---|---|---|
| committer | Mark Otto <[email protected]> | 2020-09-23 13:30:11 -0700 |
| commit | 3b8c17029f605726bdb65bd277ac142aec0d37ae (patch) | |
| tree | 1992b858185084515ccf1e3e3ad42c80bc38d02a | |
| parent | fe38a85839056d951d37fa3092eb5125b50a678d (diff) | |
| download | bootstrap-3b8c17029f605726bdb65bd277ac142aec0d37ae.tar.xz bootstrap-3b8c17029f605726bdb65bd277ac142aec0d37ae.zip | |
Move styles to docs CSS
| -rw-r--r-- | site/assets/scss/_component-examples.scss | 5 | ||||
| -rw-r--r-- | site/content/docs/5.0/helpers/ratio.md | 14 |
2 files changed, 11 insertions, 8 deletions
diff --git a/site/assets/scss/_component-examples.scss b/site/assets/scss/_component-examples.scss index 4f031eec5..18b2c192e 100644 --- a/site/assets/scss/_component-examples.scss +++ b/site/assets/scss/_component-examples.scss @@ -164,10 +164,13 @@ margin-top: .5rem; margin-bottom: .5rem; } +} - // Responsive embed helpers +// Ratio helpers +.bd-example-ratios { .ratio { display: inline-block; + width: 10rem; color: $gray-600; background-color: $gray-100; border: $border-width solid $border-color; diff --git a/site/content/docs/5.0/helpers/ratio.md b/site/content/docs/5.0/helpers/ratio.md index 6feaab248..10ea9bc39 100644 --- a/site/content/docs/5.0/helpers/ratio.md +++ b/site/content/docs/5.0/helpers/ratio.md @@ -28,17 +28,17 @@ Wrap any embed, like an `<iframe>`, in a parent element with `.ratio` and an asp Aspect ratios can be customized with modifier classes. By default the following ratio classes are provided: -{{< example html >}} -<div class="ratio ratio-1x1" style="width: 10rem;"> +{{< example class="bd-example-ratios" >}} +<div class="ratio ratio-1x1"> <div class="ratio-item">1x1</div> </div> -<div class="ratio ratio-4x3" style="width: 10rem;"> +<div class="ratio ratio-4x3"> <div class="ratio-item">4x3</div> </div> -<div class="ratio ratio-16x9" style="width: 10rem;"> +<div class="ratio ratio-16x9"> <div class="ratio-item">16x9</div> </div> -<div class="ratio ratio-21x9" style="width: 10rem;"> +<div class="ratio ratio-21x9"> <div class="ratio-item">21x9</div> </div> {{< /example >}} @@ -49,8 +49,8 @@ Each `.ratio-*` class includes a CSS custom property (or CSS variable) in the se For example, to create a 2x1 aspect ratio, set `--aspect-ratio: 50%` on the `.ratio`. -{{< example html >}} -<div class="ratio" style="--aspect-ratio: 50%; width: 10rem;"> +{{< example class="bd-example-ratios" >}} +<div class="ratio" style="--aspect-ratio: 50%;"> <div class="ratio-item">2x1</div> </div> {{< /example >}} |