aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorMark Otto <[email protected]>2018-07-08 18:18:13 -0700
committerMark Otto <[email protected]>2018-07-08 18:18:13 -0700
commitb0b28c81e50bedff322b12c13707c97982b4d455 (patch)
tree4037f0bef0d6daa2b89fb89c7807771402f20ce1
parent7e96979ceaa97e42844112ae9649b20cf08e89d0 (diff)
downloadbootstrap-b0b28c81e50bedff322b12c13707c97982b4d455.tar.xz
bootstrap-b0b28c81e50bedff322b12c13707c97982b4d455.zip
add grid docs mention
-rw-r--r--docs/4.1/layout/grid.md14
1 files changed, 14 insertions, 0 deletions
diff --git a/docs/4.1/layout/grid.md b/docs/4.1/layout/grid.md
index 5d341b68a..9527abbc1 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.