rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-01-17 09:52:29 +01:00
Code Issues Actions Packages Releases Activity

add grid docs mention

Browse Source
This commit is contained in:
Mark Otto 2018-07-08 18:18:13 -07:00
parent 7e96979cea
commit b0b28c81e5
1 changed files with 14 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
docs/4.1/layout/grid.md
View File

@ -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 %} {% include example.html content=example %}
</div> </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 ## Alignment
Use flexbox alignment utilities to vertically and horizontally align columns. Use flexbox alignment utilities to vertically and horizontally align columns.