Bootstrap 5 Helper (Utility) Classes

---

1. Spacing Helpers

Control margin and padding with shorthand classes:

• Format: .m{side}-{size} or .p{side}-{size}

• m = margin, p = padding

• side = t (top), b (bottom), s (start/left), e (end/right), x (left & right), y (top & bottom), or blank (all sides)

• size = 0 to 5 or auto

Examples:

---

2. Text Helpers

• .text-center, .text-start, .text-end — text alignment

• .text-wrap, .text-nowrap, .text-truncate — control text wrapping and truncation

• .text-lowercase, .text-uppercase, .text-capitalize — transform text case

• .text-muted — muted gray text

• .text-reset — reset color to inherited

Example:

---

3. Display Helpers

Control element display and visibility:

• .d-none, .d-inline, .d-inline-block, .d-block, .d-grid, .d-flex, .d-inline-flex

• Responsive variants: .d-{breakpoint}-none, .d-{breakpoint}-block, etc.

• .visible — visible

• .invisible — invisible but takes up space

Example:

---

4. Flexbox Helpers

Quick flex utilities:

• .flex-row, .flex-column, .flex-row-reverse, .flex-column-reverse

• .flex-grow-0, .flex-grow-1

• .flex-shrink-0, .flex-shrink-1

• .justify-content-start, .justify-content-center, .justify-content-end, .justify-content-between, .justify-content-around, .justify-content-evenly

• .align-items-start, .align-items-center, .align-items-end, .align-items-baseline, .align-items-stretch

• .align-self-auto, .align-self-start, .align-self-center, .align-self-end, .align-self-baseline, .align-self-stretch

Example:

---

5. Position Helpers

Positioning utilities:

• .position-static, .position-relative, .position-absolute, .position-fixed, .position-sticky

• Position offsets: .top-0, .bottom-0, .start-0, .end-0

• Transforms: .translate-middle, .translate-middle-x, .translate-middle-y

Example:

---

6. Sizing Helpers

Control width and height:

• Width: .w-25, .w-50, .w-75, .w-100, .w-auto

• Height: .h-25, .h-50, .h-75, .h-100, .h-auto

• Max-width: .mw-100

• Max-height: .mh-100

Example:

---

7. Border Helpers

• .border — add border

• .border-top, .border-end, .border-bottom, .border-start

• .border-0 — remove all borders

• .border-{color} — color the border (e.g., .border-primary)

• .rounded, .rounded-circle, .rounded-pill, .rounded-0 — border radius

Example:

---

8. Shadow Helpers

• .shadow — small shadow

• .shadow-sm — smaller shadow

• .shadow-lg — larger shadow

• .shadow-none — no shadow

Example:

---

9. Overflow Helpers

• .overflow-auto

• .overflow-hidden

• .overflow-visible

• .overflow-scroll

---

10. Visibility Helpers

• .visible

• .invisible — invisible but occupies space

---

11. User Select Helpers

Control text selection behavior:

• .user-select-none

• .user-select-auto

• .user-select-all

---

Quick Example Combining Helpers