Vertical alignment
Adjust the vertical alignment of elements with options
| Values | Shortcuts |
|---|---|
auto |
.va-auto |
baseline |
.va-baseline |
bottom |
.va-bottom |
inherit |
.va-inherit |
middle |
.va-middle |
sub |
.va-sub |
super |
.va-super |
top |
.va-top |
text-bottom |
.va-txt-bottom |
text-top |
.va-txt-top |
Inline display
Inline display options
| Values | Shortcuts |
|---|---|
inline |
.inline |
inline-block |
.inline-block |
inline-table |
.inline-table |
inline-flex |
.inline-flex |
Viewport Height and Width
Set elements to full viewport height or width
| Property: values | Shortcuts |
|---|---|
min-height: 100vh |
.vh-100 |
min-width: 100vw |
.vw-100 |
Width
| Property: values | Shortcuts |
|---|---|
width: auto |
.w-auto |
width: 25% |
.w-25 |
width: 50% |
.w-50 |
width: 75% |
.w-75 |
width: 100% |
.w-100 |
min-width: 25% |
.min-w-25 |
min-width: 50% |
.min-w-50 |
min-width: 75% |
.min-w-75 |
min-width: 100% |
.min-w-100 |
Height
| Property: values | Shortcuts |
|---|---|
height: auto |
.h-auto |
height: 25% |
.h-25 |
height: 50% |
.h-50 |
height: 75% |
.h-75 |
height: 100% |
.h-100 |
max-height: 25% |
.max-h-25 |
max-height: 50% |
.max-h-50 |
max-height: 75% |
.max-h-75 |
max-height: 100% |
.max-h-100 |
Overflow and Wrapping
| Property: values | Shortcuts |
|---|---|
white-space: nowrap |
.nowrap |
overflow-x: auto |
.overflow-x |
overflow-y: auto |
.overflow-y |
Opacity
| Property: values | Shortcuts |
|---|---|
opacity: 25% |
.opacity-25 |
opacity: 50% |
.opacity-50 |
opacity: 75% |
.opacity-75 |
Rotate
| Property: values | Shortcuts |
|---|---|
rotate: 0° |
.rotate-n |
rotate: 90° |
.rotate-e |
rotate: 180° |
.rotate-s |
rotate: 270° |
.rotate-w |
rotate: 45° |
.rotate-ne |
rotate: 135° |
.rotate-se |
rotate: 225° |
.rotate-sw |
rotate: 315° |
.rotate-nw |
Cursor styles
| Property: values | Shortcuts |
|---|---|
cursor: default |
.cur-default |
cursor: not-allowed |
.cur-disabled |
cursor: grab |
.cur-grab |
cursor: help |
.cur-help |
cursor: move |
.cur-move |
cursor: pointer |
.cur-pointer |
cursor: progress |
.cur-progress |
cursor: wait |
.cur-wait |
Scaling
| Property: values | Shortcuts |
|---|---|
transform: scale(0.9) |
.scale-1 |
transform: scale(0.8) |
.scale-2 |
transform: scale(0.75) |
.scale-3 |
transform-origin: left |
.scale-start |
transform-origin: center |
.scale-center |
transform-origin: right |
.scale-end |
Display
| Values | Shortcuts |
|---|---|
none |
.hide |
grid |
.grid |
block |
.block |
inherit |
.inherit |
opacity: .5 |
.disabled |
Floating
| Property: values | Shortcuts |
|---|---|
clear: both |
.float-clear |
float: left |
.float-left |
float: right |
.float-right |
float: none |
.float-none |