Nearby lessons
30 of 39🧩 BS5 Utilities
📌 What Are Bootstrap 5 Utilities?
Utility classes are single-purpose helpers: spacing (.m-*, .p-*), display (.d-flex, .d-none), text alignment (.text-center), colors (.text-primary, .bg-success), borders (.border, .rounded), and more. They let you style without writing custom CSS.
📏 Spacing (.m-* , .p-* , .gap-*)
.m-* – margin (e.g. .m-1, .m-2, .mt-3, .mb-4). .p-* – padding (e.g. .p-2, .px-3). .gap-* – gap between flex/grid children. Sides: t top, b bottom, s start, e end, x horizontal, y vertical.
👁️ Display (.d-none, .d-block, .d-flex, .d-inline)
.d-none – display: none. .d-block – display: block. .d-inline – display: inline. .d-inline-block – display: inline-block. .d-flex – display: flex. Responsive: .d-md-none, .d-lg-flex, etc.
📝 Text (.text-start, .text-center, .text-end, .fw-bold)
.text-start – text-align: left. .text-center – center. .text-end – right. .fw-bold – font-weight: bold. .fw-normal, .fst-italic. Colors: .text-primary, .text-muted, etc.
🎨 Colors (.text-*, .bg-*)
.text-primary, .text-success, .text-danger, .text-warning, .text-muted, etc. .bg-primary, .bg-light, .bg-dark. Use .text-dark or .text-white on colored backgrounds for contrast.
📐 Borders and Rounded (.border, .rounded)
.border – all sides border. .border-0 – no border. .border-top, .border-primary for color. .rounded – small radius. .rounded-3, .rounded-circle, .rounded-pill.
✅ Utilities Best Practices
- Use spacing scale (0–5) for consistency:
.m-1to.m-5,.p-2, etc. - Use responsive prefixes:
.d-md-none,.text-lg-center. - Combine utilities instead of custom CSS when possible.