Basic tutorial to customize Bootstrap 4

By | October 24, 2018

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

Development Environment

Windows 10
Node.js
npm

This tutorial is created using Bootstrap 4.1.3 which can be downloaded from https://getbootstrap.com/docs/4.1/getting-started/download/.

Customization

  • Extract the zip file anywhere within your computer and you will have following folder structure
    Bootstrap 4.1.3 unzipped
  • 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)
    npm install
  • 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
    Bootstrap package.json change command
    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.
    Bootstrap color changed in output
    Bootstrap new css class added

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.