How do I offset a column only at md and larger?

Asked on Jun 09, 2025

1 Answer

To offset a column only at the `md` breakpoint and larger in Bootstrap 5, you can use the `offset-md-*` class. Here's a simple example demonstrating how to offset a column by 2 units starting from the `md` breakpoint.

<!-- BEGIN COPY / PASTE -->
        <div class="container">
            <div class="row">
                <div class="col-md-6 offset-md-2">
                    This column is offset by 2 columns on md and larger screens.
                </div>
            </div>
        </div>
        <!-- END COPY / PASTE -->

Additional Comment:

The `offset-md-2` class is used to apply the offset starting at the `md` breakpoint.
The column will not be offset on smaller screens (below `md`).
You can adjust the number in `offset-md-*` to change the offset size (e.g., `offset-md-3` for a 3-column offset).

✅ Answered with Bootstrap 5 best practices.

← Back to All Questions