Overwriting Bootstrap variables

Question

In the documentation of Bootstrap there is stated the following:

Every Sass variable in Bootstrap 4 includes the !default flag allowing you to override the variable’s default value in your own Sass without modifying Bootstrap’s source code. Copy and paste variables as needed, modify their 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 is working for colors and others, for example: $primary: #ffffff;

However it is not working for every variable with a default-flag. Sometimes it is just working with the !important flag, but that's not what I want. Is there any workaround or am I missing something?

UPDATE

I imported the Bootstrap file at the end of my custom.scss, so the order is correct. That's why I'm confused too. I found an interesting example, that is confusing me even more from the _variables.scss:

$gray-900: #212529 !default;

$body-color: $gray-900 !default;

I'm not able to change the color of

$body-color

directly. I have to use the !important flag to make it work that way. On the other hand,

$gray-900

is working correctly. I can change the color from that variable and remove the !default tag and it is changing the body color as a next logical step. There still have to be a snap I'm not getting.

Nathan Mc Grath · Accepted Answer · 2020-09-01 00:31:35Z

2

The order of variable definition is important, you need to define all the values for your variables before you import the Bootstrap Sass file.

From the Bootstrap docs:

// Your variable overrides
$body-bg: #000;
$body-color: #111;

// Bootstrap and its default variables
@import "node_modules/bootstrap/scss/bootstrap";

Other than this, I cannot see any reason why it wouldn't work. But you mentioned the important flag, and this is not something you can use with Sass variable definition. Maybe you can provide an example of what you are trying to override that won't work.

answered Sep 1, 2020 at 0:31

Nathan Mc Grath

3082 silver badges8 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Overwriting Bootstrap variables

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related