mirror of
https://github.com/twbs/bootstrap.git
synced 2025-02-11 08:54:23 +01:00
document how to customize grid tiers
This commit is contained in:
parent
bc45addbc3
commit
fb4f5f0bf1
@ -452,3 +452,25 @@ Easily change the order of our built-in grid columns with `.col-md-push-*` and `
|
|||||||
</div>
|
</div>
|
||||||
{% endexample %}
|
{% endexample %}
|
||||||
</div>
|
</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.
|
||||||
|
Loading…
x
Reference in New Issue
Block a user