Offsets

Offsets can be used to move content outside of it's container and into another container.

Usage

  • This set of offset classes are not to be confused with Bootstrap column offsets.
  • Simply add an offset class to any container element to make it overlap the previous container.

Offset Top  Code

Add the .offset-top class to any container element to make it overlap the previous container.

example image

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ultricies vitae augue eu efficitur. In in ullamcorper metus. Vestibulum ut iaculis leo, id condimentum est. Donec eget mattis arcu, id sodales tortor. Integer ut mattis erat. Aliquam maximus non elit eu iaculis. Cras sit amet tortor non turpis molestie porttitor a et risus. Nunc feugiat arcu ipsum, vitae lacinia lectus consequat nec.

Vivamus malesuada nisl mauris, et iaculis urna blandit consequat. Mauris eget mattis ipsum. Curabitur faucibus lectus ut lectus luctus, vitae suscipit ipsum malesuada. Pellentesque ut est pellentesque, finibus sem et, luctus lectus. Nullam quis libero dolor.

Offset Left  Code

Add the .offset-left class to a container element to make it overlap to he left.

example image

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ultricies vitae augue eu efficitur. In in ullamcorper metus. Vestibulum ut iaculis leo, id condimentum est. Donec eget mattis arcu, id sodales tortor. Integer ut mattis erat. Aliquam maximus non elit eu iaculis.

Vivamus malesuada nisl mauris, et iaculis urna blandit consequat. Mauris eget mattis ipsum. Curabitur faucibus lectus ut lectus luctus, vitae suscipit ipsum malesuada. Pellentesque ut est pellentesque, finibus sem et, luctus lectus. Nullam quis libero dolor.

Offset Right  Code

Add the .offset-right class to a container element to make it overlap to the right.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ultricies vitae augue eu efficitur. In in ullamcorper metus. Vestibulum ut iaculis leo, id condimentum est. Donec eget mattis arcu, id sodales tortor. Integer ut mattis erat. Aliquam maximus non elit eu iaculis.

Vivamus malesuada nisl mauris, et iaculis urna blandit consequat. Mauris eget mattis ipsum. Curabitur faucibus lectus ut lectus luctus, vitae suscipit ipsum malesuada. Pellentesque ut est pellentesque, finibus sem et, luctus lectus. Nullam quis libero dolor.

example image