0
0
mirror of https://github.com/twbs/bootstrap.git synced 2025-01-17 09:52:29 +01:00

Added examples to the existing docs change for more clarity

This commit is contained in:
Moris Zen Pasic 2017-09-21 16:57:36 +02:00 committed by Johann-S
parent d66f47d099
commit bc2db58b73

View File

@ -8,13 +8,15 @@ toc: true
## Customizing variables ## Customizing variables
Every Sass variable in Bootstrap 4 includes the `!default` flag, meaning you can override that default value in your own Sass. Copy and paste variables as needed, modify the values, remove the !default flag, and recompile. If a variable has already been assigned, then it won't be re-assigned by the default values in Bootstrap. This means that your modified Sass variables should be called before you import Bootstrap Sass files. Every Sass variable in Bootstrap 4 includes the `!default` flag, meaning you can override that default value in your own Sass. Copy and paste variables as needed, modify the values and remove the !default flag. If a variable has already been assigned, then it won't be re-assigned by the default values in Bootstrap. This means that your modified Sass variables should be called before you import Bootstrap Sass files. For example, to change out the `background-color` and `color` for the `<body>`, you'd do the following::
For example, to change out the `background-color` and `color` for the `<body>`, you'd do the following:
{% highlight scss %} {% highlight scss %}
$body-bg: $gray-900; // Your variable overwrite first or a Sass file containing the modifications
$body-color: $gray-600; $body-bg: #000000;
$body-color: #ffffff;
// Then import Bootstrap
@import "node_modules/bootstrap/scss/bootstrap";
{% endhighlight %} {% endhighlight %}
Do the same for any variable you need to override, including the global options listed below. Do the same for any variable you need to override, including the global options listed below.