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.
Table of contents
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
- 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.