How do I use gap utilities with flexbox and grid effectively?

Asked on Sep 13, 2025

1 Answer

Bootstrap 5 provides gap utilities to easily manage spacing between items in flexbox and grid layouts. These utilities help you control the space between elements without needing additional CSS.

<!-- BEGIN COPY / PASTE -->
        <div class="d-flex gap-3">
            <div class="p-2 bg-primary text-white">Flex Item 1</div>
            <div class="p-2 bg-secondary text-white">Flex Item 2</div>
            <div class="p-2 bg-success text-white">Flex Item 3</div>
        </div>

        <div class="row gap-2 mt-4">
            <div class="col bg-warning text-dark">Grid Item 1</div>
            <div class="col bg-info text-dark">Grid Item 2</div>
            <div class="col bg-light text-dark">Grid Item 3</div>
        </div>
        <!-- END COPY / PASTE -->

Additional Comment:

The `d-flex` class is used to create a flex container, and `gap-3` sets a consistent gap between flex items.
The `row` class is used for grid layout, and `gap-2` sets a gap between grid columns.
You can adjust the gap size using Bootstrap's spacing scale (e.g., `gap-1`, `gap-2`, `gap-3`, etc.).
These utilities simplify spacing management and improve layout consistency.

✅ Answered with Bootstrap 5 best practices.

← Back to All Questions