How can I adjust the gutter size between columns in a Bootstrap grid layout?

Ask any question about Bootstrap here... and get an instant response.

Post this Question & Answer:

How can I adjust the gutter size between columns in a Bootstrap grid layout?

Asked on Dec 22, 2025

Answer

In Bootstrap 5, you can adjust the gutter size between columns using the `g-` classes. These classes allow you to control the spacing between columns in a grid layout.

<!-- BEGIN COPY / PASTE -->
        <div class="container">
            <div class="row g-3">
                <div class="col">
                    Column 1
                </div>
                <div class="col">
                    Column 2
                </div>
            </div>
        </div>
        <!-- END COPY / PASTE -->

Additional Comment:

The `g-3` class sets the gutter size to 1.5rem (24px) between columns.
You can adjust the number in `g-3` to any value from 0 to 5, where each step increases the gutter size by 0.25rem (4px).
Use `g-0` for no gutter, `g-1` for 0.25rem, up to `g-5` for 1.5rem.
The gutter classes can be applied to rows to control spacing between columns.

✅ Answered with Bootstrap 5 best practices.

Ask any question about Bootstrap here... and get an instant response.

How can I adjust the gutter size between columns in a Bootstrap grid layout?

Asked on Dec 22, 2025

Answer

The Q&A Network