How do I stack two buttons vertically on xs but inline from sm and up?

Asked on Sep 11, 2025

1 Answer

To stack two buttons vertically on extra small (xs) screens and display them inline from small (sm) screens and up, you can use Bootstrap's responsive utility classes. Here's a simple example using Bootstrap 5.

<!-- BEGIN COPY / PASTE -->
        <div class="d-grid gap-2 d-sm-flex">
            <button type="button" class="btn btn-primary">Button 1</button>
            <button type="button" class="btn btn-secondary">Button 2</button>
        </div>
        <!-- END COPY / PASTE -->

Additional Comment:

The `d-grid` class makes the buttons stack vertically on xs screens.
The `gap-2` class adds space between the buttons when stacked.
The `d-sm-flex` class changes the layout to inline (flex) from sm screens and up.
You can replace `btn-primary` and `btn-secondary` with any other button styles as needed.

✅ Answered with Bootstrap 5 best practices.

← Back to All Questions