Change the number of columns in bootstrap grid

I needed to change the number of columns in a row of bootstrap from the default 12 to 24. To do this, we change the setting in sass, and recompile bootstrap. I will be working on the latest bootstrap 5 beta.

First download bootstrap using npm.

Upgrade npm:

sudo npm install -g npm

Now download bootstrap to a convenient directory:

mkdir ~/boostrap/
cd ~/boostrap/
npm install [email protected]
cd node_modules/bootstrap/
npm install

Now we know from documentation that to change the number of columns in a grid, we need to change the value of a sass variable named @grid-columns from the default 12, to 24. So let’s find out which file it’s in:

[email protected]:~/boostrap/node_modules/bootstrap$ grep -inr 'grid-columns' scss/
scss/_variables.scss:332:$grid-columns:                12 !default;
scss/_grid.scss:21:  @include make-grid-columns();
scss/mixins/_grid.scss:29:@mixin make-col($size, $columns: $grid-columns) {
scss/mixins/_grid.scss:39:@mixin make-col-offset($size, $columns: $grid-columns) {
scss/mixins/_grid.scss:59:// any value of `$grid-columns`.
scss/mixins/_grid.scss:61:@mixin make-grid-columns($columns: $grid-columns, $gutter: $grid-gutter-width, $breakpoints: $grid-breakpoints) {

So, we can clearly see that 12 is defined in scss/_variables.scss. So let’s edit the file, and change the value.

Default:

$grid-columns:                12 !default;
$grid-gutter-width:           1.5rem !default;
$grid-row-columns:            6 !default;

Changed to below:

// Grid columns
//
// Set the number of columns and specify the width of the gutters.

$grid-columns:                24 !default;
$grid-gutter-width:           1.5rem !default;
$grid-row-columns:            6 !default;

Now, recompile bootstrap:

npm run dist

I got an error saying missing modules. To fix:

[email protected]:~/boostrap/node_modules/bootstrap$ rm -rf node_modules
[email protected]:~/boostrap/node_modules/bootstrap$ npm install