From: Mark Otto <markdotto@gmail.com>
Date: Mon, 9 Jul 2018 01:18:13 +0000 (-0700)
Subject: add grid docs mention
X-Git-Tag: v4.2.0~401^2
X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=b0b28c81e50bedff322b12c13707c97982b4d455;p=thirdparty%2Fbootstrap.git

add grid docs mention
---

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.