Bootstrap 5 Spacing Negative Margin

Bootstrap 5 Spacing Negative Margins are used to provide extended negative margins to the top and bottom of an item. With a negative margin, the n-addition is utilized before the specified size.

Bootstrap 5 Spacing Negative Margin Classes:

• m*-n**: This class is used to set the negative margin.

Where, * is representing the sides (t, b, l, r, x, and y). And, ** is representing the size (0, 1, 2, 3, 4, 5, and auto).

Note: The addition of n before the size add the negative margin.

Syntax:

<div class="m*-n**">
 ...
</div>

Example 1: The following code demonstrates the Spacing Negative Margin using the Spacing Negative Margin properties.

Output: In this example, the padding for the inner div is raised with .px-md-5, and the parent div's padding is decreased with .mx-md-n5.

👁 Image

Example 2: The following code demonstrates the Spacing Negative Margin with rows and columns using the Spacing Negative Margin properties.

Output:

👁 Image

Reference: https://getbootstrap.com/docs/4.3/utilities/spacing/#negative-margin