General
| Class |
Effect |
container |
sets viewport allowed maximum width |
centered |
sets the left and right margin to auto. |
visually-hidden |
Hide element while making it readable for screen readers |
mutted |
Hide element while making it readable for screen readers |
clearfix |
Applies standard clearfix to escape floating. |
dn |
sets display to none |
db |
sets display to block |
dib |
sets display to inline-block |
If you want to use some flexbox or grid classes, please refers to these pages:
Container height and width
| Class |
Effect |
maxh40vh |
max-height: 40vh !important; |
maxh50vh |
max-height: 50vh !important; |
maxh60vh |
max-height: 60vh !important; |
maxh70vh |
max-height: 70vh !important; |
maxh80vh |
max-height: 80vh !important; |
maxw5rem |
max-width: 5rem !important; |
maxw20rem |
max-width: 20rem !important; |
maxw30rem |
max-width: 30rem !important; |
maxw40rem |
max-width: 40rem !important; |
maxw60rem |
max-width: 50rem !important; |
maxw60rem |
max-width: 60rem !important; |
maxw50perc |
max-width: 50%; |
Overflow
The overflow utilities are used to enable or disable scrolling in the container. To work properly, the container needs to have some specific height or width.
| Class |
Effect |
ov-y-hidden |
overflow-y: hidden !important; |
ov-x-hidden |
overflow-x: hidden !important; |
ov-y-auto |
overflow-y: auto !important; |
ov-x-auto |
overflow-x: auto !important; |
