Horizontal gutters (.gx-*) are classes the can be used to control horizontal padding, or gutter width. For instance, in the example below, we-ve used .px-5 to add padding while in the second one, we've used .gx-5 to add gutters.

    <div class="container text-center">
        <div class="row px-5">
            <div class="col">
                <div class="bg p-3">
                    Custom padding width
                </div>
            </div>
            <div class="col">
                <div class="bg p-3">
                    Custom padding width
                </div>
            </div>
        </div>
    </div>

    <div class="container text-center">
        <div class="row px-5">
            <div class="col">
                <div class="bg p-3">
                    Custom gutter width
                </div>
            </div>
            <div class="col">
                <div class="bg p-3">
                    Custom gutter width
                </div>
            </div>
        </div>
    </div>

Vertical gutters (.gy-*) are classes the can be used to control vertical padding, or gutter width. For instance, in the example below, we-ve used .py-5 to add padding while in the second one, we've used .gy-5 to add gutters.

    <div class="container text-center">
        <div class="row py-5">
            <div class="col-6">
                <div class="bg p-3">
                    Custom padding width
                </div>
            </div>
            <div class="col-6">
                <div class="bg p-3">
                    Custom padding width
                </div>
            </div>
            <div class="col-6">
                <div class="bg p-3">
                    Custom padding width
                </div>
            </div>
            <div class="col-6">
                <div class="bg p-3">
                    Custom padding width
                </div>
            </div>
        </div>
    </div>

    <div class="container text-center">
        <div class="row gy-5">
            <div class="col-6">
                <div class="bg p-3">
                    Custom gutter width
                </div>
            </div>
            <div class="col-6">
                <div class="bg p-3">
                    Custom gutter width
                </div>
            </div>
            <div class="col-6">
                <div class="bg p-3">
                    Custom gutter width
                </div>
            </div>
            <div class="col-6">
                <div class="bg p-3">
                    Custom gutter width
                </div>
            </div>
        </div>
    </div>

Horizontal and verticall gutters (.g-*) are classes the can be used to control both horizontal and vertical padding simultaneously.

    <div class="container text-center">
        <div class="row g-2">
            <div class="col-6">
                <div class="bg p-3">
                    Custom gutter width
                </div>
            </div>
            <div class="col-6">
                <div class="bg p-3">
                    Custom gutter width
                </div>
            </div>
            <div class="col-6">
                <div class="bg p-3">
                    Custom gutter width
                </div>
            </div>
            <div class="col-6">
                <div class="bg p-3">
                    Custom gutter width
                </div>
            </div>
        </div>
    </div>

The gutters also come in with responsive variations for all breakpoints. These are used to adjust the gutter width differently from one viewport size to another (or from one device type to another).

    <div class="container text-center">
        <div class="row row g-2 g-lg-3 g-xxl-4 text-center">
            <div class="col-6">
                <div class="bg p-3">
                    Custom gutter width
                </div>
            </div>
            <div class="col-6">
                <div class="bg p-3">
                    Custom gutter width
                </div>
            </div>
            <div class="col-6">
                <div class="bg p-3">
                    Custom gutter width
                </div>
            </div>
            <div class="col-6">
                <div class="bg p-3">
                    Custom gutter width
                </div>
            </div>
        </div>
    </div>

The gutters can also be removed with .g-0. This removes the negative margins from .row and the horizontal padding from all immediate children columns.

    <div class="row g-0 text-center">
        <div class="col-6">
            <div class="bg p-3">
                Custom gutter width
            </div>
        </div>
        <div class="col-6">
            <div class="bg p-3">
                Custom gutter width
            </div>
        </div>
    </div>