Customizing Bootstrap - 3 Ways to do so. With and without Sass

Using Bootstrap Theme

We can use bootswatch, which has precompiled custom themes for bootstrap.

Overriding CSS

For simple uses, we can also override CSS properties to customize some colours and components.

Using Sass

mkdir node-sass-bootstrap 
cd node-sass-bootstrap 
npm init --yes 
npm i bootstrap

Setting up Sass

1. For Windows

npm i -g node-sass

# use this if there shows an error saying script cannot be loaded 
Set-ExecutionPolicy -Scope CurrentUser -ExecutionPolicy Unrestricted

1. For Linux / Mac OS

sudo npm install --unsafe-perm node-sass

Then we will create a file in it named main.scss. If you use any other name, remember to change in the commands.

For simple customization add this to your scss file to change primary color and font.

$primary : #eb4d4b; 
$danger : #535c68; 

@import url('https://fonts.googleapis.com/css2?family=Do+Hyeon&display=swap'); 
$font-family-base : 'Do Hyeon', sans-serif; 

@import '../node_modules/bootstrap/scss/bootstrap.scss';

Now you can compile scss with the following commands, which will give you a css file.

# to compile 
node-sass ./main.scss -o ./static/css/ 
# to watch 
node-sass ./main.scss -wo ./static/css/

The -wo won’t compile it on the first run, only after the changes.

Now with these options you can customise bootstrap to such a level where it won't be easy to recognise that your website is built using Bootstrap moreover it also helps to give your website a very unique look.