Regarding the alpha version of v4: To properly customize Bootstrap styles, it is crucial to override the variables before they are applied to all components. In the `bootstrap/scss/bootstrap` file, each scss file is imported with their `variables` file at the beginning. This allows for a pre-hook where you can modify the variables before they affect tables, buttons, and similar elements.
For easier customization in Bootstrap 4, there is a _custom.scss file provided to override default variables located in /scss/_variables.scss. By copying relevant lines from this file into the _custom.scss file, adjusting the values, and recompiling your Sass code, you can alter the default settings. Make sure to remove the !default flag from the overridden values. [Source]
The `_custom.scss` file should be placed within the `bootstrap/scss/` directory.
Please note that this feature has been deprecated since v4 beta.
In versions starting from beta and onwards: When dealing with variable defaults, things work differently. A variable marked with the `!default` flag will default to the previously set value (if available). Since all Bootstrap variables carry this flag, you can import your `custom-variables.scss` prior to the `bootstrap/scss/bootstrap`;
$var: 2px; /* defined in custom-variables.scss */
$var: 1px !default; /* defined in bootstrap _variables.scss */
.element {
width: $var;
}
results in
.element {
width: 2px;
}
If you wish to utilize Bootstrap variables while overriding them, one method is to import the `_variables.scss` file twice; once as a standalone file before setting your overrides and once again after incorporating the entire Bootstrap framework:
// Import bootstrap _variables.scss file
$var: 1px !default;
$var2: 4px !default;
// Your custom-variables.scss
$var: 2px + $var2;
// Import bootstrap
$var: 1px !default;
$var2: 4px !default;
.element {
width: $var;
}
which compiles to
.element {
width: 6px;
}