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

document how to customize grid tiers

Browse Source
This commit is contained in:
Mark Otto 2016-02-06 13:02:42 -08:00
parent bc45addbc3
commit fb4f5f0bf1
1 changed files with 22 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
docs/layout/grid.md
View File

@ -452,3 +452,25 @@ Easily change the order of our built-in grid columns with `.col-md-push-*` and `
</div>
{% endexample %}
</div>
## Customizing the grid
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:
{% highlight scss %}
$grid-breakpoints: (
sm: 480px,
md: 768px,
lg: 1024px
);
$container-max-widths: (
sm: 420px,
md: 720px,
lg: 940px
) !default;
{% 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.