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

Ask any question about Bootstrap here... and get an instant response.

Post this Question & Answer:

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

Asked on Aug 30, 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.

Ask any question about Bootstrap here... and get an instant response.

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

Asked on Aug 30, 2025

Answer

The Q&A Network