# Custom Bootstrap Colors
Install the SASS compiler from https://sass-lang.com/install - preferably the dart version.
Download the source file : https://github.com/twbs/bootstrap/archive/v5.2.0-beta1.zip
Get into the downloaded folder :
`cd bootstrap-5.2.0-beta1`
This will be our *base* folder.
Say you're creating a new job board website and your new website's project name is **instajobs** (prefix: **ij-**)
Create a **instajobs.scss** in *scss* folder - so it'll be scss/instajobs.scss and type in this :
```
$primary: #ff8200;
$instajobs-colors: (
"ij-main": #00ac9f,
);
@import "functions";
@import "variables";
$theme-colors: map-merge($theme-colors, $instajobs-colors);
@import "bootstrap";
```
1. Here we are re-defining the primary color of Bootstrap to [#ff8200](https://www.color-hex.com/color/ff8200)
2. We are defining a brand new color to the theme `$instajobs-colors` as `ij-main` which is [#00ac9f](https://www.color-hex.com/color/00ac9f)
3. We need to add `$instajobs-colors` to `$theme-colors` which we do via `map-merge`
4. But before we can do `map-merge` we have to include the functions and variables defined in bootstrap - `@import "functions"; @import "variables";` since `$theme-colors` are deifned in *scss/_variables.scss*.
5. Finally we import bootstrap.scss
Run the following in terminal :
`sass scss/instajobs.scss css/instajobs.css`
The above command will compile the entire bootstrap source files **including** our custom *instajobs.scss* to a generated file called *instajobs.css* in the **css** folder.
Create *example.html* in the base folder referencing *css/instajobs.css*
```html
Custom Bootstrap Colors Demo
Hello, world!
```
Now open example.html in the browser by double-clicking the file in your folder.
You'll see something like this :
![custom-colors.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1655471800380/SgN6j023q.png align="left")
The primary color has been changed to an orange variant and a custom color called `ij-main` which is considered a main color for the instajobs site is something of a green shade.
Read more at : https://getbootstrap.com/docs/5.2/customize/sass/
***MAJOR UPDATE :***
This example SASS code in instajobs.scss works only from Bootstrap 5.2.x onwards, since in 5.2.x, the authors have segregated the theme-colors variables defined in _variables.scss from theme-colors-rgb, utilities-text-colors etc into another file called _maps.scss
```
@import "functions";
@import "variables";
@import "maps";
```
From Bootstrap 5.1 and below, the code in **_maps.scss** was in **_variables.scss**.