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

Customizing grid docs updates to followup on #19099

Browse Source 
- More details on columns and gutters
- Break it into clear sections
This commit is contained in:
Mark Otto 2016-07-25 20:36:30 -07:00
parent ded1bf98d7
commit 55795e8845
1 changed files with 13 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
docs/layout/grid.md
View File

@ -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. 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 %} {% highlight scss %}
$grid-breakpoints: ( $grid-breakpoints: (
@ -475,4 +486,4 @@ $container-max-widths: (
); );
{% endhighlight %} {% 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.