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.
<!DOCTYPE html> <html>
<head>
<link href=
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.
<!DOCTYPE html> <html>
<head>
<link href=
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