Gutters

Preview

This is a preview of the Bootstrap element. For more details, please visit the official Bootstrap page.

How they work

Gutters are the gaps between column content, created by horizontal or vertical padding. The gutters can be responsively adjusted.

The classes are named using the format:

g-{direction}-{breakpoint}-{size}

g-{x|y}-{sm|md|lg|xl|xxl}-{0|1|2|3|4|5|6}

The sizes are using the basic spacing convention.

Examples

Column

<div class="row gx-3">
    <div class="col">
        <div class="border bg-light p-3">Column</div>
    </div>
    <div class="col">
        <div class="border bg-light p-3">Column</div>
    </div>
    <div class="col">
        <div class="border bg-light p-3">Column</div>
    </div>
</div>

Column

<div class="row g-1">
    <div class="col-6">
        <div class="border bg-light p-3">Column</div>
    </div>
    <div class="col-6">
        <div class="border bg-light p-3">Column</div>
    </div>
    <div class="col-6">
        <div class="border bg-light p-3">Column</div>
    </div>
    <div class="col-6">
        <div class="border bg-light p-3">Column</div>
    </div>
</div>

Column

<div class="row gy-0 gy-md-2">
    <div class="col-12">
        <div class="border bg-light p-3">Column</div>
    </div>
    <div class="col-12">
        <div class="border bg-light p-3">Column</div>
    </div>
</div>