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/[email protected]/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/[email protected]/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
Similar Reads
Bootstrap Spacing Margin and padding Bootstrap Spacing Margin and Padding refer to predefined utility classes provided by Bootstrap for managing the spacing around elements. Margin classes control the space outside the element's border, while padding classes control the space inside the border. These classes help in easily adding consi
2 min read
Bootstrap 5 Spacing Gap The spacing utility is used to assign responsive-friendly margin or padding values to an element or a subgroup of its sides. When the display is set to grid, you can use gap utilities on the parent grid container. With responsive gap utilities, you don’t have to add margin utilities to individual gr
2 min read
Bootstrap 5 Spinners Margin Bootstrap 5 Spinners Margin is used to create spinners in different margins. For margin spinners, we will use .m class with five different sizes from 0 to 5. Also, auto is used for margin auto. For different sides of the margin, we will use t (for top), b (for bottom), s (for start), e (for end), x
2 min read
Bootstrap 5 Spacing The spacing utility is used to assign responsive-friendly margin or padding values to an element or a subgroup of its sides. Padding is the area inside of any div or container, as opposed to a margin, which is the area outside of it. Margin and Padding can be added by adding Bootstrap classes in an
3 min read
Bootstrap 5 Spacing Horizontal centering Bootstrap 5 Spacing Horizontal centering is used to balance out the margin on both sides by using the mx-auto class and setting the width of the element. Bootstrap provides us with shorthand margin and padding helpers which are also responsive and they help us to easily design the appearance of our
2 min read
BootStrap 5 Utilities Margin and Padding In Bootstrap 5, the margin and padding utilities are used to add space around elements. The margin utilities are used to add space outside of an element, while the padding utilities are used to add space inside of an element. Bootstrap 5 Utilities Margin and padding Classes: There are no different c
2 min read