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.
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" >w3wiki</ 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" >w3wiki</ 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
Contact Us