This question explores Bootstrap and addresses practical considerations related to: How can I customize the default spacing between Bootstrap grid columns?

To customize the default spacing between Bootstrap grid columns, you can adjust the gutter width using Bootstrap's CSS variables. This allows you to set a custom spacing that applies throughout your grid layout. :root { --bs-gutter-x: 2rem; /* Adjust the horizontal gutter width */ --bs-gutter-y: 1.5rem; /* Adjust the vertical gutter width */ } Column 1 Column 2 ADDITIONAL COMMENT: - The `--bs-gutter-x` variable controls the horizontal spacing between columns. - The `--bs-gutter-y` variable controls the vertical spacing between rows. - You can set these variables globally or within specific containers to target certain parts of your layout. - The example above sets the horizontal gutter to `2rem` and the vertical gutter to `1.5rem`. ✅

How can I customize the default spacing between Bootstrap grid columns?

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

Post this Question & Answer:

How can I customize the default spacing between Bootstrap grid columns?

Asked on Mar 08, 2026

Answer

Previous Question Next Question

To customize the default spacing between Bootstrap grid columns, you can adjust the gutter width using Bootstrap's CSS variables. This allows you to set a custom spacing that applies throughout your grid layout.

<!-- BEGIN COPY / PASTE -->
        <style>
            :root {
                --bs-gutter-x: 2rem; /* Adjust the horizontal gutter width */
                --bs-gutter-y: 1.5rem; /* Adjust the vertical gutter width */
            }
        </style>

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

Additional Comment:

The `--bs-gutter-x` variable controls the horizontal spacing between columns.
The `--bs-gutter-y` variable controls the vertical spacing between rows.
You can set these variables globally or within specific containers to target certain parts of your layout.
The example above sets the horizontal gutter to `2rem` and the vertical gutter to `1.5rem`.

✅ Answered with Bootstrap 5 best practices.

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

How can I customize the default spacing between Bootstrap grid columns?

Asked on Mar 08, 2026

Answer

Real Questions. Clear Answers.