Add Extra Bootstrap Ratios for All Breakpoints

[uzielweb]

Hello Bootstrap Team,

I propose adding support for extra aspect ratios across all breakpoints, as outlined in this Gist: https://gist.github.com/uzielweb/974a7ddc678fd124bce8b7c69ebb886e

This feature would enhance flexibility for responsive designs by allowing developers to define additional aspect ratios (e.g., for images, videos, or containers) that adapt to Bootstrap's breakpoint system. The Gist includes a suggested implementation with utility classes like .ratio-{breakpoint}-{ratio} (e.g., .ratio-md-16x9, .ratio-lg-4x3) to maintain consistency with Bootstrap's naming conventions.

Proposed Benefits:

• Improved control over aspect ratios in responsive layouts.
• Seamless integration with Bootstrap's existing grid and utility systems.
• Enhanced developer experience for media-heavy or custom layouts.

Implementation Notes:

• The Gist provides a starting point with CSS custom properties and media queries.
• Ensure compatibility with existing .ratio classes and avoid breaking changes.
• Consider adding Sass mixins for easier customization in source builds.

Please review the Gist and let me know if further refinements or test cases are needed. Happy to contribute to the discussion or code!

Thank you, in advance.

[julien-deramond]

FYI, I've referenced your GH Discussion Idea at #39449 (comment)

[jonhubby]

Thanks for sharing this, Uziel. Just checked out the Gist, really thoughtful implementation. Having breakpoint-specific aspect ratios would definitely help in more complex responsive layouts. Curious how this might affect load or override behavior if combined with existing ratio utilities.