Utilities

Scales

• Space, in px: 0 2 4 8 12 16 20 24 32 40 48 64 - for m, p and gap with their sides: mt mb ms me mx my, the same for p. ms and me are the start and the end of the line, so they turn right to left.
• Font size: 11 12 14 16 18 20 24 32 40 48 - 11 for the smallest caption, 40 and 48 for one hero number; line height: 16 20 24 28; radius: 0 4 6 8 12 16 and rounded-full.
• Width prefixes come on placement and spacing - display, flex, grid, gaps, order, text alignment, margins and paddings: md:d-none, lg:p-24.
• d-none beats every other display class and component on its element, and a width prefix beats it: d-none md:d-flex shows from md. Page styles outside the layers beat it too: use hidden there.

Aspect ratio

ratio-1x1, ratio-4x3, ratio-16x9 and ratio-21x9 keep an element's shape as its width changes - on a video, a map, an image's frame; ratio-auto lets it go. ratio-1.91x1 is the shape of a link's preview image on social networks, 1200 × 630. The class goes on the element itself: an image inside a frame fills it with w-100 h-100 object-fit-cover.

<div class="ratio-16x9 w-50 hstack justify-content-center rounded-8 bg-page text-muted">16 × 9</div>
<div class="ratio-1x1 w-25 hstack justify-content-center rounded-8 bg-page text-muted">1 × 1</div>
<div class="ratio-1.91x1 w-50 hstack justify-content-center rounded-8 bg-page text-muted">1.91 × 1</div>

Sizes in pixels

Where a control or a mark needs a fixed size - a narrow field in a toolbar, a column of codes, a thumbnail - the number is the pixels, as with the spaces:

• w-56 w-64 w-80 w-96 w-120 w-160 beside the shares w-25 to w-100; h-32 h-40 h-72 beside h-25 to h-100.
• min-w-56 min-w-120 min-w-160 min-w-200 min-w-240 min-w-288; max-w-80 to max-w-1200, with 360 and 560 among them.
• size-32 size-48 size-64 size-80 set both sides at once: a square.

<span class="size-32 rounded-8 bg-page"></span>
<span class="size-48 rounded-8 bg-page"></span>
<span class="size-64 rounded-8 bg-page"></span>
<span class="size-80 rounded-8 bg-page"></span>
<input class="form-control w-120" type="text" aria-label="Code" value="SPRING-26">

Text: kept lines, captions, clamps

text-pre-wrap keeps the lines and the spaces a person typed - a note, an address - and still wraps a long line. tracking-wide spaces the letters of a caption in capitals. line-clamp-2 and line-clamp-3 cut a text after two or three lines with an ellipsis; the whole text stays in the page for a screen reader and for search.

<p class="text-pre-wrap">Villa 12, Harbor Road&#10;Main Island 00000</p>
<p class="fs-11 text-uppercase tracking-wide text-muted">Last 30 days</p>
<p class="line-clamp-2 max-w-360">North Bay by speedboat: a day among the forty-two islands of the marine park, with snorkelling at Reef Islet, the emerald lake of Emerald Islet and lunch on the beach, back by five.</p>

Shown when focused

visually-hidden-focusable hides an element until it or something in it takes the focus - the first link of a page that jumps to its content. Press Tab into the example to see it.

<a class="visually-hidden-focusable btn" href="#utilities-all">Skip to every utility</a>
<span class="text-muted">The link above shows on focus.</span>

A flash and a sticky panel

flash lights an element's ground once and lets it fade - a row a click elsewhere changed. To light it again, take the class off, let the browser lay the element out, and put the class back. sticky-top keeps an element at the top while the page scrolls: under the app header in the shell, at --redz-sticky-top anywhere else.

<button class="btn" type="button" data-docs-run="flash" aria-controls="utilities-flash-target">Change the row</button>
<span class="p-8 rounded-8" id="utilities-flash-target">A row a click elsewhere changed</span>

row.classList.remove('flash');
void row.offsetWidth;
row.classList.add('flash');

Off the screen

offscreen puts an element outside the page, where no one sees it, yet it stays rendered: not display: none, visibility: hidden or the clip of visually-hidden, which bots look for. Two uses:

• A form's trap for bots: a field a person never fills. Its wrapper carries aria-hidden="true" so no screen reader meets it; the field has tabindex="-1", autocomplete="off" and a plausible name, such as company_url. The server refuses a form that comes back with it filled. Name the class and the field plainly: bots skip what is called a honeypot.
• A field that takes what a keyboard-wedge reader types - a badge or a fob read at a kiosk - kept focused while nothing else is.

<div class="offscreen" aria-hidden="true"><label>Company site<input type="text" name="company_url" tabindex="-1" autocomplete="off"></label></div>
<span class="text-muted">A field is here, off the screen.</span>

Dividers, rules and icon links

divide-x and divide-y on a parent draw a line between its children, across or down, with no class on any child. vr is a rule between the items of a row. icon-link lines an icon up with the words of a link.

<div class="hstack divide-x"><span class="px-12">Bookings</span><span class="px-12">Guests</span><span class="px-12">Revenue</span></div>
<div class="hstack gap-12"><button class="btn btn-sm" type="button">Copy</button><span class="vr"></span><button class="btn btn-sm" type="button">Delete</button></div>
<a class="icon-link" href="#utilities-divide"><i class="bi bi-box-arrow-up-right" aria-hidden="true"></i>Open on the site</a>

Every utility

From Bootstrap 5.3