Bootstrap 5 Spacing Negative Margin

Last Updated : 9 Dec, 2022

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.

HTML 
<!DOCTYPE html>
<html>

<head>
    <link href=
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" 
          rel="stylesheet"
          integrity=
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" 
          crossorigin="anonymous">
</head>

<body>
    <h1 class="text-success">GeeksforGeeks</h1>
    <h2>Bootstrap 5 Spacing Negative Margin</h2>
    <div class="bg-success w-50 p-5 row m-5 mx-md-n5">
        <p class="text-light">With Negative Margin:</p>
        <div class="bg-warning w-25 p-5 col px-md-5"></div>
        <div class="bg-warning w-25 p-5"></div>
    </div>
    <div class="bg-success w-50 p-5 row m-5 mx-md-5">
        <p class="text-light">Without Negative Margin:</p>
        <div class="bg-warning w-25 p-5"></div>
    </div>
</body>

</html>

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.

 

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

HTML 
<!DOCTYPE html>
<html>

<head>
    <link href=
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" 
          rel="stylesheet"
          integrity=
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" 
          crossorigin="anonymous">
</head>

<body>
    <h1 class="text-success">GeeksforGeeks</h1>
    <h2>Bootstrap 5 Spacing Negative Margin</h2>
    <div class="row mx-md-n5 bg-success p-3">
        <div class="col px-md-5">
            <div class="p-3 bg-info">
                Padding increased
            </div>
        </div>
        <div class="col px-md-5">
            <div class="p-3 bg-info">
                Padding increased
            </div>
        </div>
    </div>
</body>
</html>

Output:

 

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

Comment

Explore