Bootstrap 4 Theming – Changing Primary Color

Bootstrap allows you to customize the existing definition greatly. With Bootstrap 4, the way we customize the theming has changed a bit, and that’s exactly what I would like to explain here – step by step.

Step 1: Get the Bootstrap source

Of course you need to get the bootstrap source to customize it. You would then recompile it to get the required css.

We could use npm to get the source.

 npm install bootstrap --save

Step 2: Install Sass compiler

We would rely on Sass to customize the variables and maps for creating our custom bootstap. You could head over to the Sass Website to read the installation instruction in detail. But I have tried to highlight the necessary steps.

You would need to install Ruby first and then follow it up with the following command.

npm install -g sass

Step 3: Arrange your folder structure.

The last step before we actually start customizing is to arrange the folder structure as mentioned by the Bootstrap website.

your-project/
├── scss
│   └── custom.scss
└── node_modules/
    └── bootstrap
        ├── js
        └── scss

Step 4: Customize your theme.

You cutomize your theme by modiying the variables and maps in the bootstrap code. Using your custom.css you import the whole bootstrap source (you could alternatively pick and choose if you are sure).

@import "node_modules/bootstrap/scss/bootstrap";

The way team bootstrap has written the code is that it allows you to customize the variable, provided it is defined before the import.

In this example, we will alter the Primary color to a shade of purpose.

$theme-colors: (
  "primary": #4b1076,
);
@import "node_modules/bootstrap/scss/bootstrap";

Step 5: Compile your scss and include in your application

Now all that is left is to compile your custom.scss and create your css which you can then use in your application. To compile the scss, use the following command.

sass custom.scss custom.css

That’s all you need.