How do I use Bootstrap 5 spacing utilities like m- and p- effectively?

Asked on Jun 01, 2025

1 Answer

Bootstrap 5 provides a set of spacing utilities that allow you to easily add margin and padding to elements using classes like `m-` for margin and `p-` for padding. These classes can be combined with breakpoints and size options to create responsive designs.

<!-- BEGIN COPY / PASTE -->
        <div class="container">
            <div class="row">
                <div class="col-6 p-3 m-2 bg-primary text-white">
                    Padding and Margin Example
                </div>
            </div>
        </div>
        <!-- END COPY / PASTE -->

Additional Comment:

The `p-3` class adds padding on all sides of the element, where `3` is a predefined spacing size.
The `m-2` class adds margin on all sides of the element, where `2` is a smaller predefined spacing size.
You can use `t`, `b`, `s`, `e`, `x`, and `y` with `m-` and `p-` to target specific sides: top, bottom, start, end, horizontal, and vertical, respectively.
Responsive breakpoints can be added, such as `p-md-4`, to change spacing based on screen size.

✅ Answered with Bootstrap 5 best practices.

← Back to All Questions