🎨 Classes Reference
Complete list of utility classes in Melt CSS
Layout
| Class | Description |
|---|---|
container |
Max-width container (1200px) |
container-sm |
Small container (768px) |
container-lg |
Large container (1400px) |
container-fluid |
Full width container |
flex |
Flexbox container |
flex-col |
Flex column direction |
flex-wrap |
Flex wrap |
grid |
Grid container |
grid-2/3/4 |
Grid with 2/3/4 columns |
gap-0 to gap-4 |
Gap spacing (0, 0.5rem, 1rem, 1.5rem, 2rem) |
Width/Height
| Class | Description |
|---|---|
w-25/50/75/100 |
Width percentage |
h-100 |
Height 100% |
vw-100/vh-100 |
Viewport width/height |
Position
| Class | Description |
|---|---|
position-relative/absolute/fixed/sticky |
Position utilities |
top/bottom/left/right-0 |
Position offset |
z-1/10/50/100 |
Z-index |
Spacing (Margin)
| Class | Description |
|---|---|
m-0 to m-5 |
All sides margin (0, 0.5rem, 1rem, 1.5rem, 2rem, 3rem) |
mt/mb/ml/mr-1 to 5 |
Top/Bottom/Left/Right margin |
mx-1 to mx-4 |
Horizontal margin (left + right) |
my-1 to my-4 |
Vertical margin (top + bottom) |
Spacing (Padding)
| Class | Description |
|---|---|
p-0 to p-5 |
All sides padding |
pt/pb/pl/pr-1 to 4 |
Top/Bottom/Left/Right padding |
px-1 to px-4 |
Horizontal padding |
py-1 to py-4 |
Vertical padding |
Display
| Class | Description |
|---|---|
d-block/inline/flex/grid/none |
Display utilities |
hidden |
Display none !important |
hide-sm/md/lg/xl |
Hide on breakpoints |
d-sm/md/lg/xl-none/block/flex |
Responsive display |
Flexbox
| Class | Description |
|---|---|
items-center/start/end |
Align items |
justify-center/between/around/end |
Justify content |
Text
| Class | Description |
|---|---|
text-center/left/right |
Text alignment |
text-primary/success/danger/warning/info |
Text colors |
text-muted/light |
Muted text colors |
text-xs/sm/base/lg/xl/2xl/3xl |
Font sizes |
font-bold/semibold/normal/light |
Font weights |
uppercase/lowercase/capitalize |
Text transform |
truncate |
Text ellipsis |
line-clamp-2/3 |
Line clamping |
Background
| Class | Description |
|---|---|
bg-primary/secondary/success/danger/surface |
Background colors |
Opacity
| Class | Description |
|---|---|
opacity-50/75/100 |
Opacity levels |
Overflow
| Class | Description |
|---|---|
overflow-hidden/auto/scroll |
Overflow control |
Cursor
| Class | Description |
|---|---|
cursor-pointer/default/not-allowed |
Cursor styles |
Misc
| Class | Description |
|---|---|
user-select-none |
Disable text selection |
pointer-events-none |
Disable pointer events |
transition-all/none |
Transition control |
rotate-90/180/270 |
Rotation transforms |
Buttons
| Class | Description |
|---|---|
btn |
Primary button |
btn-sm/lg/xl |
Button sizes |
btn-secondary/success/danger/warning/info |
Button variants |
btn-outline |
Outline button |
Forms
| Class | Description |
|---|---|
form-item |
Input/select/textarea |
form-item-sm/lg/xl |
Form item sizes |
form-group |
Form field wrapper |
form-label |
Form label |
Cards
| Class | Description |
|---|---|
card |
Card container |
card-header/body/footer |
Card sections |
Alerts
| Class | Description |
|---|---|
alert |
Alert container |
alert-success/danger/warning/info |
Alert variants |
Borders
| Class | Description |
|---|---|
border |
1px solid border |
border-0/2 |
Border width |
border-t/b/l/r |
Border sides |
border-x/y |
Border horizontal/vertical |
border-primary/success/danger |
Border colors |
Border Radius
| Class | Description |
|---|---|
rounded-0 to rounded-4 |
Border radius sizes |
rounded-full |
Full rounded (circle) |
rounded-top/bottom-1/2/3 |
Top/Bottom corners |
rounded-tl/tr/bl/br-1/2/3 |
Individual corners |
rounded-x-1/2 |
All corners same radius |
Shadows
| Class | Description |
|---|---|
shadow-sm/shadow/shadow-lg/shadow-xl |
Shadow sizes |
shadow-none |
Remove shadow |
Filters
| Class | Description |
|---|---|
f-grayscale/blur/brightness |
Filter effects |
hv-f-grayscale/blur |
Hover filter effects |
Transform
| Class | Description |
|---|---|
scale-90/95/105/110 |
Scale transforms |
hv-scale/hv-scale-lg |
Hover scale |
hv-opacity |
Hover opacity (0.8) |
Hover Effects
| Class | Description |
|---|---|
hover-lift |
Lift on hover |
hover-bg |
Background on hover |
Tables
| Class | Description |
|---|---|
table-sm/lg |
Table sizes |
table-bordered |
Add borders |
table-borderless |
Remove borders |
table-striped |
Striped rows |
Glass Effect
| Class | Description |
|---|---|
glass |
Glassmorphism effect |