How to compile bootstrap 4.1

I need to modify the grid-the number of coloumns on a row. Normally it is 12 by default on bootstrap. I want it at 24 to have more precise fine tuning of coloumn size.

Prerequisite:
Node.js already installed.

Download bootstrap source:

Eg:

wget https://github.com/twbs/bootstrap/archive/v4.1.3.zip
unzip v4.1.3.zip
cd bootstrap-4.1.3
npm install

Now modify as you need. For me, I needed to edit _variables.scss:

$ find . -iname _variables.scss
./scss/_variables.scss
./site/docs/4.1/assets/scss/_variables.scss
$ grep -inr 'grid-columns' scss/_variables.scss
scss/_variables.scss:215:$grid-columns:                12 !default;
emacs scss/_variables.scss
// Grid columns
//
// Set the number of columns and specify the width of the gutters.
$grid-columns:                12 !default;
$grid-gutter-width:           30px !default;

And change that 12 to 24.

Now recompile it:

$ npm run dist

Now we can see the compiled files:

$ tree dist/
dist/
├── css
│   ├── bootstrap.css
│   ├── bootstrap.css.map
│   ├── bootstrap-grid.css
│   ├── bootstrap-grid.css.map
│   ├── bootstrap-grid.min.css
│   ├── bootstrap-grid.min.css.map
│   ├── bootstrap.min.css
│   ├── bootstrap.min.css.map
│   ├── bootstrap-reboot.css
│   ├── bootstrap-reboot.css.map
│   ├── bootstrap-reboot.min.css
│   └── bootstrap-reboot.min.css.map
└── js
    ├── bootstrap.bundle.js
    ├── bootstrap.bundle.js.map
    ├── bootstrap.bundle.min.js
    ├── bootstrap.bundle.min.js.map
    ├── bootstrap.js
    ├── bootstrap.js.map
    ├── bootstrap.min.js
    └── bootstrap.min.js.map

2 directories, 20 files