Layout

Layout Utilities

Use these basic layout utilities to change the default document flow.

Class Description
.inlinedisplay: inline
.blockdisplay: block
.blockdisplay: inline-block
.ohoverflow: hidden
.clearfixClears floated child elements
.leftfloat: left
.rightfloat: right
.fitmax-width: 100%
.full-widthwidth: 100%
.half-widthwidth: 50%

White Space Scale

Use these styles to adjust white space around elements.

Shorthand Syntax

Shorthand Description
mmargin
ppadding
ttop
rright
bbottom
lleft
xx-axis (i.e. left and right)
yy-axis (i.e. top and bottom)
1 – 4White space scale from 1 to 4

Margins

Class Description
.m0margin: 0
.mb0margin-bottom: 0
.m1margin: 1
.mt1margin-top: 1
.mr1margin-right: 1
.mb1margin-bottom: 1
.ml1margin-left: 1
......
.m4margin: 4
.mt4margin-top: 4
.mr4margin-right: 4
.mb4margin-bottom: 4
.ml4margin-left: 4

Padding

Class Description
.p1padding: 1
.px1padding-right: 1; padding-left: 1
.py1padding-top: 1; padding-bottom: 1
.p2padding: 2
.px2padding-right: 2; padding-left: 2
.py2padding-top: 2; padding-bottom: 2
.p3padding: 3
.px3padding-right: 3; padding-left: 3
.py3padding-top: 3; padding-bottom: 3
.p4padding: 4
.px4padding-right: 4; padding-left: 4
.py4padding-top: 4; padding-bottom: 4

Responsive Utilities

Class Description
.mobile-showOnly visibile on mobile
.mobile-hideNot visibile on mobile
.mobile-blockFull width display block on mobile
.mobile-centerCenter aligned on mobile