All Uizy CSS classes at a glance. Bookmark this page!
Naming Pattern
Example: ta-c = Text Align Center
Display
| Class | CSS | Description |
|---|
d-none | display: none | Hide element |
d-block | display: block | Block element |
d-inline | display: inline | Inline element |
d-inline-block | display: inline-block | Inline block |
d-flex | display: flex | Flexbox container |
d-inline-flex | display: inline-flex | Inline flex |
d-grid | display: grid | Grid container |
Responsive: d-sm-*, d-md-*, d-lg-*, d-xl-*
Spacing
Scale (multiply by 4px)
| Value | Size |
|---|
0 | 0px |
1 | 4px |
2 | 8px |
3 | 12px |
4 | 16px |
6 | 24px |
8 | 32px |
12 | 48px |
16 | 64px |
Padding
| Class | Description |
|---|
pa-* | All sides |
pt-* | Top |
pb-* | Bottom |
pl-* | Left |
pr-* | Right |
px-* | Left + Right |
py-* | Top + Bottom |
Margin
| Class | Description |
|---|
ma-* | All sides |
mt-* | Top |
mb-* | Bottom |
ml-* | Left |
mr-* | Right |
mx-* | Left + Right |
my-* | Top + Bottom |
mx-auto | Center horizontally |
Gap (Flex/Grid)
| Class | Description |
|---|
gx-* | Column gap |
gy-* | Row gap |
Grid
| Class | Description |
|---|
row | Grid row container |
col-1 to col-12 | Column width (1-12) |
col-sm-* | Small breakpoint |
col-md-* | Medium breakpoint |
col-lg-* | Large breakpoint |
col-xl-* | Extra large breakpoint |
Common widths:
col-6 = 50%col-4 = 33.33%col-3 = 25%
Typography
Text Size
| Class | Description |
|---|
ts-1 | Huge (titles) |
ts-2 | Large (headings) |
ts-3 | Medium-large |
ts-4 | Medium |
ts-5 | Normal (body) |
ts-6 | Small (captions) |
Text Align
| Class | CSS |
|---|
ta-l | text-align: left |
ta-c | text-align: center |
ta-r | text-align: right |
Text Decoration
| Class | Effect |
|---|
td-b | Bold |
td-i | Italic |
td-u | Underline |
td-s | Strikethrough |
Text Transform
| Class | Effect |
|---|
tt-u | UPPERCASE |
tt-l | lowercase |
tt-t | Title Case |
tt-c | Truncate with ... |
Borders
Border Radius
| Class | Description |
|---|
br-0 | Sharp corners |
br-1 | 2px radius |
br-2 | 4px radius |
br-3 | 8px radius |
br-4 | 16px radius |
br-100p | Circle |
br-pill | Pill shape |
Border Width
| Class | Width |
|---|
bw-0 | 0px |
bw-1 | 2px |
bw-2 | 4px |
bw-3 | 8px |
Border Sides
| Class | Side |
|---|
bd-a | All |
bd-t | Top |
bd-b | Bottom |
bd-l | Left |
bd-r | Right |
Border Style
| Class | Style |
|---|
bs-solid | Solid |
bs-dashed | Dashed |
bs-dotted | Dotted |
Box Sizes (square)
| Class | Size | Use Case |
|---|
bx-1 | 36px | Icons |
bx-2 | 48px | Avatar, touch target |
bx-3 | 64px | Thumbnail |
Shadows
| Class | Usage |
|---|
sb-0 | None |
sb-1 to sb-4 | Subtle (buttons) |
sb-5 to sb-8 | Medium (cards) |
sb-9 to sb-16 | Strong (dropdowns) |
sb-17 to sb-24 | Maximum (modals) |
Directions: sb-* (bottom), st-* (top), sl-* (left), sr-* (right)
Flex Alignment
Justify Content (X-axis)
| Class | Alignment |
|---|
dx-fs | Flex-start (left) |
dx-fe | Flex-end (right) |
dx-ce | Center |
dx-sb | Space-between |
dx-sa | Space-around |
dx-se | Space-evenly |
Align Items (Y-axis)
| Class | Alignment |
|---|
dy-fs | Flex-start (top) |
dy-fe | Flex-end (bottom) |
dy-ce | Center |
dy-st | Stretch |
Position
| Class | CSS |
|---|
dp-r | position: relative |
dp-a | position: absolute |
dp-f | position: fixed |
dp-s | position: sticky |
Dimensions
| Class | CSS |
|---|
ew-100p | width: 100% |
ew-100v | width: 100dvw |
eh-100p | height: 100% |
eh-100v | height: 100dvh |
Overflow
| Class | CSS |
|---|
ox-h | overflow-x: hidden |
ox-a | overflow-x: auto |
oy-h | overflow-y: hidden |
oy-a | overflow-y: auto |
Events & Cursor
| Class | Effect |
|---|
e-p | cursor: pointer |
e-ns | Disable text selection |
e-ne | Disable pointer events |
Breakpoints
| Name | Min Width |
|---|
sm | 576px |
md | 768px |
lg | 992px |
xl | 1200px |
xxl | 1400px |
Usage: Add breakpoint after property: d-md-flex, col-lg-6