How can I make a button take the full width only on md screens?

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

Post this Question & Answer:

How can I make a button take the full width only on md screens?

Asked on Aug 31, 2025

Answer

To make a button take the full width only on medium (md) screens, you can use Bootstrap's responsive grid system. Specifically, use the `col-md-12` class to achieve this effect.

<!-- BEGIN COPY / PASTE -->
        <div class="container">
            <div class="row">
                <div class="col-md-12">
                    <button class="btn btn-primary w-100">Full Width on md</button>
                </div>
            </div>
        </div>
        <!-- END COPY / PASTE -->

Additional Comment:

The `w-100` class ensures the button takes the full width of its container.
The `col-md-12` class makes the button container full-width only on medium screens and above.
On smaller screens, the button will not take the full width unless additional classes are applied.

✅ Answered with Bootstrap 5 best practices.

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

How can I make a button take the full width only on md screens?

Asked on Aug 31, 2025

Answer

The Q&A Network