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
Joel G Mathew, known in tech circles by the pseudonym Droidzone, is an opensource and programming enthusiast.
He is a full stack developer, whose favorite languages are currently Python and Vue.js. He is also fluent in Javascript, Flutter/Dart, Perl, PHP, SQL, C and bash shell scripting. He loves Linux, and can often be found tinkering with linux kernel code, and source code for GNU applications. He used to be an active developer on XDA forums, and his tinkered ROMS used to be very popular in the early 2000s.
His favorite pastime is grappling with GNU compilers, discovering newer Linux secrets, writing scripts, hacking roms, and programs (nothing illegal), reading, blogging. and testing out the latest gadgets.
When away from the tech world, Dr Joel G. Mathew is a practising ENT Surgeon, busy with surgeries and clinical practise.