How to override bootstrap variables in sass? [dupl

Question

This question already has an answer here:

• How to extend/modify (customize) Bootstrap 4 with SASS 2 answers

I was trying to customize a Bootstrap 4. I want to copy settings from _variable.scss file to _custom.scss to override. But I didn't find _custom.scss file in source code. How do I add this _custom.scss file in my project?

Answer 1

Bootstrap 4 is a big hit. They have completely rewritten it. So, You can override the variables very easily. Just create a _custom-variables.scss file and import it before _variables.scss file in bootstrap.scss as shown below.

Copy the variable which you want to override, paste it in _custom-variables.scss and change the value as you want. Also remove the !default attribute. Compile it again and done. The !default attribute is reverse of !important. It will take the value of previously declared variable.