Offset

This helper helps to specify the offset of the element to the left, right, down or up.

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>