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

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

Post this Question & Answer:

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

Asked on May 22, 2025

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.

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

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

Asked on May 22, 2025

Answer

The Q&A Network