Bootstrap 5 Spacing Negative Margin

Last Updated : 09 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>