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