Bs5 Utilities in Bootstrap
Sure! Here’s a quick guide to Bootstrap 5 Utilities — a powerful set of helper classes for spacing, sizing, positioning, colors, and more.
?? Bootstrap 5 Utilities
Bootstrap 5 includes many utility classes to rapidly style elements without writing custom CSS.
1. Spacing Utilities
Control margin and padding with shorthand:
Format:
{property}{sides}-{breakpoint}-{size}
| Property | Description |
|---|---|
m | margin |
p | padding |
| Sides | Abbreviation |
|---|---|
t | top |
b | bottom |
s | start (left in LTR) |
e | end (right in LTR) |
x | left and right |
y | top and bottom |
| (blank) | all sides |
| Size | Values |
|---|---|
| 0 | 0 |
| 1 | 0.25rem (4px) |
| 2 | 0.5rem (8px) |
| 3 | 1rem (16px) |
| 4 | 1.5rem (24px) |
| 5 | 3rem (48px) |
auto | auto margin |
Example:
<div class="mt-3 mb-2 px-4">Content with margin-top 1rem, margin-bottom 0.5rem, padding left/right 1.5rem</div>2. Display Utilities
Control element display:
| Class | Description |
|---|---|
.d-none | display: none |
.d-inline | display: inline |
.d-inline-block | display: inline-block |
.d-block | display: block |
.d-flex | display: flex |
.d-inline-flex | display: inline-flex |
Responsive variants: .d-{breakpoint}-{value} e.g. .d-md-none
3. Text Utilities
Text alignment:
.text-start,.text-center,.text-endText wrapping:
.text-wrap,.text-nowrapText truncation:
.text-truncateText transform:
.text-lowercase,.text-uppercase,.text-capitalizeFont weight:
.fw-light,.fw-normal,.fw-boldFont style:
.fst-italic,.fst-normalText color:
.text-primary,.text-secondary,.text-success,.text-danger,.text-warning,.text-info,.text-light,.text-dark,.text-muted,.text-white
4. Flex Utilities
| Class | Description |
|---|---|
.d-flex | display flex |
.d-inline-flex | inline flex |
.flex-row | flex direction row (default) |
.flex-row-reverse | reverse row |
.flex-column | flex direction column |
.flex-column-reverse | reverse column |
.flex-grow-1 | grow to fill space |
.flex-shrink-1 | shrink |
.flex-wrap | allow wrapping |
| `.justify-content-start | center |
| `.align-items-start | center |
5. Sizing Utilities
Control width and height:
| Class | Description |
|---|---|
.w-25, .w-50, .w-75, .w-100 | width percentage |
.w-auto | auto width |
.h-25, .h-50, .h-75, .h-100 | height percentage |
.h-auto | auto height |
.mw-100 | max-width 100% |
.mh-100 | max-height 100% |
6. Position Utilities
| Class | Description |
|---|---|
.position-static | static positioning |
.position-relative | relative positioning |
.position-absolute | absolute positioning |
.position-fixed | fixed positioning |
.position-sticky | sticky positioning |
.top-0, .bottom-0, .start-0, .end-0 | position offsets |
7. Overflow Utilities
| Class | Description |
|---|---|
.overflow-auto | overflow: auto |
.overflow-hidden | overflow: hidden |
.overflow-visible | overflow: visible |
.overflow-scroll | overflow: scroll |
8. Background and Border Utilities
Background colors:
.bg-primary,.bg-success,.bg-danger, etc.Borders:
.border,.border-top,.border-end,.border-0(remove borders)Border colors:
.border-primary,.border-success, etc.Rounded corners:
.rounded,.rounded-circle,.rounded-pill,.rounded-0
Summary
Bootstrap utilities let you quickly style components without writing custom CSS, speeding up development and keeping code clean.
If you want a deep dive on any particular utility or examples combining utilities, just let me know!
