<!-- Generated by tools/docs.php from docs/src/utilities.html - edit the source, not this file. -->

# Utilities

Single-purpose classes with Bootstrap 5's names, where the number is the value: `p-16`, `gap-8`, `fs-14`, `rounded-8`, `w-50`. Written once from a vocabulary file and committed - nothing is generated where they are used.

## 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`.

```html
<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.

```html
<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.

```html
<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.

```html
<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.

```html
<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>
```

```js
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.

```html
<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.

```html
<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

| Class | Declarations | Width prefixes |
| --- | --- | --- |
| `d-inline` | `display: inline;` | yes |
| `d-inline-block` | `display: inline-block;` | yes |
| `d-block` | `display: block;` | yes |
| `d-grid` | `display: grid;` | yes |
| `d-inline-grid` | `display: inline-grid;` | yes |
| `d-flex` | `display: flex;` | yes |
| `d-inline-flex` | `display: inline-flex;` | yes |
| `d-table` | `display: table;` | yes |
| `d-table-row` | `display: table-row;` | yes |
| `d-table-cell` | `display: table-cell;` | yes |
| `d-contents` | `display: contents;` | yes |
| `vstack` | `display: flex; flex: 1 1 auto; flex-direction: column; align-self: stretch;` | yes |
| `hstack` | `display: flex; flex-direction: row; align-items: center; align-self: stretch;` | yes |
| `flex-row` | `flex-direction: row;` | yes |
| `flex-column` | `flex-direction: column;` | yes |
| `flex-row-reverse` | `flex-direction: row-reverse;` | yes |
| `flex-column-reverse` | `flex-direction: column-reverse;` | yes |
| `flex-wrap` | `flex-wrap: wrap;` | yes |
| `flex-nowrap` | `flex-wrap: nowrap;` | yes |
| `flex-wrap-reverse` | `flex-wrap: wrap-reverse;` | yes |
| `flex-fill` | `flex: 1 1 auto;` | yes |
| `flex-grow-0` | `flex-grow: 0;` | yes |
| `flex-grow-1` | `flex-grow: 1;` | yes |
| `flex-shrink-0` | `flex-shrink: 0;` | yes |
| `flex-shrink-1` | `flex-shrink: 1;` | yes |
| `justify-content-start` | `justify-content: flex-start;` | yes |
| `justify-content-end` | `justify-content: flex-end;` | yes |
| `justify-content-center` | `justify-content: center;` | yes |
| `justify-content-between` | `justify-content: space-between;` | yes |
| `justify-content-around` | `justify-content: space-around;` | yes |
| `justify-content-evenly` | `justify-content: space-evenly;` | yes |
| `align-items-start` | `align-items: flex-start;` | yes |
| `align-items-end` | `align-items: flex-end;` | yes |
| `align-items-center` | `align-items: center;` | yes |
| `align-items-baseline` | `align-items: baseline;` | yes |
| `align-items-stretch` | `align-items: stretch;` | yes |
| `justify-items-start` | `justify-items: start;` | yes |
| `justify-items-end` | `justify-items: end;` | yes |
| `justify-items-center` | `justify-items: center;` | yes |
| `justify-items-stretch` | `justify-items: stretch;` | yes |
| `place-items-start` | `place-items: start;` | yes |
| `place-items-end` | `place-items: end;` | yes |
| `place-items-center` | `place-items: center;` | yes |
| `place-items-stretch` | `place-items: stretch;` | yes |
| `align-self-auto` | `align-self: auto;` | yes |
| `align-self-start` | `align-self: flex-start;` | yes |
| `align-self-end` | `align-self: flex-end;` | yes |
| `align-self-center` | `align-self: center;` | yes |
| `align-self-baseline` | `align-self: baseline;` | yes |
| `align-self-stretch` | `align-self: stretch;` | yes |
| `align-content-start` | `align-content: flex-start;` | yes |
| `align-content-end` | `align-content: flex-end;` | yes |
| `align-content-center` | `align-content: center;` | yes |
| `align-content-between` | `align-content: space-between;` | yes |
| `align-content-around` | `align-content: space-around;` | yes |
| `align-content-stretch` | `align-content: stretch;` | yes |
| `order-first` | `order: -1;` | yes |
| `order-0` | `order: 0;` | yes |
| `order-1` | `order: 1;` | yes |
| `order-2` | `order: 2;` | yes |
| `order-3` | `order: 3;` | yes |
| `order-4` | `order: 4;` | yes |
| `order-5` | `order: 5;` | yes |
| `order-last` | `order: 6;` | yes |
| `grid` | `display: grid; grid-auto-columns: minmax(0, 1fr);` | yes |
| `cols-1` | `grid-template-columns: repeat(1, minmax(0, 1fr));` | yes |
| `cols-2` | `grid-template-columns: repeat(2, minmax(0, 1fr));` | yes |
| `cols-3` | `grid-template-columns: repeat(3, minmax(0, 1fr));` | yes |
| `cols-4` | `grid-template-columns: repeat(4, minmax(0, 1fr));` | yes |
| `cols-5` | `grid-template-columns: repeat(5, minmax(0, 1fr));` | yes |
| `cols-6` | `grid-template-columns: repeat(6, minmax(0, 1fr));` | yes |
| `cols-7` | `grid-template-columns: repeat(7, minmax(0, 1fr));` | yes |
| `cols-8` | `grid-template-columns: repeat(8, minmax(0, 1fr));` | yes |
| `cols-9` | `grid-template-columns: repeat(9, minmax(0, 1fr));` | yes |
| `cols-10` | `grid-template-columns: repeat(10, minmax(0, 1fr));` | yes |
| `cols-11` | `grid-template-columns: repeat(11, minmax(0, 1fr));` | yes |
| `cols-12` | `grid-template-columns: repeat(12, minmax(0, 1fr));` | yes |
| `cols-min-160` | `grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr));` | yes |
| `cols-min-200` | `grid-template-columns: repeat(auto-fit, minmax(min(100%, 12.5rem), 1fr));` | yes |
| `cols-min-240` | `grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));` | yes |
| `cols-min-280` | `grid-template-columns: repeat(auto-fit, minmax(min(100%, 17.5rem), 1fr));` | yes |
| `cols-min-320` | `grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));` | yes |
| `span-full` | `grid-column: 1 / -1;` | yes |
| `span-1` | `grid-column: span 1 / span 1;` | yes |
| `span-2` | `grid-column: span 2 / span 2;` | yes |
| `span-3` | `grid-column: span 3 / span 3;` | yes |
| `span-4` | `grid-column: span 4 / span 4;` | yes |
| `span-5` | `grid-column: span 5 / span 5;` | yes |
| `span-6` | `grid-column: span 6 / span 6;` | yes |
| `span-7` | `grid-column: span 7 / span 7;` | yes |
| `span-8` | `grid-column: span 8 / span 8;` | yes |
| `span-9` | `grid-column: span 9 / span 9;` | yes |
| `span-10` | `grid-column: span 10 / span 10;` | yes |
| `span-11` | `grid-column: span 11 / span 11;` | yes |
| `span-12` | `grid-column: span 12 / span 12;` | yes |
| `gap-0` | `gap: var(--redz-space-0);` | yes |
| `gap-2` | `gap: var(--redz-space-2);` | yes |
| `gap-4` | `gap: var(--redz-space-4);` | yes |
| `gap-8` | `gap: var(--redz-space-8);` | yes |
| `gap-12` | `gap: var(--redz-space-12);` | yes |
| `gap-16` | `gap: var(--redz-space-16);` | yes |
| `gap-20` | `gap: var(--redz-space-20);` | yes |
| `gap-24` | `gap: var(--redz-space-24);` | yes |
| `gap-32` | `gap: var(--redz-space-32);` | yes |
| `gap-40` | `gap: var(--redz-space-40);` | yes |
| `gap-48` | `gap: var(--redz-space-48);` | yes |
| `gap-64` | `gap: var(--redz-space-64);` | yes |
| `row-gap-0` | `row-gap: var(--redz-space-0);` | yes |
| `row-gap-2` | `row-gap: var(--redz-space-2);` | yes |
| `row-gap-4` | `row-gap: var(--redz-space-4);` | yes |
| `row-gap-8` | `row-gap: var(--redz-space-8);` | yes |
| `row-gap-12` | `row-gap: var(--redz-space-12);` | yes |
| `row-gap-16` | `row-gap: var(--redz-space-16);` | yes |
| `row-gap-20` | `row-gap: var(--redz-space-20);` | yes |
| `row-gap-24` | `row-gap: var(--redz-space-24);` | yes |
| `row-gap-32` | `row-gap: var(--redz-space-32);` | yes |
| `row-gap-40` | `row-gap: var(--redz-space-40);` | yes |
| `row-gap-48` | `row-gap: var(--redz-space-48);` | yes |
| `row-gap-64` | `row-gap: var(--redz-space-64);` | yes |
| `column-gap-0` | `column-gap: var(--redz-space-0);` | yes |
| `column-gap-2` | `column-gap: var(--redz-space-2);` | yes |
| `column-gap-4` | `column-gap: var(--redz-space-4);` | yes |
| `column-gap-8` | `column-gap: var(--redz-space-8);` | yes |
| `column-gap-12` | `column-gap: var(--redz-space-12);` | yes |
| `column-gap-16` | `column-gap: var(--redz-space-16);` | yes |
| `column-gap-20` | `column-gap: var(--redz-space-20);` | yes |
| `column-gap-24` | `column-gap: var(--redz-space-24);` | yes |
| `column-gap-32` | `column-gap: var(--redz-space-32);` | yes |
| `column-gap-40` | `column-gap: var(--redz-space-40);` | yes |
| `column-gap-48` | `column-gap: var(--redz-space-48);` | yes |
| `column-gap-64` | `column-gap: var(--redz-space-64);` | yes |
| `m-auto` | `margin: auto;` | yes |
| `m-0` | `margin: var(--redz-space-0);` | yes |
| `m-2` | `margin: var(--redz-space-2);` | yes |
| `m-4` | `margin: var(--redz-space-4);` | yes |
| `m-8` | `margin: var(--redz-space-8);` | yes |
| `m-12` | `margin: var(--redz-space-12);` | yes |
| `m-16` | `margin: var(--redz-space-16);` | yes |
| `m-20` | `margin: var(--redz-space-20);` | yes |
| `m-24` | `margin: var(--redz-space-24);` | yes |
| `m-32` | `margin: var(--redz-space-32);` | yes |
| `m-40` | `margin: var(--redz-space-40);` | yes |
| `m-48` | `margin: var(--redz-space-48);` | yes |
| `m-64` | `margin: var(--redz-space-64);` | yes |
| `mt-auto` | `margin-block-start: auto;` | yes |
| `mt-0` | `margin-block-start: var(--redz-space-0);` | yes |
| `mt-2` | `margin-block-start: var(--redz-space-2);` | yes |
| `mt-4` | `margin-block-start: var(--redz-space-4);` | yes |
| `mt-8` | `margin-block-start: var(--redz-space-8);` | yes |
| `mt-12` | `margin-block-start: var(--redz-space-12);` | yes |
| `mt-16` | `margin-block-start: var(--redz-space-16);` | yes |
| `mt-20` | `margin-block-start: var(--redz-space-20);` | yes |
| `mt-24` | `margin-block-start: var(--redz-space-24);` | yes |
| `mt-32` | `margin-block-start: var(--redz-space-32);` | yes |
| `mt-40` | `margin-block-start: var(--redz-space-40);` | yes |
| `mt-48` | `margin-block-start: var(--redz-space-48);` | yes |
| `mt-64` | `margin-block-start: var(--redz-space-64);` | yes |
| `mb-auto` | `margin-block-end: auto;` | yes |
| `mb-0` | `margin-block-end: var(--redz-space-0);` | yes |
| `mb-2` | `margin-block-end: var(--redz-space-2);` | yes |
| `mb-4` | `margin-block-end: var(--redz-space-4);` | yes |
| `mb-8` | `margin-block-end: var(--redz-space-8);` | yes |
| `mb-12` | `margin-block-end: var(--redz-space-12);` | yes |
| `mb-16` | `margin-block-end: var(--redz-space-16);` | yes |
| `mb-20` | `margin-block-end: var(--redz-space-20);` | yes |
| `mb-24` | `margin-block-end: var(--redz-space-24);` | yes |
| `mb-32` | `margin-block-end: var(--redz-space-32);` | yes |
| `mb-40` | `margin-block-end: var(--redz-space-40);` | yes |
| `mb-48` | `margin-block-end: var(--redz-space-48);` | yes |
| `mb-64` | `margin-block-end: var(--redz-space-64);` | yes |
| `ms-auto` | `margin-inline-start: auto;` | yes |
| `ms-0` | `margin-inline-start: var(--redz-space-0);` | yes |
| `ms-2` | `margin-inline-start: var(--redz-space-2);` | yes |
| `ms-4` | `margin-inline-start: var(--redz-space-4);` | yes |
| `ms-8` | `margin-inline-start: var(--redz-space-8);` | yes |
| `ms-12` | `margin-inline-start: var(--redz-space-12);` | yes |
| `ms-16` | `margin-inline-start: var(--redz-space-16);` | yes |
| `ms-20` | `margin-inline-start: var(--redz-space-20);` | yes |
| `ms-24` | `margin-inline-start: var(--redz-space-24);` | yes |
| `ms-32` | `margin-inline-start: var(--redz-space-32);` | yes |
| `ms-40` | `margin-inline-start: var(--redz-space-40);` | yes |
| `ms-48` | `margin-inline-start: var(--redz-space-48);` | yes |
| `ms-64` | `margin-inline-start: var(--redz-space-64);` | yes |
| `me-auto` | `margin-inline-end: auto;` | yes |
| `me-0` | `margin-inline-end: var(--redz-space-0);` | yes |
| `me-2` | `margin-inline-end: var(--redz-space-2);` | yes |
| `me-4` | `margin-inline-end: var(--redz-space-4);` | yes |
| `me-8` | `margin-inline-end: var(--redz-space-8);` | yes |
| `me-12` | `margin-inline-end: var(--redz-space-12);` | yes |
| `me-16` | `margin-inline-end: var(--redz-space-16);` | yes |
| `me-20` | `margin-inline-end: var(--redz-space-20);` | yes |
| `me-24` | `margin-inline-end: var(--redz-space-24);` | yes |
| `me-32` | `margin-inline-end: var(--redz-space-32);` | yes |
| `me-40` | `margin-inline-end: var(--redz-space-40);` | yes |
| `me-48` | `margin-inline-end: var(--redz-space-48);` | yes |
| `me-64` | `margin-inline-end: var(--redz-space-64);` | yes |
| `mx-auto` | `margin-inline: auto;` | yes |
| `mx-0` | `margin-inline: var(--redz-space-0);` | yes |
| `mx-2` | `margin-inline: var(--redz-space-2);` | yes |
| `mx-4` | `margin-inline: var(--redz-space-4);` | yes |
| `mx-8` | `margin-inline: var(--redz-space-8);` | yes |
| `mx-12` | `margin-inline: var(--redz-space-12);` | yes |
| `mx-16` | `margin-inline: var(--redz-space-16);` | yes |
| `mx-20` | `margin-inline: var(--redz-space-20);` | yes |
| `mx-24` | `margin-inline: var(--redz-space-24);` | yes |
| `mx-32` | `margin-inline: var(--redz-space-32);` | yes |
| `mx-40` | `margin-inline: var(--redz-space-40);` | yes |
| `mx-48` | `margin-inline: var(--redz-space-48);` | yes |
| `mx-64` | `margin-inline: var(--redz-space-64);` | yes |
| `my-auto` | `margin-block: auto;` | yes |
| `my-0` | `margin-block: var(--redz-space-0);` | yes |
| `my-2` | `margin-block: var(--redz-space-2);` | yes |
| `my-4` | `margin-block: var(--redz-space-4);` | yes |
| `my-8` | `margin-block: var(--redz-space-8);` | yes |
| `my-12` | `margin-block: var(--redz-space-12);` | yes |
| `my-16` | `margin-block: var(--redz-space-16);` | yes |
| `my-20` | `margin-block: var(--redz-space-20);` | yes |
| `my-24` | `margin-block: var(--redz-space-24);` | yes |
| `my-32` | `margin-block: var(--redz-space-32);` | yes |
| `my-40` | `margin-block: var(--redz-space-40);` | yes |
| `my-48` | `margin-block: var(--redz-space-48);` | yes |
| `my-64` | `margin-block: var(--redz-space-64);` | yes |
| `p-0` | `padding: var(--redz-space-0);` | yes |
| `p-2` | `padding: var(--redz-space-2);` | yes |
| `p-4` | `padding: var(--redz-space-4);` | yes |
| `p-8` | `padding: var(--redz-space-8);` | yes |
| `p-12` | `padding: var(--redz-space-12);` | yes |
| `p-16` | `padding: var(--redz-space-16);` | yes |
| `p-20` | `padding: var(--redz-space-20);` | yes |
| `p-24` | `padding: var(--redz-space-24);` | yes |
| `p-32` | `padding: var(--redz-space-32);` | yes |
| `p-40` | `padding: var(--redz-space-40);` | yes |
| `p-48` | `padding: var(--redz-space-48);` | yes |
| `p-64` | `padding: var(--redz-space-64);` | yes |
| `pt-0` | `padding-block-start: var(--redz-space-0);` | yes |
| `pt-2` | `padding-block-start: var(--redz-space-2);` | yes |
| `pt-4` | `padding-block-start: var(--redz-space-4);` | yes |
| `pt-8` | `padding-block-start: var(--redz-space-8);` | yes |
| `pt-12` | `padding-block-start: var(--redz-space-12);` | yes |
| `pt-16` | `padding-block-start: var(--redz-space-16);` | yes |
| `pt-20` | `padding-block-start: var(--redz-space-20);` | yes |
| `pt-24` | `padding-block-start: var(--redz-space-24);` | yes |
| `pt-32` | `padding-block-start: var(--redz-space-32);` | yes |
| `pt-40` | `padding-block-start: var(--redz-space-40);` | yes |
| `pt-48` | `padding-block-start: var(--redz-space-48);` | yes |
| `pt-64` | `padding-block-start: var(--redz-space-64);` | yes |
| `pb-0` | `padding-block-end: var(--redz-space-0);` | yes |
| `pb-2` | `padding-block-end: var(--redz-space-2);` | yes |
| `pb-4` | `padding-block-end: var(--redz-space-4);` | yes |
| `pb-8` | `padding-block-end: var(--redz-space-8);` | yes |
| `pb-12` | `padding-block-end: var(--redz-space-12);` | yes |
| `pb-16` | `padding-block-end: var(--redz-space-16);` | yes |
| `pb-20` | `padding-block-end: var(--redz-space-20);` | yes |
| `pb-24` | `padding-block-end: var(--redz-space-24);` | yes |
| `pb-32` | `padding-block-end: var(--redz-space-32);` | yes |
| `pb-40` | `padding-block-end: var(--redz-space-40);` | yes |
| `pb-48` | `padding-block-end: var(--redz-space-48);` | yes |
| `pb-64` | `padding-block-end: var(--redz-space-64);` | yes |
| `ps-0` | `padding-inline-start: var(--redz-space-0);` | yes |
| `ps-2` | `padding-inline-start: var(--redz-space-2);` | yes |
| `ps-4` | `padding-inline-start: var(--redz-space-4);` | yes |
| `ps-8` | `padding-inline-start: var(--redz-space-8);` | yes |
| `ps-12` | `padding-inline-start: var(--redz-space-12);` | yes |
| `ps-16` | `padding-inline-start: var(--redz-space-16);` | yes |
| `ps-20` | `padding-inline-start: var(--redz-space-20);` | yes |
| `ps-24` | `padding-inline-start: var(--redz-space-24);` | yes |
| `ps-32` | `padding-inline-start: var(--redz-space-32);` | yes |
| `ps-40` | `padding-inline-start: var(--redz-space-40);` | yes |
| `ps-48` | `padding-inline-start: var(--redz-space-48);` | yes |
| `ps-64` | `padding-inline-start: var(--redz-space-64);` | yes |
| `pe-0` | `padding-inline-end: var(--redz-space-0);` | yes |
| `pe-2` | `padding-inline-end: var(--redz-space-2);` | yes |
| `pe-4` | `padding-inline-end: var(--redz-space-4);` | yes |
| `pe-8` | `padding-inline-end: var(--redz-space-8);` | yes |
| `pe-12` | `padding-inline-end: var(--redz-space-12);` | yes |
| `pe-16` | `padding-inline-end: var(--redz-space-16);` | yes |
| `pe-20` | `padding-inline-end: var(--redz-space-20);` | yes |
| `pe-24` | `padding-inline-end: var(--redz-space-24);` | yes |
| `pe-32` | `padding-inline-end: var(--redz-space-32);` | yes |
| `pe-40` | `padding-inline-end: var(--redz-space-40);` | yes |
| `pe-48` | `padding-inline-end: var(--redz-space-48);` | yes |
| `pe-64` | `padding-inline-end: var(--redz-space-64);` | yes |
| `px-0` | `padding-inline: var(--redz-space-0);` | yes |
| `px-2` | `padding-inline: var(--redz-space-2);` | yes |
| `px-4` | `padding-inline: var(--redz-space-4);` | yes |
| `px-8` | `padding-inline: var(--redz-space-8);` | yes |
| `px-12` | `padding-inline: var(--redz-space-12);` | yes |
| `px-16` | `padding-inline: var(--redz-space-16);` | yes |
| `px-20` | `padding-inline: var(--redz-space-20);` | yes |
| `px-24` | `padding-inline: var(--redz-space-24);` | yes |
| `px-32` | `padding-inline: var(--redz-space-32);` | yes |
| `px-40` | `padding-inline: var(--redz-space-40);` | yes |
| `px-48` | `padding-inline: var(--redz-space-48);` | yes |
| `px-64` | `padding-inline: var(--redz-space-64);` | yes |
| `py-0` | `padding-block: var(--redz-space-0);` | yes |
| `py-2` | `padding-block: var(--redz-space-2);` | yes |
| `py-4` | `padding-block: var(--redz-space-4);` | yes |
| `py-8` | `padding-block: var(--redz-space-8);` | yes |
| `py-12` | `padding-block: var(--redz-space-12);` | yes |
| `py-16` | `padding-block: var(--redz-space-16);` | yes |
| `py-20` | `padding-block: var(--redz-space-20);` | yes |
| `py-24` | `padding-block: var(--redz-space-24);` | yes |
| `py-32` | `padding-block: var(--redz-space-32);` | yes |
| `py-40` | `padding-block: var(--redz-space-40);` | yes |
| `py-48` | `padding-block: var(--redz-space-48);` | yes |
| `py-64` | `padding-block: var(--redz-space-64);` | yes |
| `text-start` | `text-align: start;` | yes |
| `text-end` | `text-align: end;` | yes |
| `text-center` | `text-align: center;` | yes |
| `fs-11` | `font-size: var(--redz-fs-11);` | - |
| `fs-12` | `font-size: var(--redz-fs-12);` | - |
| `fs-14` | `font-size: var(--redz-fs-14);` | - |
| `fs-16` | `font-size: var(--redz-fs-16);` | - |
| `fs-18` | `font-size: var(--redz-fs-18);` | - |
| `fs-20` | `font-size: var(--redz-fs-20);` | - |
| `fs-24` | `font-size: var(--redz-fs-24);` | - |
| `fs-32` | `font-size: var(--redz-fs-32);` | - |
| `fs-40` | `font-size: var(--redz-fs-40);` | - |
| `fs-48` | `font-size: var(--redz-fs-48);` | - |
| `fw-400` | `font-weight: 400;` | - |
| `fw-500` | `font-weight: 500;` | - |
| `fw-600` | `font-weight: 600;` | - |
| `fw-700` | `font-weight: 700;` | - |
| `lh-16` | `line-height: var(--redz-lh-16);` | - |
| `lh-20` | `line-height: var(--redz-lh-20);` | - |
| `lh-24` | `line-height: var(--redz-lh-24);` | - |
| `lh-28` | `line-height: var(--redz-lh-28);` | - |
| `fst-italic` | `font-style: italic;` | - |
| `fst-normal` | `font-style: normal;` | - |
| `font-monospace` | `font-family: var(--redz-font-mono);` | - |
| `tabular-nums` | `font-variant-numeric: tabular-nums;` | - |
| `text-decoration-none` | `text-decoration: none;` | - |
| `text-decoration-underline` | `text-decoration: underline;` | - |
| `text-decoration-line-through` | `text-decoration: line-through;` | - |
| `text-lowercase` | `text-transform: lowercase;` | - |
| `text-uppercase` | `text-transform: uppercase;` | - |
| `text-capitalize` | `text-transform: capitalize;` | - |
| `text-wrap` | `white-space: normal;` | - |
| `text-nowrap` | `white-space: nowrap;` | - |
| `text-pre-wrap` | `white-space: pre-wrap;` | - |
| `tracking-wide` | `letter-spacing: 0.06em;` | - |
| `line-clamp-2` | `display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;` | - |
| `line-clamp-3` | `display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden;` | - |
| `text-break` | `overflow-wrap: anywhere;` | - |
| `text-truncate` | `overflow: hidden; text-overflow: ellipsis; white-space: nowrap;` | - |
| `text-body` | `color: var(--redz-text);` | - |
| `text-muted` | `color: var(--redz-text-muted);` | - |
| `text-faint` | `color: var(--redz-text-faint);` | - |
| `text-reset` | `color: inherit;` | - |
| `text-primary` | `color: var(--redz-primary);` | - |
| `text-secondary` | `color: var(--redz-secondary);` | - |
| `text-success` | `color: var(--redz-success);` | - |
| `text-danger` | `color: var(--redz-danger);` | - |
| `text-warning` | `color: var(--redz-warning);` | - |
| `text-info` | `color: var(--redz-info);` | - |
| `text-primary-contrast` | `color: var(--redz-primary-contrast);` | - |
| `text-secondary-contrast` | `color: var(--redz-secondary-contrast);` | - |
| `text-success-contrast` | `color: var(--redz-success-contrast);` | - |
| `text-danger-contrast` | `color: var(--redz-danger-contrast);` | - |
| `text-warning-contrast` | `color: var(--redz-warning-contrast);` | - |
| `text-info-contrast` | `color: var(--redz-info-contrast);` | - |
| `list-unstyled` | `padding-inline-start: 0; list-style: none;` | - |
| `bg-body` | `background-color: var(--redz-bg);` | - |
| `bg-page` | `background-color: var(--redz-bg-page);` | - |
| `bg-raised` | `background-color: var(--redz-bg-raised);` | - |
| `bg-transparent` | `background-color: transparent;` | - |
| `bg-primary` | `background-color: var(--redz-primary);` | - |
| `bg-secondary` | `background-color: var(--redz-secondary);` | - |
| `bg-success` | `background-color: var(--redz-success);` | - |
| `bg-danger` | `background-color: var(--redz-danger);` | - |
| `bg-warning` | `background-color: var(--redz-warning);` | - |
| `bg-info` | `background-color: var(--redz-info);` | - |
| `bg-primary-subtle` | `background-color: var(--redz-primary-subtle);` | - |
| `bg-secondary-subtle` | `background-color: var(--redz-secondary-subtle);` | - |
| `bg-success-subtle` | `background-color: var(--redz-success-subtle);` | - |
| `bg-danger-subtle` | `background-color: var(--redz-danger-subtle);` | - |
| `bg-warning-subtle` | `background-color: var(--redz-warning-subtle);` | - |
| `bg-info-subtle` | `background-color: var(--redz-info-subtle);` | - |
| `border` | `border: 1px solid var(--redz-border);` | - |
| `border-top` | `border-block-start: 1px solid var(--redz-border);` | - |
| `border-bottom` | `border-block-end: 1px solid var(--redz-border);` | - |
| `border-start` | `border-inline-start: 1px solid var(--redz-border);` | - |
| `border-end` | `border-inline-end: 1px solid var(--redz-border);` | - |
| `border-0` | `border-width: 0;` | - |
| `border-1` | `border-width: 1px;` | - |
| `border-2` | `border-width: 2px;` | - |
| `border-4` | `border-width: 4px;` | - |
| `border-strong` | `border-color: var(--redz-border-strong);` | - |
| `border-primary` | `border-color: var(--redz-primary);` | - |
| `border-secondary` | `border-color: var(--redz-secondary);` | - |
| `border-success` | `border-color: var(--redz-success);` | - |
| `border-danger` | `border-color: var(--redz-danger);` | - |
| `border-warning` | `border-color: var(--redz-warning);` | - |
| `border-info` | `border-color: var(--redz-info);` | - |
| `border-primary-subtle` | `border-color: color-mix(in oklch, var(--redz-primary) 35%, var(--redz-border));` | - |
| `border-secondary-subtle` | `border-color: color-mix(in oklch, var(--redz-secondary) 35%, var(--redz-border));` | - |
| `border-success-subtle` | `border-color: color-mix(in oklch, var(--redz-success) 35%, var(--redz-border));` | - |
| `border-danger-subtle` | `border-color: color-mix(in oklch, var(--redz-danger) 35%, var(--redz-border));` | - |
| `border-warning-subtle` | `border-color: color-mix(in oklch, var(--redz-warning) 35%, var(--redz-border));` | - |
| `border-info-subtle` | `border-color: color-mix(in oklch, var(--redz-info) 35%, var(--redz-border));` | - |
| `edge-top-color` | `border-block-start: 3px solid var(--redz-color);` | - |
| `edge-top-primary` | `border-block-start: 3px solid var(--redz-primary);` | - |
| `edge-top-secondary` | `border-block-start: 3px solid var(--redz-secondary);` | - |
| `edge-top-success` | `border-block-start: 3px solid var(--redz-success);` | - |
| `edge-top-danger` | `border-block-start: 3px solid var(--redz-danger);` | - |
| `edge-top-warning` | `border-block-start: 3px solid var(--redz-warning);` | - |
| `edge-top-info` | `border-block-start: 3px solid var(--redz-info);` | - |
| `edge-start-color` | `border-inline-start: 3px solid var(--redz-color);` | - |
| `edge-start-primary` | `border-inline-start: 3px solid var(--redz-primary);` | - |
| `edge-start-secondary` | `border-inline-start: 3px solid var(--redz-secondary);` | - |
| `edge-start-success` | `border-inline-start: 3px solid var(--redz-success);` | - |
| `edge-start-danger` | `border-inline-start: 3px solid var(--redz-danger);` | - |
| `edge-start-warning` | `border-inline-start: 3px solid var(--redz-warning);` | - |
| `edge-start-info` | `border-inline-start: 3px solid var(--redz-info);` | - |
| `edge-top-chart-1` | `border-block-start: 3px solid var(--redz-chart-1);` | - |
| `edge-top-chart-2` | `border-block-start: 3px solid var(--redz-chart-2);` | - |
| `edge-top-chart-3` | `border-block-start: 3px solid var(--redz-chart-3);` | - |
| `edge-top-chart-4` | `border-block-start: 3px solid var(--redz-chart-4);` | - |
| `edge-top-chart-5` | `border-block-start: 3px solid var(--redz-chart-5);` | - |
| `edge-top-chart-6` | `border-block-start: 3px solid var(--redz-chart-6);` | - |
| `edge-top-chart-7` | `border-block-start: 3px solid var(--redz-chart-7);` | - |
| `edge-top-chart-8` | `border-block-start: 3px solid var(--redz-chart-8);` | - |
| `edge-start-chart-1` | `border-inline-start: 3px solid var(--redz-chart-1);` | - |
| `edge-start-chart-2` | `border-inline-start: 3px solid var(--redz-chart-2);` | - |
| `edge-start-chart-3` | `border-inline-start: 3px solid var(--redz-chart-3);` | - |
| `edge-start-chart-4` | `border-inline-start: 3px solid var(--redz-chart-4);` | - |
| `edge-start-chart-5` | `border-inline-start: 3px solid var(--redz-chart-5);` | - |
| `edge-start-chart-6` | `border-inline-start: 3px solid var(--redz-chart-6);` | - |
| `edge-start-chart-7` | `border-inline-start: 3px solid var(--redz-chart-7);` | - |
| `edge-start-chart-8` | `border-inline-start: 3px solid var(--redz-chart-8);` | - |
| `rounded` | `border-radius: var(--redz-radius-8);` | - |
| `rounded-full` | `border-radius: 999px;` | - |
| `rounded-0` | `border-radius: var(--redz-radius-0);` | - |
| `rounded-4` | `border-radius: var(--redz-radius-4);` | - |
| `rounded-6` | `border-radius: var(--redz-radius-6);` | - |
| `rounded-8` | `border-radius: var(--redz-radius-8);` | - |
| `rounded-12` | `border-radius: var(--redz-radius-12);` | - |
| `rounded-16` | `border-radius: var(--redz-radius-16);` | - |
| `rounded-top` | `border-start-start-radius: var(--redz-radius-8); border-start-end-radius: var(--redz-radius-8);` | - |
| `rounded-end` | `border-start-end-radius: var(--redz-radius-8); border-end-end-radius: var(--redz-radius-8);` | - |
| `rounded-bottom` | `border-end-start-radius: var(--redz-radius-8); border-end-end-radius: var(--redz-radius-8);` | - |
| `rounded-start` | `border-start-start-radius: var(--redz-radius-8); border-end-start-radius: var(--redz-radius-8);` | - |
| `shadow-1` | `box-shadow: var(--redz-shadow-1);` | - |
| `shadow-2` | `box-shadow: var(--redz-shadow-2);` | - |
| `shadow-3` | `box-shadow: var(--redz-shadow-3);` | - |
| `shadow-none` | `box-shadow: none;` | - |
| `w-25` | `inline-size: 25%;` | - |
| `w-50` | `inline-size: 50%;` | - |
| `w-75` | `inline-size: 75%;` | - |
| `w-100` | `inline-size: 100%;` | - |
| `w-auto` | `inline-size: auto;` | - |
| `w-56` | `inline-size: 3.5rem;` | - |
| `w-64` | `inline-size: 4rem;` | - |
| `w-80` | `inline-size: 5rem;` | - |
| `w-96` | `inline-size: 6rem;` | - |
| `w-120` | `inline-size: 7.5rem;` | - |
| `w-160` | `inline-size: 10rem;` | - |
| `h-25` | `block-size: 25%;` | - |
| `h-50` | `block-size: 50%;` | - |
| `h-75` | `block-size: 75%;` | - |
| `h-100` | `block-size: 100%;` | - |
| `h-auto` | `block-size: auto;` | - |
| `h-32` | `block-size: 2rem;` | - |
| `h-40` | `block-size: 2.5rem;` | - |
| `h-72` | `block-size: 4.5rem;` | - |
| `size-32` | `inline-size: 2rem; block-size: 2rem;` | - |
| `size-48` | `inline-size: 3rem; block-size: 3rem;` | - |
| `size-64` | `inline-size: 4rem; block-size: 4rem;` | - |
| `size-80` | `inline-size: 5rem; block-size: 5rem;` | - |
| `max-w-80` | `max-inline-size: 5rem;` | - |
| `max-w-120` | `max-inline-size: 7.5rem;` | - |
| `max-w-160` | `max-inline-size: 10rem;` | - |
| `max-w-240` | `max-inline-size: 15rem;` | - |
| `max-w-320` | `max-inline-size: 20rem;` | - |
| `max-w-360` | `max-inline-size: 22.5rem;` | - |
| `max-w-480` | `max-inline-size: 30rem;` | - |
| `max-w-560` | `max-inline-size: 35rem;` | - |
| `max-w-640` | `max-inline-size: 40rem;` | - |
| `max-w-768` | `max-inline-size: 48rem;` | - |
| `max-w-960` | `max-inline-size: 60rem;` | - |
| `max-w-1200` | `max-inline-size: 75rem;` | - |
| `max-h-160` | `max-block-size: 10rem;` | - |
| `max-h-240` | `max-block-size: 15rem;` | - |
| `max-h-320` | `max-block-size: 20rem;` | - |
| `max-h-400` | `max-block-size: 25rem;` | - |
| `max-h-480` | `max-block-size: 30rem;` | - |
| `max-h-560` | `max-block-size: 35rem;` | - |
| `max-h-640` | `max-block-size: 40rem;` | - |
| `min-w-0` | `min-inline-size: 0;` | - |
| `min-w-56` | `min-inline-size: 3.5rem;` | - |
| `min-w-120` | `min-inline-size: 7.5rem;` | - |
| `min-w-160` | `min-inline-size: 10rem;` | - |
| `min-w-200` | `min-inline-size: 12.5rem;` | - |
| `min-w-240` | `min-inline-size: 15rem;` | - |
| `min-w-288` | `min-inline-size: 18rem;` | - |
| `vw-100` | `inline-size: 100vw;` | - |
| `min-vw-100` | `min-inline-size: 100vw;` | - |
| `vh-100` | `block-size: 100dvh;` | - |
| `min-vh-100` | `min-block-size: 100dvh;` | - |
| `opacity-0` | `opacity: 0;` | - |
| `opacity-25` | `opacity: 0.25;` | - |
| `opacity-50` | `opacity: 0.5;` | - |
| `opacity-75` | `opacity: 0.75;` | - |
| `opacity-100` | `opacity: 1;` | - |
| `position-static` | `position: static;` | - |
| `position-relative` | `position: relative;` | - |
| `position-absolute` | `position: absolute;` | - |
| `position-fixed` | `position: fixed;` | - |
| `position-sticky` | `position: sticky;` | - |
| `top-0` | `inset-block-start: 0;` | - |
| `top-50` | `inset-block-start: 50%;` | - |
| `top-100` | `inset-block-start: 100%;` | - |
| `bottom-0` | `inset-block-end: 0;` | - |
| `bottom-50` | `inset-block-end: 50%;` | - |
| `bottom-100` | `inset-block-end: 100%;` | - |
| `start-0` | `inset-inline-start: 0;` | - |
| `start-50` | `inset-inline-start: 50%;` | - |
| `start-100` | `inset-inline-start: 100%;` | - |
| `end-0` | `inset-inline-end: 0;` | - |
| `end-50` | `inset-inline-end: 50%;` | - |
| `end-100` | `inset-inline-end: 100%;` | - |
| `translate-middle` | `translate: -50% -50%;` | - |
| `translate-middle:dir(rtl)` | `translate: 50% -50%;` | - |
| `translate-middle-x` | `translate: -50% 0;` | - |
| `translate-middle-x:dir(rtl)` | `translate: 50% 0;` | - |
| `translate-middle-y` | `translate: 0 -50%;` | - |
| `z-n1` | `z-index: -1;` | - |
| `z-0` | `z-index: 0;` | - |
| `z-1` | `z-index: 1;` | - |
| `z-2` | `z-index: 2;` | - |
| `z-3` | `z-index: 3;` | - |
| `float-start` | `float: inline-start;` | yes |
| `float-end` | `float: inline-end;` | yes |
| `float-none` | `float: none;` | yes |
| `overflow-auto` | `overflow: auto;` | - |
| `overflow-hidden` | `overflow: hidden;` | - |
| `overflow-visible` | `overflow: visible;` | - |
| `overflow-scroll` | `overflow: scroll;` | - |
| `overflow-x-auto` | `overflow-x: auto;` | - |
| `overflow-x-hidden` | `overflow-x: hidden;` | - |
| `overflow-x-visible` | `overflow-x: visible;` | - |
| `overflow-x-scroll` | `overflow-x: scroll;` | - |
| `overflow-y-auto` | `overflow-y: auto;` | - |
| `overflow-y-hidden` | `overflow-y: hidden;` | - |
| `overflow-y-visible` | `overflow-y: visible;` | - |
| `overflow-y-scroll` | `overflow-y: scroll;` | - |
| `align-baseline` | `vertical-align: baseline;` | - |
| `align-top` | `vertical-align: top;` | - |
| `align-middle` | `vertical-align: middle;` | - |
| `align-bottom` | `vertical-align: bottom;` | - |
| `align-text-top` | `vertical-align: text-top;` | - |
| `align-text-bottom` | `vertical-align: text-bottom;` | - |
| `object-fit-contain` | `object-fit: contain;` | - |
| `object-fit-cover` | `object-fit: cover;` | - |
| `object-fit-fill` | `object-fit: fill;` | - |
| `object-fit-none` | `object-fit: none;` | - |
| `ratio-1x1` | `aspect-ratio: 1 / 1;` | - |
| `ratio-4x3` | `aspect-ratio: 4 / 3;` | - |
| `ratio-16x9` | `aspect-ratio: 16 / 9;` | - |
| `ratio-21x9` | `aspect-ratio: 21 / 9;` | - |
| `ratio-1.91x1` | `aspect-ratio: 1.91 / 1;` | - |
| `ratio-auto` | `aspect-ratio: auto;` | - |
| `visible` | `visibility: visible;` | - |
| `invisible` | `visibility: hidden;` | - |
| `user-select-none` | `-webkit-user-select: none; user-select: none;` | - |
| `user-select-all` | `-webkit-user-select: all; user-select: all;` | - |
| `user-select-auto` | `-webkit-user-select: auto; user-select: auto;` | - |
| `pe-none` | `pointer-events: none;` | - |
| `pe-auto` | `pointer-events: auto;` | - |
| `visually-hidden` | `position: absolute; inline-size: 1px; block-size: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;` | - |
| `sticky-top` | `position: sticky; inset-block-start: var(--redz-sticky-top, 0); z-index: 5;` | - |
| `flash` | `animation: flash 1.2s ease-out;` | - |
| `offscreen` | `position: absolute; inset-block-start: 0; inset-inline-start: -100vw; inline-size: 1px; block-size: 1px; overflow: hidden;` | - |
| `stretched-link::after` | `content: ""; position: absolute; inset: 0; z-index: 1;` | - |
| `vr` | `display: inline-block; align-self: stretch; inline-size: 1px; min-block-size: 1em; background: var(--redz-border-strong);` | - |
| `icon-link` | `display: inline-flex; align-items: center; gap: 0.375em; text-underline-offset: 0.2em;` | - |
| `flip-rtl:dir(rtl)` | `scale: -1 1;` | - |
| `d-none` | `display: none;` | yes |

## From Bootstrap 5.3

| Bootstrap 5.3 | REDZ.UI | Change | Note |
| --- | --- | --- | --- |
| `bg-black` | - | review | bg-body, bg-page, bg-raised or a tone |
| `bg-body-secondary` | `bg-page` | rename |  |
| `bg-body-tertiary` | `bg-raised` | rename |  |
| `bg-dark` | - | review | bg-body, bg-page, bg-raised or a tone |
| `bg-dark-subtle` | - | review | bg-page, or a tone's -subtle |
| `bg-gradient` | - | remove | no gradients |
| `bg-light` | - | review | bg-body, bg-page, bg-raised or a tone |
| `bg-light-subtle` | - | review | bg-page, or a tone's -subtle |
| `bg-opacity-10` | - | review | Bootstrap 6 dropped it too: bg-{tone}-subtle |
| `bg-opacity-100` | - | review | Bootstrap 6 dropped it too: bg-{tone}-subtle |
| `bg-opacity-25` | - | review | Bootstrap 6 dropped it too: bg-{tone}-subtle |
| `bg-opacity-50` | - | review | Bootstrap 6 dropped it too: bg-{tone}-subtle |
| `bg-opacity-75` | - | review | Bootstrap 6 dropped it too: bg-{tone}-subtle |
| `bg-white` | - | review | bg-body, bg-page, bg-raised or a tone |
| `blockquote` | - | missing |  |
| `blockquote-footer` | - | missing |  |
| `border-3` | - | review | the widths are 1, 2 and 4 px |
| `border-5` | - | review | the widths are 1, 2 and 4 px |
| `border-black` | - | review | border-strong, or a tone |
| `border-bottom-0` | - | missing | draw only the sides you need: border-top and the others |
| `border-dark` | - | review | border-strong, or a tone |
| `border-dark-subtle` | - | review | border, or border-strong |
| `border-end-0` | - | missing | draw only the sides you need: border-top and the others |
| `border-light` | - | review | border-strong, or a tone |
| `border-light-subtle` | - | review | border, or border-strong |
| `border-opacity-10` | - | missing |  |
| `border-opacity-100` | - | missing |  |
| `border-opacity-25` | - | missing |  |
| `border-opacity-50` | - | missing |  |
| `border-opacity-75` | - | missing |  |
| `border-start-0` | - | missing | draw only the sides you need: border-top and the others |
| `border-top-0` | - | missing | draw only the sides you need: border-top and the others |
| `border-white` | - | review | border-strong, or a tone |
| `clearfix` | - | remove | no floats |
| `column-gap-1` | `column-gap-4` | value | the number is the pixels |
| `column-gap-2` | `column-gap-8` | value | reused: column-gap-2 means another thing in REDZ.UI; the number is the pixels |
| `column-gap-3` | `column-gap-16` | value | the number is the pixels |
| `column-gap-4` | `column-gap-24` | value | reused: column-gap-4 means another thing in REDZ.UI; the number is the pixels |
| `column-gap-5` | `column-gap-48` | value | the number is the pixels |
| `display-1` | `fs-32` | review | the largest size here |
| `display-2` | `fs-32` | review | the largest size here |
| `display-3` | `fs-32` | review | the largest size here |
| `display-4` | `fs-32` | review | the largest size here |
| `display-5` | `fs-32` | review | the largest size here |
| `display-6` | `fs-32` | review | the largest size here |
| `figure` | - | missing |  |
| `figure-caption` | - | missing |  |
| `figure-img` | - | missing |  |
| `fixed-bottom` | - | review | position-fixed with top-0 or bottom-0, start-0 and end-0 |
| `fixed-top` | - | review | position-fixed with top-0 or bottom-0, start-0 and end-0 |
| `focus-ring` | - | remove | the focus ring is built in, 3:1 in both themes |
| `focus-ring-danger` | - | remove | the focus ring is built in, 3:1 in both themes |
| `focus-ring-dark` | - | remove | the focus ring is built in, 3:1 in both themes |
| `focus-ring-info` | - | remove | the focus ring is built in, 3:1 in both themes |
| `focus-ring-light` | - | remove | the focus ring is built in, 3:1 in both themes |
| `focus-ring-primary` | - | remove | the focus ring is built in, 3:1 in both themes |
| `focus-ring-secondary` | - | remove | the focus ring is built in, 3:1 in both themes |
| `focus-ring-success` | - | remove | the focus ring is built in, 3:1 in both themes |
| `focus-ring-warning` | - | remove | the focus ring is built in, 3:1 in both themes |
| `fs-1` | `fs-32` | value | 40 px in Bootstrap; 32 is the largest here |
| `fs-2` | `fs-32` | value | 32 px |
| `fs-3` | `fs-24` | value | 28 px in Bootstrap |
| `fs-4` | `fs-24` | value | 24 px |
| `fs-5` | `fs-20` | value | 20 px |
| `fs-6` | `fs-16` | value | 16 px |
| `fw-bold` | `fw-700` | rename |  |
| `fw-bolder` | - | review | the weights are 400, 500, 600 and 700 |
| `fw-light` | - | review | the weights are 400, 500, 600 and 700 |
| `fw-lighter` | - | review | the weights are 400, 500, 600 and 700 |
| `fw-medium` | `fw-500` | rename |  |
| `fw-normal` | `fw-400` | rename |  |
| `fw-semibold` | `fw-600` | rename |  |
| `gap-1` | `gap-4` | value | the number is the pixels |
| `gap-2` | `gap-8` | value | reused: gap-2 means another thing in REDZ.UI; the number is the pixels |
| `gap-3` | `gap-16` | value | the number is the pixels |
| `gap-4` | `gap-24` | value | reused: gap-4 means another thing in REDZ.UI; the number is the pixels |
| `gap-5` | `gap-48` | value | the number is the pixels |
| `h1` | - | review | the h1-h4 sizes are the elements'; fs-* for another |
| `h2` | - | review | the h1-h4 sizes are the elements'; fs-* for another |
| `h3` | - | review | the h1-h4 sizes are the elements'; fs-* for another |
| `h4` | - | review | the h1-h4 sizes are the elements'; fs-* for another |
| `h5` | - | review | the h1-h4 sizes are the elements'; fs-* for another |
| `h6` | - | review | the h1-h4 sizes are the elements'; fs-* for another |
| `icon-link-hover` | - | remove | the icon does not move on hover |
| `img-fluid` | - | review | images never overflow their box here; w-100 to fill it |
| `img-thumbnail` | - | missing |  |
| `initialism` | - | missing |  |
| `lead` | `fs-16 text-muted` | review | a lead paragraph |
| `lh-1` | - | review | line heights are px here: lh-16, lh-20, lh-24, lh-28 |
| `lh-base` | - | review | line heights are px here: lh-16, lh-20, lh-24, lh-28 |
| `link-body-emphasis` | - | review | a link is the accent; text-* for a tone |
| `link-danger` | - | review | a link is the accent; text-* for a tone |
| `link-dark` | - | review | a link is the accent; text-* for a tone |
| `link-info` | - | review | a link is the accent; text-* for a tone |
| `link-light` | - | review | a link is the accent; text-* for a tone |
| `link-offset-1` | - | review | Bootstrap 6 dropped them too: text-decoration-underline or -none on the link |
| `link-offset-1-hover` | - | review | Bootstrap 6 dropped them too: text-decoration-underline or -none on the link |
| `link-offset-2` | - | review | Bootstrap 6 dropped them too: text-decoration-underline or -none on the link |
| `link-offset-2-hover` | - | review | Bootstrap 6 dropped them too: text-decoration-underline or -none on the link |
| `link-offset-3` | - | review | Bootstrap 6 dropped them too: text-decoration-underline or -none on the link |
| `link-offset-3-hover` | - | review | Bootstrap 6 dropped them too: text-decoration-underline or -none on the link |
| `link-opacity-10` | - | review | Bootstrap 6 dropped them too: text-decoration-underline or -none on the link |
| `link-opacity-10-hover` | - | review | Bootstrap 6 dropped them too: text-decoration-underline or -none on the link |
| `link-opacity-100` | - | review | Bootstrap 6 dropped them too: text-decoration-underline or -none on the link |
| `link-opacity-100-hover` | - | review | Bootstrap 6 dropped them too: text-decoration-underline or -none on the link |
| `link-opacity-25` | - | review | Bootstrap 6 dropped them too: text-decoration-underline or -none on the link |
| `link-opacity-25-hover` | - | review | Bootstrap 6 dropped them too: text-decoration-underline or -none on the link |
| `link-opacity-50` | - | review | Bootstrap 6 dropped them too: text-decoration-underline or -none on the link |
| `link-opacity-50-hover` | - | review | Bootstrap 6 dropped them too: text-decoration-underline or -none on the link |
| `link-opacity-75` | - | review | Bootstrap 6 dropped them too: text-decoration-underline or -none on the link |
| `link-opacity-75-hover` | - | review | Bootstrap 6 dropped them too: text-decoration-underline or -none on the link |
| `link-primary` | - | review | a link is the accent; text-* for a tone |
| `link-secondary` | - | review | a link is the accent; text-* for a tone |
| `link-success` | - | review | a link is the accent; text-* for a tone |
| `link-underline` | - | review | Bootstrap 6 dropped them too: text-decoration-underline or -none on the link |
| `link-underline-danger` | - | review | Bootstrap 6 dropped them too: text-decoration-underline or -none on the link |
| `link-underline-dark` | - | review | Bootstrap 6 dropped them too: text-decoration-underline or -none on the link |
| `link-underline-info` | - | review | Bootstrap 6 dropped them too: text-decoration-underline or -none on the link |
| `link-underline-light` | - | review | Bootstrap 6 dropped them too: text-decoration-underline or -none on the link |
| `link-underline-opacity-0` | - | review | Bootstrap 6 dropped them too: text-decoration-underline or -none on the link |
| `link-underline-opacity-0-hover` | - | review | Bootstrap 6 dropped them too: text-decoration-underline or -none on the link |
| `link-underline-opacity-10` | - | review | Bootstrap 6 dropped them too: text-decoration-underline or -none on the link |
| `link-underline-opacity-10-hover` | - | review | Bootstrap 6 dropped them too: text-decoration-underline or -none on the link |
| `link-underline-opacity-100` | - | review | Bootstrap 6 dropped them too: text-decoration-underline or -none on the link |
| `link-underline-opacity-100-hover` | - | review | Bootstrap 6 dropped them too: text-decoration-underline or -none on the link |
| `link-underline-opacity-25` | - | review | Bootstrap 6 dropped them too: text-decoration-underline or -none on the link |
| `link-underline-opacity-25-hover` | - | review | Bootstrap 6 dropped them too: text-decoration-underline or -none on the link |
| `link-underline-opacity-50` | - | review | Bootstrap 6 dropped them too: text-decoration-underline or -none on the link |
| `link-underline-opacity-50-hover` | - | review | Bootstrap 6 dropped them too: text-decoration-underline or -none on the link |
| `link-underline-opacity-75` | - | review | Bootstrap 6 dropped them too: text-decoration-underline or -none on the link |
| `link-underline-opacity-75-hover` | - | review | Bootstrap 6 dropped them too: text-decoration-underline or -none on the link |
| `link-underline-primary` | - | review | Bootstrap 6 dropped them too: text-decoration-underline or -none on the link |
| `link-underline-secondary` | - | review | Bootstrap 6 dropped them too: text-decoration-underline or -none on the link |
| `link-underline-success` | - | review | Bootstrap 6 dropped them too: text-decoration-underline or -none on the link |
| `link-underline-warning` | - | review | Bootstrap 6 dropped them too: text-decoration-underline or -none on the link |
| `link-warning` | - | review | a link is the accent; text-* for a tone |
| `list-inline` | - | review | hstack flex-wrap |
| `list-inline-item` | - | review | hstack flex-wrap |
| `m-1` | `m-4` | value | the number is the pixels |
| `m-2` | `m-8` | value | reused: m-2 means another thing in REDZ.UI; the number is the pixels |
| `m-3` | `m-16` | value | the number is the pixels |
| `m-4` | `m-24` | value | reused: m-4 means another thing in REDZ.UI; the number is the pixels |
| `m-5` | `m-48` | value | the number is the pixels |
| `mark` | - | missing |  |
| `mb-1` | `mb-4` | value | the number is the pixels |
| `mb-2` | `mb-8` | value | reused: mb-2 means another thing in REDZ.UI; the number is the pixels |
| `mb-3` | `mb-16` | value | the number is the pixels |
| `mb-4` | `mb-24` | value | reused: mb-4 means another thing in REDZ.UI; the number is the pixels |
| `mb-5` | `mb-48` | value | the number is the pixels |
| `me-1` | `me-4` | value | the number is the pixels |
| `me-2` | `me-8` | value | reused: me-2 means another thing in REDZ.UI; the number is the pixels |
| `me-3` | `me-16` | value | the number is the pixels |
| `me-4` | `me-24` | value | reused: me-4 means another thing in REDZ.UI; the number is the pixels |
| `me-5` | `me-48` | value | the number is the pixels |
| `mh-100` | - | missing |  |
| `ms-1` | `ms-4` | value | the number is the pixels |
| `ms-2` | `ms-8` | value | reused: ms-2 means another thing in REDZ.UI; the number is the pixels |
| `ms-3` | `ms-16` | value | the number is the pixels |
| `ms-4` | `ms-24` | value | reused: ms-4 means another thing in REDZ.UI; the number is the pixels |
| `ms-5` | `ms-48` | value | the number is the pixels |
| `mt-1` | `mt-4` | value | the number is the pixels |
| `mt-2` | `mt-8` | value | reused: mt-2 means another thing in REDZ.UI; the number is the pixels |
| `mt-3` | `mt-16` | value | the number is the pixels |
| `mt-4` | `mt-24` | value | reused: mt-4 means another thing in REDZ.UI; the number is the pixels |
| `mt-5` | `mt-48` | value | the number is the pixels |
| `mw-100` | - | review | max-w-* by px |
| `mx-1` | `mx-4` | value | the number is the pixels |
| `mx-2` | `mx-8` | value | reused: mx-2 means another thing in REDZ.UI; the number is the pixels |
| `mx-3` | `mx-16` | value | the number is the pixels |
| `mx-4` | `mx-24` | value | reused: mx-4 means another thing in REDZ.UI; the number is the pixels |
| `mx-5` | `mx-48` | value | the number is the pixels |
| `my-1` | `my-4` | value | the number is the pixels |
| `my-2` | `my-8` | value | reused: my-2 means another thing in REDZ.UI; the number is the pixels |
| `my-3` | `my-16` | value | the number is the pixels |
| `my-4` | `my-24` | value | reused: my-4 means another thing in REDZ.UI; the number is the pixels |
| `my-5` | `my-48` | value | the number is the pixels |
| `object-fit-scale` | - | review | object-fit-contain is the nearest |
| `p-1` | `p-4` | value | the number is the pixels |
| `p-2` | `p-8` | value | reused: p-2 means another thing in REDZ.UI; the number is the pixels |
| `p-3` | `p-16` | value | the number is the pixels |
| `p-4` | `p-24` | value | reused: p-4 means another thing in REDZ.UI; the number is the pixels |
| `p-5` | `p-48` | value | the number is the pixels |
| `pb-1` | `pb-4` | value | the number is the pixels |
| `pb-2` | `pb-8` | value | reused: pb-2 means another thing in REDZ.UI; the number is the pixels |
| `pb-3` | `pb-16` | value | the number is the pixels |
| `pb-4` | `pb-24` | value | reused: pb-4 means another thing in REDZ.UI; the number is the pixels |
| `pb-5` | `pb-48` | value | the number is the pixels |
| `pe-1` | `pe-4` | value | the number is the pixels |
| `pe-2` | `pe-8` | value | reused: pe-2 means another thing in REDZ.UI; the number is the pixels |
| `pe-3` | `pe-16` | value | the number is the pixels |
| `pe-4` | `pe-24` | value | reused: pe-4 means another thing in REDZ.UI; the number is the pixels |
| `pe-5` | `pe-48` | value | the number is the pixels |
| `ps-1` | `ps-4` | value | the number is the pixels |
| `ps-2` | `ps-8` | value | reused: ps-2 means another thing in REDZ.UI; the number is the pixels |
| `ps-3` | `ps-16` | value | the number is the pixels |
| `ps-4` | `ps-24` | value | reused: ps-4 means another thing in REDZ.UI; the number is the pixels |
| `ps-5` | `ps-48` | value | the number is the pixels |
| `pt-1` | `pt-4` | value | the number is the pixels |
| `pt-2` | `pt-8` | value | reused: pt-2 means another thing in REDZ.UI; the number is the pixels |
| `pt-3` | `pt-16` | value | the number is the pixels |
| `pt-4` | `pt-24` | value | reused: pt-4 means another thing in REDZ.UI; the number is the pixels |
| `pt-5` | `pt-48` | value | the number is the pixels |
| `px-1` | `px-4` | value | the number is the pixels |
| `px-2` | `px-8` | value | reused: px-2 means another thing in REDZ.UI; the number is the pixels |
| `px-3` | `px-16` | value | the number is the pixels |
| `px-4` | `px-24` | value | reused: px-4 means another thing in REDZ.UI; the number is the pixels |
| `px-5` | `px-48` | value | the number is the pixels |
| `py-1` | `py-4` | value | the number is the pixels |
| `py-2` | `py-8` | value | reused: py-2 means another thing in REDZ.UI; the number is the pixels |
| `py-3` | `py-16` | value | the number is the pixels |
| `py-4` | `py-24` | value | reused: py-4 means another thing in REDZ.UI; the number is the pixels |
| `py-5` | `py-48` | value | the number is the pixels |
| `ratio` | - | remove | the ratio goes on the element itself; an image inside a frame fills it with w-100 h-100 object-fit-cover |
| `rounded-1` | `rounded-4` | value | 4 px |
| `rounded-2` | `rounded-6` | value | 6 px |
| `rounded-3` | `rounded-8` | value | 8 px |
| `rounded-4` | `rounded-16` | value | reused: rounded-4 means another thing in REDZ.UI; 16 px |
| `rounded-5` | - | review | 32 px in Bootstrap: rounded-16 or rounded-full |
| `rounded-bottom-0` | `rounded-bottom` | review | a side takes the 8 px radius |
| `rounded-bottom-1` | `rounded-bottom` | review | a side takes the 8 px radius |
| `rounded-bottom-2` | `rounded-bottom` | review | a side takes the 8 px radius |
| `rounded-bottom-3` | `rounded-bottom` | review | a side takes the 8 px radius |
| `rounded-bottom-4` | `rounded-bottom` | review | a side takes the 8 px radius |
| `rounded-bottom-5` | `rounded-bottom` | review | a side takes the 8 px radius |
| `rounded-bottom-circle` | `rounded-bottom` | review | a side takes the 8 px radius |
| `rounded-bottom-pill` | `rounded-bottom` | review | a side takes the 8 px radius |
| `rounded-circle` | `rounded-full` | rename |  |
| `rounded-end-0` | `rounded-end` | review | a side takes the 8 px radius |
| `rounded-end-1` | `rounded-end` | review | a side takes the 8 px radius |
| `rounded-end-2` | `rounded-end` | review | a side takes the 8 px radius |
| `rounded-end-3` | `rounded-end` | review | a side takes the 8 px radius |
| `rounded-end-4` | `rounded-end` | review | a side takes the 8 px radius |
| `rounded-end-5` | `rounded-end` | review | a side takes the 8 px radius |
| `rounded-end-circle` | `rounded-end` | review | a side takes the 8 px radius |
| `rounded-end-pill` | `rounded-end` | review | a side takes the 8 px radius |
| `rounded-pill` | `rounded-full` | rename |  |
| `rounded-start-0` | `rounded-start` | review | a side takes the 8 px radius |
| `rounded-start-1` | `rounded-start` | review | a side takes the 8 px radius |
| `rounded-start-2` | `rounded-start` | review | a side takes the 8 px radius |
| `rounded-start-3` | `rounded-start` | review | a side takes the 8 px radius |
| `rounded-start-4` | `rounded-start` | review | a side takes the 8 px radius |
| `rounded-start-5` | `rounded-start` | review | a side takes the 8 px radius |
| `rounded-start-circle` | `rounded-start` | review | a side takes the 8 px radius |
| `rounded-start-pill` | `rounded-start` | review | a side takes the 8 px radius |
| `rounded-top-0` | `rounded-top` | review | a side takes the 8 px radius |
| `rounded-top-1` | `rounded-top` | review | a side takes the 8 px radius |
| `rounded-top-2` | `rounded-top` | review | a side takes the 8 px radius |
| `rounded-top-3` | `rounded-top` | review | a side takes the 8 px radius |
| `rounded-top-4` | `rounded-top` | review | a side takes the 8 px radius |
| `rounded-top-5` | `rounded-top` | review | a side takes the 8 px radius |
| `rounded-top-circle` | `rounded-top` | review | a side takes the 8 px radius |
| `rounded-top-pill` | `rounded-top` | review | a side takes the 8 px radius |
| `row-gap-1` | `row-gap-4` | value | the number is the pixels |
| `row-gap-2` | `row-gap-8` | value | reused: row-gap-2 means another thing in REDZ.UI; the number is the pixels |
| `row-gap-3` | `row-gap-16` | value | the number is the pixels |
| `row-gap-4` | `row-gap-24` | value | reused: row-gap-4 means another thing in REDZ.UI; the number is the pixels |
| `row-gap-5` | `row-gap-48` | value | the number is the pixels |
| `shadow` | `shadow-2` | rename |  |
| `small` | - | review | fs-12, or the <small> element |
| `sticky-bottom` | - | review | position-sticky with bottom-0 |
| `text-black` | - | review | no white, black, light or dark: text-body, text-muted or a tone; on bg-TONE, text-TONE-contrast |
| `text-black-50` | - | review | no white, black, light or dark: text-body, text-muted or a tone; on bg-TONE, text-TONE-contrast |
| `text-body-emphasis` | `text-body` | rename |  |
| `text-body-secondary` | `text-muted` | rename |  |
| `text-body-tertiary` | `text-faint` | rename |  |
| `text-danger-emphasis` | `text-danger` | rename | a tone's text color is already its emphasis |
| `text-dark` | - | review | no white, black, light or dark: text-body, text-muted or a tone; on bg-TONE, text-TONE-contrast |
| `text-dark-emphasis` | `text-body` | review | no light or dark: the text color |
| `text-info-emphasis` | `text-info` | rename | a tone's text color is already its emphasis |
| `text-light` | - | review | no white, black, light or dark: text-body, text-muted or a tone; on bg-TONE, text-TONE-contrast |
| `text-light-emphasis` | `text-body` | review | no light or dark: the text color |
| `text-opacity-100` | - | review | Bootstrap 6 dropped it too: text-muted or text-faint |
| `text-opacity-25` | - | review | Bootstrap 6 dropped it too: text-muted or text-faint |
| `text-opacity-50` | - | review | Bootstrap 6 dropped it too: text-muted or text-faint |
| `text-opacity-75` | - | review | Bootstrap 6 dropped it too: text-muted or text-faint |
| `text-primary-emphasis` | `text-primary` | rename | a tone's text color is already its emphasis |
| `text-secondary-emphasis` | `text-secondary` | rename | a tone's text color is already its emphasis |
| `text-success-emphasis` | `text-success` | rename | a tone's text color is already its emphasis |
| `text-warning-emphasis` | `text-warning` | rename | a tone's text color is already its emphasis |
| `text-white` | - | review | no white, black, light or dark: text-body, text-muted or a tone; on bg-TONE, text-TONE-contrast |
| `text-white-50` | - | review | no white, black, light or dark: text-body, text-muted or a tone; on bg-TONE, text-TONE-contrast |
| `--bs-aspect-ratio` | - | review | ratio-* for the ratio; the property itself for the rest |
| `--bs-bg-opacity` | - | review | a relative color or color-mix in place of the opacity |
| `--bs-border-opacity` | - | review | a relative color or color-mix in place of the opacity |
| `--bs-danger-border-subtle` | - | review | color-mix(in oklch, var(--redz-danger) 35%, var(--redz-border)), as border-danger-subtle draws it |
| `--bs-info-border-subtle` | - | review | color-mix(in oklch, var(--redz-info) 35%, var(--redz-border)), as border-info-subtle draws it |
| `--bs-position` | - | review | ratio-* for the ratio; the property itself for the rest |
| `--bs-primary-border-subtle` | - | review | color-mix(in oklch, var(--redz-primary) 35%, var(--redz-border)), as border-primary-subtle draws it |
| `--bs-secondary-border-subtle` | - | review | color-mix(in oklch, var(--redz-secondary) 35%, var(--redz-border)), as border-secondary-subtle draws it |
| `--bs-success-border-subtle` | - | review | color-mix(in oklch, var(--redz-success) 35%, var(--redz-border)), as border-success-subtle draws it |
| `--bs-text-opacity` | - | review | a relative color or color-mix in place of the opacity |
| `--bs-warning-border-subtle` | - | review | color-mix(in oklch, var(--redz-warning) 35%, var(--redz-border)), as border-warning-subtle draws it |