@import "helpers/colored-links";
@import "helpers/focus-ring";
@import "helpers/icon-link";
-@import "helpers/ratio";
@import "helpers/position";
@import "helpers/stacks";
@import "helpers/visually-hidden";
values: baseline top middle bottom text-bottom text-top
),
// scss-docs-end utils-vertical-align
+ // scss-docs-start utils-aspect-ratio
+ "aspect-ratio": (
+ property: aspect-ratio,
+ class: ratio,
+ values: $aspect-ratios
+ ),
+ // scss-docs-end utils-aspect-ratio
// scss-docs-start utils-float
"float": (
responsive: true,
// scss-docs-start aspect-ratios
$aspect-ratios: (
- "1x1": 100%,
- "4x3": calc(3 / 4 * 100%),
- "16x9": calc(9 / 16 * 100%),
- "21x9": calc(9 / 21 * 100%)
+ "auto": auto,
+ "1x1": #{"1 / 1"},
+ "4x3": #{"4 / 3"},
+ "16x9": #{"16 / 9"},
+ "21x9": #{"21 / 9"}
) !default;
// scss-docs-end aspect-ratios
+++ /dev/null
-// Credit: Nicolas Gallagher and SUIT CSS.
-
-.ratio {
- position: relative;
- width: 100%;
-
- &::before {
- display: block;
- padding-top: var(--#{$prefix}aspect-ratio);
- content: "";
- }
-
- > * {
- position: absolute;
- top: 0;
- left: 0;
- width: 100%;
- height: 100%;
- }
-}
-
-@each $key, $ratio in $aspect-ratios {
- .ratio-#{$key} {
- --#{$prefix}aspect-ratio: #{$ratio};
- }
-}
- title: Focus ring
- title: Icon link
- title: Position
- - title: Ratio
- title: Stacks
- title: Stretched link
- title: Text truncation
icon_color: red
pages:
- title: API
+ - title: Aspect ratio
- title: Background
- title: Borders
- title: Colors
+++ /dev/null
----
-title: Ratios
-description: Use generated pseudo elements to make an element maintain the aspect ratio of your choosing. Perfect for responsively handling video or slideshow embeds based on the width of the parent.
-toc: true
----
-
-## About
-
-Use the ratio helper to manage the aspect ratios of external content like `<iframe>`s, `<embed>`s, `<video>`s, and `<object>`s. These helpers also can be used on any standard HTML child element (e.g., a `<div>` or `<img>`). Styles are applied from the parent `.ratio` class directly to the child.
-
-Aspect ratios are declared in a Sass map and included in each class via CSS variable, which also allows [custom aspect ratios](#custom-ratios).
-
-<Callout>
-**Pro-Tip!** You don’t need `frameborder="0"` on your `<iframe>`s as we override that for you in [Reboot]([[docsref:/content/reboot]]).
-</Callout>
-
-## Example
-
-Wrap any embed, like an `<iframe>`, in a parent element with `.ratio` and an aspect ratio class. The immediate child element is automatically sized thanks to our universal selector `.ratio > *`.
-
-<Example code={`<div class="ratio ratio-16x9">
- <iframe src="https://www.youtube.com/embed/zpOULjyy-n8?rel=0" title="YouTube video" allowfullscreen></iframe>
- </div>`} />
-
-## Aspect ratios
-
-Aspect ratios can be customized with modifier classes. By default the following ratio classes are provided:
-
-<Example class="bd-example-ratios" code={`<div class="ratio ratio-1x1">
- <div>1x1</div>
- </div>
- <div class="ratio ratio-4x3">
- <div>4x3</div>
- </div>
- <div class="ratio ratio-16x9">
- <div>16x9</div>
- </div>
- <div class="ratio ratio-21x9">
- <div>21x9</div>
- </div>`} />
-
-## Custom ratios
-
-Each `.ratio-*` class includes a CSS custom property (or CSS variable) in the selector. You can override this CSS variable to create custom aspect ratios on the fly with some quick math on your part.
-
-For example, to create a 2x1 aspect ratio, set `--bs-aspect-ratio: 50%` on the `.ratio`.
-
-<Example class="bd-example-ratios" code={`<div class="ratio" style="--bs-aspect-ratio: 50%;">
- <div>2x1</div>
- </div>`} />
-
-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.
-
-```scss
-.ratio-4x3 {
- @include media-breakpoint-up(md) {
- --bs-aspect-ratio: 50%; // 2x1
- }
-}
-```
-
-<Example class="bd-example-ratios bd-example-ratios-breakpoint" code={`<div class="ratio ratio-4x3">
- <div>4x3, then 2x1</div>
- </div>`} />
-
-
-## Sass maps
-
-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.
-
-<ScssDocs name="aspect-ratios" file="scss/_variables.scss" />
### Helpers
-- <span class="badge text-bg-danger">Breaking</span> **Responsive embed helpers have been renamed to [ratio helpers]([[docsref:/helpers/ratio]])** with new class names and improved behaviors, as well as a helpful CSS variable.
+- <span class="badge text-bg-danger">Breaking</span> **Responsive embed helpers have been renamed to [ratio helpers]([[docsref:/utilities/aspect-ratio]])** with new class names and improved behaviors, as well as a helpful CSS variable.
- Classes have been renamed to change `by` to `x` in the aspect ratio. For example, `.ratio-16by9` is now `.ratio-16x9`.
- We’ve dropped the `.embed-responsive-item` and element group selector in favor of a simpler `.ratio > *` selector. No more class is needed, and the ratio helper now works with any HTML element.
- The `$embed-responsive-aspect-ratios` Sass map has been renamed to `$aspect-ratios` and its values have been simplified to include the class name and the percentage as the `key: value` pair.
- - CSS variables are now generated and included for each value in the Sass map. Modify the `--bs-aspect-ratio` variable on the `.ratio` to create any [custom aspect ratio]([[docsref:/helpers/ratio#custom-ratios]]).
+ - CSS variables are now generated and included for each value in the Sass map. Modify the `--bs-aspect-ratio` variable on the `.ratio` to create any [custom aspect ratio]([[docsref:/utilities/aspect-ratio#custom-ratios]]).
- <span class="badge text-bg-danger">Breaking</span> **"Screen reader" classes are now ["visually hidden" classes]([[docsref:/helpers/visually-hidden]]).**
- Changed the Sass file from `scss/helpers/_screenreaders.scss` to `scss/helpers/_visually-hidden.scss`
--- /dev/null
+---
+title: Aspect ratio
+description: Make elements maintain specific aspect ratios. Perfect for handling videos, slideshow embeds, and more based on the width of the parent.
+toc: true
+---
+
+Use the ratio utility to manage the aspect ratios of content like `<iframe>`s, `<embed>`s, `<video>`s, and `<object>`s. These helpers also can be used on any standard HTML child element (e.g., a `<div>` or `<img>`). Customize the available aspect ratios with the Sass variable or the utility API.
+
+<Callout>
+**Pro-Tip!** You don't need `frameborder="0"` on your `<iframe>`s as we override that for you in [Reboot]([[docsref:/content/reboot]]).
+</Callout>
+
+## Example
+
+Add your ratio utility to the element you want to modify, like an `<iframe>`, `<video>`, or less semantic elements like `<div>`. Ratio utilities also pair well with any width utilities, as shown below. Customize the available aspect ratios with the Sass variable or the utility API.
+
+Heads up—you can omit `frameborder="0"` on your `<iframe>`s as that is overridden for you in [Reboot]([[docsref:/content/reboot]]).
+
+<Example code={`<iframe class="w-100 ratio-16x9" src="https://www.youtube.com/embed/zpOULjyy-n8?rel=0" title="YouTube video" allowfullscreen></iframe>`} />
+
+Swap the `.ratio-*` class for a different aspect ratio.
+
+<Example class="bd-example-ratios" code={`<div class="ratio-auto">
+ <div>Auto</div>
+ </div>
+ <div class="w-25 ratio-1x1">
+ <div>1×1</div>
+ </div>
+ <div class="w-50 ratio-4x3">
+ <div>4×3</div>
+ </div>
+ <div class="w-75 ratio-16x9">
+ <div>16×9</div>
+ </div>
+ <div class="w-100 ratio-21x9">
+ <div>21×9</div>
+ </div>`} />
+
+
+{/*
+## Custom ratios
+
+mdo-do: do we bring these back?
+
+Each `.ratio-*` class includes a CSS custom property (or CSS variable) in the selector. You can override this CSS variable to create custom aspect ratios on the fly with some quick math on your part.
+
+For example, to create a 2x1 aspect ratio, set `--bs-aspect-ratio: 50%` on the `.ratio`.
+
+<Example class="bd-example-ratios" code={`<div class="ratio" style="--bs-aspect-ratio: 50%;">
+ <div>2x1</div>
+ </div>`} />
+
+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.
+
+```scss
+.ratio-4x3 {
+ @include media-breakpoint-up(md) {
+ --bs-aspect-ratio: 50%; // 2x1
+ }
+}
+```
+
+<Example class="bd-example-ratios bd-example-ratios-breakpoint" code={`<div class="ratio ratio-4x3">
+ <div>4x3, then 2x1</div>
+ </div>`} />
+*/}
+
+## Sass map
+
+Within `_variables.scss`, you can change the aspect ratios you want to use. Here's our default `$aspect-ratios` map. Modify the map as you like and recompile your Sass to put them to use.
+
+<ScssDocs name="aspect-ratios" file="scss/_variables.scss" />
// Ratio helpers
.bd-example-ratios {
- .ratio {
- display: inline-block;
- width: 10rem;
+ [class*="ratio"] {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ margin-bottom: 1rem;
color: var(--bs-secondary-color);
background-color: var(--bs-tertiary-bg);
border: var(--bs-border-width) solid var(--bs-border-color);
-
- > div {
- display: flex;
- align-items: center;
- justify-content: center;
- }
+ @include border-radius(var(--bs-border-radius));
}
}
-.bd-example-ratios-breakpoint {
- .ratio-4x3 {
- width: 16rem;
- @include media-breakpoint-up(md) {
- --bs-aspect-ratio: 50%; // 2x1
- }
- }
-}
.bd-example-offcanvas {
.offcanvas {
projects / thirdparty / bootstrap.git / commitdiff
