From b0b28c81e50bedff322b12c13707c97982b4d455 Mon Sep 17 00:00:00 2001
From: Mark Otto <markdotto@gmail.com>
Date: Sun, 8 Jul 2018 18:18:13 -0700
Subject: [PATCH] add grid docs mention

---
 docs/4.1/layout/grid.md | 14 ++++++++++++++
 1 file changed, 14 insertions(+)

diff --git a/docs/4.1/layout/grid.md b/docs/4.1/layout/grid.md
index 5d341b68a1..9527abbc17 100644
--- a/docs/4.1/layout/grid.md
+++ b/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.
-- 
2.47.2