Offset

Usage #

Specifying offset for an element has two parameters.

offset-{side}-{size}

Where {side} is one of:

• left
• right
• top
• bottom

The {size} in offset is based on the Spacing scale. So using any spacing value you can set the offset for the element to one or more sides relative to the parent element.

<img class="offset-top-5 offset-left-3" src="...">
<img class="offset-bottom-3" src="...">

Use offset-off class to turn off the offset of the element.

<div class="item-with-offset offset-off">...</div>

Responsive #

Use -sm suffix to change offset on small screens or to turn it off.

<div class="offset-left-4 offset-left-2-sm">...</div>
<div class="offset-left-4 offset-off-sm">...</div>
<div class="offset-top-2 offset-top-off-sm">...</div>