Display & Flexbox

Display

d-none, d-block, d-inline-block, d-flex, d-inline-flex, d-grid — each with responsive variants d-{breakpoint}-{value}:

<div class="d-none d-md-flex">Hidden on mobile, flex from md up</div>

Flex direction & wrapping

<div class="d-flex flex-column flex-md-row gap-3">…</div>

• Direction: flex-row, flex-row-reverse, flex-column, flex-column-reverse
• Wrap: flex-wrap, flex-wrap-reverse, flex-nowrap
• Grow / shrink / order: flex-fill, flex-grow-0 / flex-grow-1, flex-shrink-0 / flex-shrink-1, flex-order-1…flex-order-5

Alignment

Works for both flex and grid containers:

• justify-content-{start|center|end|between|around|evenly}
• align-items-{start|center|end|baseline|stretch}
• align-content-{start|center|end|between|around}
• align-self-*, justify-items-*, justify-self-*
• place-content-*, place-items-*, place-self-*

<div class="d-flex justify-content-between align-items-center">…</div>

Position & z-index

• Position: position-{static|relative|absolute|fixed|sticky}
• Offsets: top-*, right-*, bottom-*, left-* (spacing scale)
• z-index: z-0, z-1, z-2, z-5, z-99, z-100, z-999, z-1000, plus semantic z-navigation, z-navbar, z-fab, z-menu, z-fullscreen, z-toast

Sizing

• Height: h-{auto|fit|fixed|50|75|100}, viewport vh-{50|75|100}, min-vh-100, max-vh-100, dynamic dvh-100
• Width: w-{auto|fit|fixed|50|75|100}, viewport vw-{50|75|100}, min-vw-100, dvw-100

Visibility

visibility-visible, visibility-hidden, and visually-hidden (removed visually but still announced to screen readers).