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

Asked on Sep 11, 2025

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.