Background

bg-body background class is introduced in Bootstrap 5.
bg-[primary, secondary, success, danger, warning, info, light, dark, body, white, transparent]

Background Gradient

By adding a .bg-gradient class to your .bg-* class, a linear gradient is added as background image to the backgrounds.
Do you need a gradient in your custom CSS? Just add background-image: var(--bs-gradient);.

Borders

• = [top,end,bottom,start]

border-*
border-*-0
border-[1,2,3,4,5]

Border Radius

rounded-[top, end, bottom, start, circle, pill]
rounded-[0,1,2,3]

Colors

text-[body, black-50, white-50]

Display

d-grid

Flex

Flexbox is pretty much the same, except for the fact that xxl is now introduced to the other sizes.

Float

float-[sm,md,lg,xl,xxl]–[start,end,none]

Overflow

overflow-[auto, hidden, visible, scroll]

Position

position-[static, relative, absolute, fixed, sticky]
top-[0,50,100]
start-[0,50,100]
bottom-[0,50,100]
end-[0,50,100]

translate-middle-[x,y]

You can now center the elements with the transform utility class .translate-middle.
In combination with the edge absolute positioning utilities, it allows you to absolute center an element.
Example

<button type="button" class="btn btn-primary position-relative">
  Mails <span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-secondary">+99 <span class="visually-hidden">unread messages</span></span>
</button>

Width & Height

Width w-[25,50,75,100][auto]
vw-100
Height h-[25,50,75,100][auto]
vh-100
Max Width mw-100
Max Height mh-100
Min Width min-vw-100
Min Height min-vh-100

Spacing: Margin, Padding, & Grid Gap

m/p[t,b,s,e,x,y]–[0,1,2,3,4,5][auto]
d-grid gap-[0,1,2,3,4,5]

Text & Font

text-[sm,md,lg,xl]–[start, center, end]
text-[wrap, nowrap]
text-break
fs-[1,2,3,4,5]
fw-[lighter, light, normal, bold, bolder]
fst-[italic, normal]
lh-[1, sm, base, lg]
font-monospace
text-reset (Resets color to take parent’s color)
text-decoration-[underline, line-through, none]
align-[baseline, top, middle, bottom, text-top, text-bottom]
text-truncate d-block/inline-block

Interaction: Text Selection

user-select-[all, auto, none]

Interaction: Pointer Events

pe-[none, auto]

Example

<a href="#" class="pe-none" tabindex="-1" aria-disabled="true">This link</a> can not be clicked.
<a href="#" class="pe-auto">This link</a> can be clicked (this is default behavior).
<p class="pe-none">
  <a href="#" tabindex="-1" aria-disabled="true">
</p>