What utility classes can I use to adjust the spacing between Bootstrap grid items?

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

Post this Question & Answer:

What utility classes can I use to adjust the spacing between Bootstrap grid items?

Asked on Oct 31, 2025

Answer

In Bootstrap 5, you can use spacing utility classes to adjust the spacing between grid items. These classes allow you to control the margin and padding of elements easily.

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

Additional Comment:

The `g-3` class is used to add a gap between grid items. You can adjust the number to increase or decrease the spacing (e.g., `g-1`, `g-2`, `g-4`, etc.).
The `p-3` class adds padding inside each grid item. You can change the number to modify the padding size.
These utility classes are part of Bootstrap's responsive design, allowing for easy customization of spacing across different screen sizes.

✅ Answered with Bootstrap 5 best practices.

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

What utility classes can I use to adjust the spacing between Bootstrap grid items?

Asked on Oct 31, 2025

Answer

The Q&A Network