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.