Negative margins

docs/4.1/layout/grid.md

@@ -324,6 +324,20 @@ Don't want your columns to simply stack in some grid tiers? Use a combination of
 {% include example.html content=example %}
 </div>
 
+### Gutters
+
+Gutters can be responsively adjusted by breakpoint-specific padding and negative margin utility classes. To change the gutters in a given row, pair a negative margin utility on the `.row` and matching padding utilities on the `.col`s.
+
+Here's an example of customizing the Bootstrap grid at the large (`lg`) breakpoint and above. We've increased the `.col` padding with `.px-lg-5` and then counteracted that with `.mx-lg-n5` on the parent `.row`.
+
+{% capture example %}
+<div class="row mx-lg-n5">
+  <div class="col py-3 px-lg-5 border bg-light">Custom column padding</div>
+  <div class="col py-3 px-lg-5 border bg-light">Custom column padding</div>
+</div>
+{% endcapture %}
+{% include example.html content=example %}
+
 ## Alignment
 
 Use flexbox alignment utilities to vertically and horizontally align columns.

docs/4.1/utilities/spacing.md

@@ -81,3 +81,25 @@ Additionally, Bootstrap also includes an `.mx-auto` class for horizontally cente
   Centered element
 </div>
 {% endhighlight %}
+
+### Negative margin
+
+In CSS, `margin` properties can utilize negative values (`padding` cannot). As of 4.2, we've added negative margin utilities for every non-zero integer size listed above (e.g., `1`, `2`, `3`, `4`, `5`). These utilities are ideal for customizing grid column gutters across breakpoints.
+
+The syntax is nearly the same as the default, positive margin utilities, but with the addition of `n` before the requested size. Here's an example class that's the opposite of `.mt-1`:
+
+{% highlight scss %}
+.mt-n1 {
+  margin-top: -0.25rem !important;
+}
+{% endhighlight %}
+
+Here's an example of customizing the Bootstrap grid at the medium (`md`) breakpoint and above. We've increased the `.col` padding with `.px-md-5` and then counteracted that with `.mx-md-n5` on the parent `.row`.
+
+{% capture example %}
+<div class="row mx-md-n5">
+  <div class="col py-3 px-md-5 border bg-light">Custom column padding</div>
+  <div class="col py-3 px-md-5 border bg-light">Custom column padding</div>
+</div>
+{% endcapture %}
+{% include example.html content=example %}

scss/utilities/_spacing.scss

@@ -8,7 +8,6 @@
 
     @each $prop, $abbrev in (margin: m, padding: p) {
       @each $size, $length in $spacers {
-
         .#{$abbrev}#{$infix}-#{$size} { #{$prop}: $length !important; }
         .#{$abbrev}t#{$infix}-#{$size},
         .#{$abbrev}y#{$infix}-#{$size} {
@@ -29,6 +28,29 @@
       }
     }
 
+    // Negative margins (e.g., where `.mb-n1` is negative version of `.mb-1`)
+    @each $size, $length in $spacers {
+      @if not $size == 0 {
+        .m#{$infix}-n#{$size} { margin: -$length !important; }
+        .mt#{$infix}-n#{$size},
+        .my#{$infix}-n#{$size} {
+          margin-top: -$length !important;
+        }
+        .mr#{$infix}-n#{$size},
+        .mx#{$infix}-n#{$size} {
+          margin-right: -$length !important;
+        }
+        .mb#{$infix}-n#{$size},
+        .my#{$infix}-n#{$size} {
+          margin-bottom: -$length !important;
+        }
+        .ml#{$infix}-n#{$size},
+        .mx#{$infix}-n#{$size} {
+          margin-left: -$length !important;
+        }
+      }
+    }
+
     // Some special margin utils
     .m#{$infix}-auto { margin: auto !important; }
     .mt#{$infix}-auto,