Gutters are the padding between your columns, used to responsively space and align content in the grid system.

How it Works

• Gutters are the gaps between column content, created by horizontal padding.
• By adding the class .g to a .row a row becomes flexbox enabled and can use the gutter utility classes. The .g class is then paired with either .g-* to control gutters in all directions, .gx-* to control horizontal gutters, and .gy-* to control vertical gutters.
• Gutters can be responsively adjusted. Use breakpoint-specific gutter classes to modify horizontal gutters, vertical gutters, and all gutters.

Horizontal Gutters

.gx-* classes can be used to control the horizontal gutter widths. The .container or .container-fluid parent may need to be adjusted if larger gutters are used too to avoid unwanted overflow, using a matching padding utility. For example, in the following example we’ve increased the padding with .px-4:

<div class="container px-4 text-center">
    <div class="row g gx-5">
        <div class="col">
            <div class="p-3 bg-gray-200">Custom column padding</div>
        </div>
        <div class="col">
            <div class="p-3 bg-gray-200">Custom column padding</div>
        </div>
    </div>
</div>

An alternative solution is to add a wrapper around the .row with the .overflow-hidden class:

        <div class="container overflow-hidden text-center">
            <div class="row g gx-5">
                <div class="col">
                    <div class="p-3 bg-gray-200">Custom column padding</div>
                </div>
                <div class="col">
                    <div class="p-3 bg-gray-200">Custom column padding</div>
                </div>
            </div>
        </div>
        

Vertical Gutters

.gy-* classes can be used to control the vertical gutter widths within a row when columns wrap to new lines. Like the horizontal gutters, the vertical gutters can cause some overflow below the .row at the end of a page. If this occurs, you add a wrapper around .row with the .overflow-hidden class:

<div class="container overflow-hidden text-center">
    <div class="row g gy-5">
        <div class="col-xs-6">
            <div class="p-3 bg-gray-200">Custom column padding</div>
        </div>
        <div class="col-xs-6">
            <div class="p-3 bg-gray-200">Custom column padding</div>
        </div>
        <div class="col-xs-6">
            <div class="p-3 bg-gray-200">Custom column padding</div>
        </div>
        <div class="col-xs-6">
            <div class="p-3 bg-gray-200">Custom column padding</div>
        </div>
    </div>
</div>

Responsive Classes

Page Sections

Page sections are large, padded sections that are added to a section of content with a shared background.

<!-- Page Section -->
<div class="page-section"></div>

<!-- Page Section: Centered. Matches Homepage behavior -->
<div class="page-section-centered"></div>

Block Spacing Classes

Use the following classes to add additional spacing to blocks on a page by using the block "Advanced Settings" section and CSS Class input.