How To Change/Overwrite Colours In Bootstrap 4

Well, this one just stung me and a client after migrating from Bootstrap v3 over to v4 in a project.

In Bootstrap of yesteryear, you overrode colours using separately named variables like $brand-primary if you’re new to v4, you’ll probably try and use variables like these and discover they do nothing.

In Bootstrap v4 colours have been moved into a Sass map. This means separate variables for colours no longer exist. The theme colours are now defined inside of Bootstrap’s variables file here which is a map of colours using similar names from v3.

To overwrite these colours you firstly need to create your own variables file which you import FIRST before Bootstrap so your variables are used in preference over Bootstrap’s defaults.

To change the primary colour, just define the following in your variables file:

$theme-colors: (
  primary: #333
);

This will overwrite the primary colour, but leave the other defaults intact. That’s it. I really wish the Bootstrap team documented this better and made it known, it really caught me off guard.

To override more than one colour, just comma separate them using the syntax in the linked variables file in the Bootstrap repo (if you’re not familiar with maps).