Customizing Bootstrap - 3 Ways to do so. With and without Sass
We will look the ways we can customize bootstrap using Sass or without Sass.
·Jun 25, 2022·
2 min read
Using Bootstrap Theme
We can use bootswatch, which has precompiled custom themes for bootstrap.
For simple uses, we can also override CSS properties to customize some colours and components.
mkdir node-sass-bootstrap cd node-sass-bootstrap npm init --yes npm i bootstrap
Setting up Sass
- 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
- 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.