diff options
| author | Mark Otto <[email protected]> | 2018-07-08 18:18:13 -0700 |
|---|---|---|
| committer | Mark Otto <[email protected]> | 2018-07-08 18:18:13 -0700 |
| commit | b0b28c81e50bedff322b12c13707c97982b4d455 (patch) | |
| tree | 4037f0bef0d6daa2b89fb89c7807771402f20ce1 | |
| parent | 7e96979ceaa97e42844112ae9649b20cf08e89d0 (diff) | |
| download | bootstrap-b0b28c81e50bedff322b12c13707c97982b4d455.tar.xz bootstrap-b0b28c81e50bedff322b12c13707c97982b4d455.zip | |
add grid docs mention
| -rw-r--r-- | docs/4.1/layout/grid.md | 14 |
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. |
