How do I remove horizontal gutters but keep vertical spacing between columns?

Asked on Jun 08, 2025

1 Answer

To remove horizontal gutters while keeping vertical spacing between columns in Bootstrap 5, you can use the `g-0` class to eliminate gutters and then add a custom class to maintain vertical spacing.

<!-- BEGIN COPY / PASTE -->
        <div class="container">
            <div class="row g-0">
                <div class="col custom-vertical-spacing">
                    Column 1
                </div>
                <div class="col custom-vertical-spacing">
                    Column 2
                </div>
            </div>
        </div>

        <style>
            .custom-vertical-spacing {
                margin-bottom: 16px; /* Adjust as needed */
            }
        </style>
        <!-- END COPY / PASTE -->

Additional Comment:

Use the `g-0` class on the row to remove all gutters.
Add a custom class (e.g., `custom-vertical-spacing`) to the columns for vertical spacing.
Adjust the `margin-bottom` value in the custom class to control the vertical spacing between columns.

✅ Answered with Bootstrap 5 best practices.

← Back to All Questions