Centered

Add the centered class to a full-width (not splitted) group or module to center it in the page:

Act2 Template Builder Centered CSS Class

Here is a quick video to demostrate how this works:

In the following figure the modules/groups marked with an x are divided and cannot be used as Centered elements:

HubSpot Design Manager Divided vs Undivided

By default, the centered wrapper has 30px padding left and 30px padding right for good looking screen edges, which is excluded from nested centered wrappers (a centered wrapper inside another) so the padding is not cumulative unless you add some.

Along with the centered class you can also use the helper classes to specify a width for your content (expressed in pixels):

w100
w150
w200
w250
w300
w350
w400
w450
w500
w550
w600
w650
w700
w750
w800
w850
w900
w950
w1000
w1050
w1100
w1150
w1200
w1250
w1300
w1350
w1400
w1450
w1500
w1550
w1600
w1650
w1700
w1750
w1800
w1850
w1900
w1950
w2000

Example:

Act2 Template Builder Centered Width Class

And you can do that also depending on screen size. On medium-sized screens (viewport width lower than 1280px) you can add this prefix: md-. On small-sized screens (viewport width lower than 768px) you can add this prefix: sm-. On very small screens (viewport width lower than 480px) you can add this prefix: xs-

For example:

centered w1600 md-w900 sm-w500 xs-w250

This will make your centered wrapper 1600px wide on large screens, 900px wide on medium sized screens, 500px wide on small screens and 250px wide on extra small screens.