What’s the difference between g-* gutters and spacing utilities in the grid?

Asked on Jun 08, 2025

1 Answer

In Bootstrap 5, "g-*" classes are used for grid gutters, which control the spacing between columns, while spacing utilities like "m-*" and "p-*" are used for margin and padding adjustments on any element. Here's a simple example to illustrate the difference:

<!-- BEGIN COPY / PASTE -->
        <div class="container">
            <div class="row g-3">
                <div class="col">
                    <div class="p-3 border bg-light">Column 1</div>
                </div>
                <div class="col">
                    <div class="p-3 border bg-light">Column 2</div>
                </div>
            </div>
            <div class="row">
                <div class="col">
                    <div class="p-3 m-3 border bg-light">Column with margin</div>
                </div>
            </div>
        </div>
        <!-- END COPY / PASTE -->

Additional Comment:

The "g-3" class sets the gutter spacing between columns in the grid to a specific size.
The "p-3" class adds padding inside the columns, while "m-3" adds margin outside the columns.
Gutters are specifically for grid column spacing, whereas spacing utilities can be applied to any element for more general spacing control.

✅ Answered with Bootstrap 5 best practices.

← Back to All Questions