# Utils
The utils section of Cirrus is designed to provide helpers to make minor modifications to elements without having to redefine properties multiple times.
Layout |
this-inline
|
Makes the container or element display inline like a span . |
---|---|---|
this-inline-block
|
The container is rendered as an inline element while its children are formatted as block-level boxes. | |
this-block
|
The container is rendered as a block element. | |
this-inline-flex
|
Displays an element as an inline-level flex container. | |
this-overlay
|
Displays element absolutely overlaying other elements. | |
Floats |
clear-left
|
When using floats with other elements,moves element such that it is not overlapping an element with float-left .
|
clear-right
|
When using floats with other elements,moves element such that it is not overlapping an element with float-right .
|
|
clear-both
|
When using floats with other elements,moves element such that it is not overlapping any element with floats left or right. | |
pull-left
|
Makes an element float left. | |
pull-right
|
Makes an element float right. | |
Centering |
center
|
Centers an element using flexbox with automatic margin on the sides. |
center-alt
|
Backwards compatible version of the center class that centers the element absolutely relative to the other elements. | |
vertical-center
|
Centering elements vertically using flexbox. | |
horizontal-center
|
Aligns elements in the center horizontally using flexbox. | |
Text |
text-center
|
Aligns text in the center. |
text-left
|
Aligns text in the left | |
text-right
|
Aligns text in the right. | |
Size |
box
|
A box style for any div with a box shadow and 1 rem padding. |
fill-width
|
Makes element width 100% of the parent container's width. | |
Shapes |
round
|
Rounds the corner of the element. |
circle
|
Turns the element into a circle. | |
Misc |
no-margin
|
Removes margin from element. |
no-padding
|
Removes padding from element. |