What’s the pattern for equal-width, automatically wrapping button groups?

Asked on Jun 11, 2025

1 Answer

In Bootstrap 5, you can create equal-width, automatically wrapping button groups using the grid system and utility classes. This allows buttons to adjust their size and wrap as needed.

<!-- BEGIN COPY / PASTE -->
        <div class="d-grid gap-2 d-md-flex justify-content-md-start">
            <button type="button" class="btn btn-primary">Button 1</button>
            <button type="button" class="btn btn-primary">Button 2</button>
            <button type="button" class="btn btn-primary">Button 3</button>
            <button type="button" class="btn btn-primary">Button 4</button>
        </div>
        <!-- END COPY / PASTE -->

Additional Comment:

The `d-grid` class creates a grid container for the buttons.
`gap-2` adds space between the buttons.
`d-md-flex` and `justify-content-md-start` ensure the buttons align properly on medium and larger screens.
The buttons will automatically wrap to the next line if the container width is insufficient.

✅ Answered with Bootstrap 5 best practices.

← Back to All Questions