Utility Classes for Pagebuilder

Below is a list of all utility classes. You can use them by adding them to pagebuilder elements by clicking the cog icon and filling out "CSS Classes", be sure to put a space between each class. You won't need to add these yourself unless you're creating a page from scratch, as they have been added to the reusable starter template.

These classes will override any styles from existing classes from the preset templates (e.g classes on landers)

Padding

padding-sm
padding-sm-left
padding-sm-right
padding-sm-bottom
padding-sm-top
padding-md
padding-md-left
padding-md-right
padding-md-bottom
padding-md-top
padding-lg
padding-lg-left
padding-lg-right
padding-lg-bottom
padding-lg-top
padding-xlg
padding-xlg-left
padding-xlg-right
padding-xlg-bottom
padding-xlg-top
padding-0
padding-0-left
padding-0-right
padding-0-bottom
padding-0-top

Margin

margin-sm
margin-sm-left
margin-sm-right
margin-sm-bottom
margin-sm-top
margin-md
margin-md-left
margin-md-right
margin-md-bottom
margin-md-top
margin-lg
margin-lg-left
margin-lg-right
margin-lg-bottom
margin-lg-top
margin-xlg
margin-xlg-left
margin-xlg-right
margin-xlg-bottom
margin-xlg-top
margin-0
margin-0-left
margin-0-right
margin-0-bottom
margin-0-top

Widths and Alignment

width-50 (50% width)
width-75 (75% width)
width-90 (90% width)
width-100 (100% width)
width-50m (50% width on mobile)
width-75m (75% width on mobile)
width-90m (90% width on mobile)
width-100m (100% width on mobile)
center-horizontal (center, used with widths)
align-to-right (right align, used with widths)
align-to-left (left align, used with widths)

Misc

box-shadow (adds a box-shadow)
bordered-title (adds a border/spacing to title)
no-wrap (prevents row from going onto new line)
mobile-hidden (hide on mobile)
desktop-hidden (hide on desktop)
no-background (removes background colours/images)

SM = 10px mobile / 20px desktop

MD = 20px mobile / 30px desktop

LG = 30px mobile / 40px desktop

XLG = 40px mobile / 50px desktop