Basic tutorial to customize Bootstrap 4

Category: CssTags: , ,

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

Share

0 comments

Your email address will not be published.