Here is an extremely basic tutorial that will help you setup the environment to customize Bootstrap 4 for your needs on Windows machine using Node.js and npm
This tutorial is created using Bootstrap 4.1.3 which can be downloaded from https://getbootstrap.com/docs/4.1/getting-started/download/.
- Extract the zip file anywhere within your computer and you will have following folder structure
- Now open command prompt and navigate inside the bootstrap folder.
- Run following command to install all the npm package dependency (It may take couple of minutes)
- Create bootstrap-custom.scss file within /scss/ folder and add following content in that file
- Make a change in /package.json file to use our bootstrap-custom.scss instead of bootstrap.scss to generate css file
Look for a line (highlighted above) for command “css-compile” and change the portion of that command from “–precision 6 scss/bootstrap.scss dist/css/bootstrap.css” to “–precision 6 scss/bootstrap-custom.scss dist/css/bootstrap.css”
- Now open command prompt and navigate inside the bootstrap folder and run following command to generate css file
npm run dist
- Once the command is complete, open /dist/css/bootstrap.css file and you will see the color changed for “blue”, header and body fonts are changed to “Lora” and “Open Sans” and a new class “my-new-class” is added at the bottom of the file.
Vishal Monpara is a full stack Solution Developer/Architect with 13 years of experience primarily using Microsoft stack. He is currently working in Retail industry and moving 1’s and 0’s from geographically dispersed hard disks to geographically dispersed user leveraging geographically dispersed team members.