diff options
| author | Mark Otto <[email protected]> | 2016-07-25 20:36:30 -0700 |
|---|---|---|
| committer | Mark Otto <[email protected]> | 2016-07-25 20:36:30 -0700 |
| commit | 55795e88450ad13fdcc581a31fa1697fd2f77145 (patch) | |
| tree | 0260a62abb505a19c97b59cd407ef16435af7e5b /docs/layout/grid.md | |
| parent | ded1bf98d796ed9efb5c22eb1cfd8870b336158a (diff) | |
| download | bootstrap-55795e88450ad13fdcc581a31fa1697fd2f77145.tar.xz bootstrap-55795e88450ad13fdcc581a31fa1697fd2f77145.zip | |
Customizing grid docs updates to followup on #19099
- More details on columns and gutters
- Break it into clear sections
Diffstat (limited to 'docs/layout/grid.md')
| -rw-r--r-- | docs/layout/grid.md | 15 |
1 files changed, 13 insertions, 2 deletions
diff --git a/docs/layout/grid.md b/docs/layout/grid.md index a69e10b84..2dd86970e 100644 --- a/docs/layout/grid.md +++ b/docs/layout/grid.md @@ -459,7 +459,18 @@ Easily change the order of our built-in grid columns with `.push-md-*` and `.pul Using our built-in grid Sass variables and maps, it's possible to completely customize the predefined grid classes. Change the number of tiers, the media query dimensions, and the container widths—then recompile. -For example, if you wanted just three grid tiers, you'd update the `$grid-breakpoints` and `$container-max-widths` to something like this: +### Columns and gutters + +The number of grid columns and their horizontal padding (aka, gutters) can be modified via Sass variables. `$grid-columns` is used to generate the widths (in percent) of each individual column while `$grid-gutter-width` is divided evenly across `padding-left` and `padding-right` for the column gutters. + +{% highlight scss %} +$grid-columns: 12; +$grid-gutter-width: 30px; +{% endhighlight %} + +### Grid tiers + +Moving beyond the columns themselves, you may also customize the number of grid tiers. If you wanted just three grid tiers, you'd update the `$grid-breakpoints` and `$container-max-widths` to something like this: {% highlight scss %} $grid-breakpoints: ( @@ -475,4 +486,4 @@ $container-max-widths: ( ); {% endhighlight %} -Save your changes and recompile to have a brand new set of predefined grid classes for column widths, offsets, pushes, and pulls. Responsive visibility utilities will also be updated to use the custom breakpoints. +When making any changes to the Sass variables or maps, you'll need to save your changes and recompile. Doing so will out a brand new set of predefined grid classes for column widths, offsets, pushes, and pulls. Responsive visibility utilities will also be updated to use the custom breakpoints. |
