Master programming syntax, solve interactive challenges & run live code in Syntaxis Explore Arena →

menu_book Course Curriculum (Bootstrap 5) expand_more

Layout & Grid

Containers Responsive containers Rows Columns Auto columns Responsive columns Gutters Offsets Order utilities CSS Grid option

Content & Helpers

Reboot Typography Images Tables Figures Vertical rule Stretched link Text truncation Ratio helper Visually hidden

Forms

Form controls Form text Select menus Checks and radios Range inputs Input groups Floating labels Form layout Validation Datalists

Utilities

Spacing utilities Display utilities Flex utilities Grid gap utilities Position utilities Sizing utilities Text utilities Background utilities Border utilities Opacity utilities

Components I

Accordion Alerts Badges Breadcrumb Buttons Button groups Cards Carousel Close button Collapse

Components II

Dropdowns List group Modal Navbar Navs and tabs Offcanvas Pagination Placeholders Popovers Progress

Components III

Scrollspy Spinners Toasts Tooltips Colored links Focus ring helper Icon link helper Stacks helper Object fit utilities Interactions utilities

Customization & JS

CSS variables Sass variables Color modes Utility API Breakpoints JavaScript without jQuery Data attributes Programmatic plugin API Popper integration Bootstrap 4 to 5 migration

Bootstrap 5 / Content & Helpers

Ratio helper

Learn Ratio helper in Bootstrap 5 with a focused explanation, a topic-specific example, edge guidance, and a mastery check.

12 min read • Beginner

bootstrap-019.html

html

<div class="ratio ratio-16x9"><iframe src="about:blank" title="Video"></iframe></div>

What to watch

Content source & attribution

Original Syntaxis Content · Original Syntaxis Content

Lesson quizzes

Ratio helper Mastery Check →

Text truncation

Visually hidden