Utility classes for controlling width, height, spacing, and layout dimensions
Width Utilities
Fixed and responsive width classes using rem-based scale
| Class | Width | Use Case |
|---|---|---|
.wr-1
| 1rem | Tiny elements |
.wr-2
| 2rem | Small icons |
.wr-3
| 3rem | Buttons |
.wr-4
| 4rem | Small inputs |
.wr-5
| 5rem | Compact fields |
.wr-6
| 6rem | Labels |
.wr-8
| 8rem | Short inputs |
.wr-10
| 10rem | Medium inputs |
.wr-15
| 15rem | Standard inputs |
.wr-20
| 20rem | Panels |
.wr-25
| 25rem | Cards |
.wr-30
| 30rem | Wide cards |
.wr-35
| 35rem | Sidebars |
.wr-40
| 40rem | Content areas |
.wr-45
| 45rem | Wide content |
.wr-50
| 50rem | Extra wide |
Max-Width Utilities
Constrain maximum width with truncation support
| Class | Max Width | Demo |
|---|---|---|
.maxwr-5
| 5rem | This text will be truncated when it exceeds the max width |
.maxwr-8
| 8rem | This text will be truncated when it exceeds the max width |
.maxwr-10
| 10rem | This text will be truncated when it exceeds the max width |
.maxwr-15
| 15rem | This text will be truncated when it exceeds the max width |
.maxwr-20
| 20rem | This text will be truncated when it exceeds the max width |
.maxwr-25
| 25rem | This text will be truncated when it exceeds the max width |
.maxwr-30
| 30rem | This text will be truncated when it exceeds the max width |
Spacing Utilities
Margin and padding classes based on spacing scale
Spacing Scale
| Name | Value |
|---|---|
xs
| 0.4rem (4px) |
sm
| 0.8rem (8px) |
base
| 1.6rem (16px) |
md
| 1.6rem (16px) |
lg
| 2.4rem (24px) |
xl
| 3.2rem (32px) |
2xl
| 4.8rem (48px) |
Class Pattern
m-{size}- Margin all sidesmt-{size}- Margin topmb-{size}- Margin bottomml-{size}- Margin leftmr-{size}- Margin rightmx-{size}- Margin horizontalmy-{size}- Margin verticalp-{size}- Padding all sidespt-{size},pb-{size}, etc.m-0- Reset marginp-0- Reset padding
Gap Utilities
Control spacing between flex/grid children
| Class | Gap Size |
|---|---|
.gap-xs
| 0.4rem |
.gap-sm
| 0.8rem |
.gap-base
| 1.6rem |
.gap-lg
| 2.4rem |
.gap-xl
| 3.2rem |
Display Utilities
Common display and flex utilities
Display
d-none- Hiddend-block- Blockd-inline- Inlined-inline-block- Inline blockd-flex- Flex containerd-inline-flex- Inline flexd-grid- Grid container
Flex
flex-row/flex-columnflex-wrap/flex-nowrapjustify-content-start/center/end/betweenalign-items-start/center/endalign-self-start/center/endflex-grow-1/flex-shrink-0
Text Utilities
Typography and text alignment helpers
Alignment
text-start- Start-aligned (RTL-aware)text-center- Centeredtext-end- End-aligned (RTL-aware)
Wrapping
text-truncate- Ellipsis overflowtext-nowrap- No wrappingtext-break- Break long words
Font Size
font-xs- 1remfont-sm- 1.2remfont-base- 1.4remfont-lg- 1.8remfont-xl- 2.4remfont-2xl- 3.2rem
Font Weight
font-light- 300font-normal- 400font-medium- 500font-semibold- 600font-bold- 700