Bootstrap 5 Gutter Width And Columns Space

Uncategorized / Leave a Comment

Bootstrap 5 gutter width and space between columns are provided by default. But here I give you an example of changing the width or spacing of the Bootstrap grid columns and rows with Bootstrap classes. If you want to increase or decrease the gap between columns.

Note: If you want to increase the gutter space horizontally of columns, we need to add a .gx-5 class with a .row class.

Note: If you want to none the gutter space horizontally of columns, so we need to add a .gx-0 class with a .row class.

HTML

<!-- Default Gutter Space -->
<div class="row">
    <div class="col">
        <h3 class="border bg-light p-2">Default Gutter Space</h3>
    </div>
    <div class="col">
        <h3 class="border bg-light p-2">Default Gutter Space</h3>
    </div>
</div>


<!-- Increase Gutter Space -->
<div class="row gx-5">
    <div class="col">
        <h3 class="border bg-light p-2">Increase Gutter Space</h3>
    </div>
    <div class="col">
        <h3 class="border bg-light p-2">Increase Gutter Space</h3>
    </div>
</div>


<!-- Gutter Space None -->
<div class="row gx-0">
    <div class="col">
        <h3 class="border bg-light p-2">Gutter Space None</h3>
    </div>
    <div class="col">
        <h3 class="border bg-light p-2">Gutter Space None</h3>
    </div>
</div>

<!-- Bootstrap JS -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>

Must Read