Gutters

Learn how to modify columns with a handful of options for alignment, ordering, and offsetting thanks to our flexbox grid system.

¶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-8 py-8">
    <div class="row gx-8">
        <div class="col">Custom column padding</div>
        <div class="col">Custom column padding</div>
    </div>
</div>

¶Vertical gutters

.gy-* classes can be used to control the vertical gutter widths. 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 py-8">
    <div class="row gy-8">
        <div class="col-6">Custom column padding</div>
        <div class="col-6">Custom column padding</div>
        <div class="col-6">Custom column padding</div>
        <div class="col-6">Custom column padding</div>
    </div>
</div>

¶Horizontal & vertical gutters

.g-* classes can be used to control the horizontal gutter widths, for the following example we use a smaller gutter width, so there won't be a need to add the .overflow-hidden wrapper class.

<div class="container p-8">
    <div class="row g-8">
        <div class="col-6">Custom column padding</div>
        <div class="col-6">Custom column padding</div>
        <div class="col-6">Custom column padding</div>
        <div class="col-6">Custom column padding</div>
    </div>
</div>

¶No gutters

The gutters between columns in our predefined grid classes can be removed with .g-0. This removes the negative margins from .row and the horizontal padding from all immediate children columns.

Need an edge-to-edge design? Drop the parent .container or .container-fluid.

<div class="row g-0">
    <div class="col-sm-6 col-md-8">.col-sm-6 .col-md-8</div>
    <div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>

¶Responsive

Responsive variations also exist for each gutter value. Use the .g-{breakpoint}-{value} for sm, md, lg, xl, and xxl to any existing gutter utility.

<div class="g-md-10 g-5 ...">
    <!-- ... -->
</div>