Text alignment, position & offsets, aspect ratio, object fit, overflow, z-index, truncation, and screen-reader helpers. Keyword classes with breakpoint variants — the breakpoint segment goes anywhere after the first word: text-md-center or text-center-md both work.
Start of the reading direction — flips automatically in RTL. Prefer over text-left.
Center aligned text.
End of the reading direction — flips automatically in RTL. Prefer over text-right.
text-center text-md-start — Centered on mobile, start-aligned from md up (breakpoint in the middle, Bootstrap-style).
Physical variants text-left / text-right still work for cases that must not flip in RTL.
relative parent
absolute bottom-8 end-8
relative — position: relative
absolute — position: absolute
fixed — position: fixed
sticky — position: sticky
sticky-md — sticky from md up
top / bottom / start / end / insetabsolute inset-0 — the overlay pattern
top-10-30 start-16 — fluid top offset
Offsets take fixed values (top-0), fluid ranges (top-10-30), negatives (bottom-n10 — pull outside the parent), and breakpoints (start-md-24). start / end emit logical inset-inline-start/end, flipping automatically in RTL.
ratio-{w}/{h}ratio-16/9
ratio-1/1
ratio-4/3 ratio-md-21/9
The class name is the literal CSS value: ratio-16/9 → aspect-ratio: 16 / 9. Slash, not dots — dots stay reserved for cols ratios.
object-cover — fill the box, crop the overflow. Pair with ratio-16/9 for uniform media cards.
object-contain — fit entirely inside the box.
truncate — one line with an ellipsis: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore.
sr-only hides content visually but keeps it for screen readers — like this sentence, which only assistive tech announces. Use it for icon-button labels and skip links.
overflow-hidden — Content is clipped. Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt.
overflow-auto — Scrolls when needed. Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt.
overflow-scroll — Always scrollbar. Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt.
overflow-visible — Content can overflow its container (default behavior).
z-0
z-1
z-2
z-3
z-4
z-5
z-10
z-50
z-100
Any integer works — z-999, not just the values shown. Negatives via n: z-n1 → z-index: -1 (drop behind the parent). Breakpoints go after the prefix: z-md-10.