Creating Custom Grid Number (24) For Bootstrap 4

I have a project and I want to integrate some bootstrap into my html files for ui development. I know that the standard grid size is 12 and I wanted to change the number of grid sp

Solution 1:

$grid-columns is a SASS variable. You can use SASS to change the grid to 24 columns like this...

$grid-columns:           24;
$grid-gutter-width-base: 15px;

@import"bootstrap";

Demohttps://codeply.com/go/C0Uh7PokEl

The variable names have change slightly as of Bootstrap 4.0.0:

$grid-columns:      24;
$grid-gutter-width: 12px;

@import"bootstrap";

Also see: How to get bootstrap 4 24 grid

---

Bootstrap 4 Customizer

Solution 2:

24 Grid systemwith Gutter
@gridColumns: 24@gridColumnWidth: 30px
@gridGutterWidth: 1px
@gridColumnWidth1200: 35px
@gridGutterWidth1200: 15px
@gridColumnWidth768: 21px
@gridGutterWidth768: 10px

24 Grid systemwithout Gutter
@gridColumns: 24@gridColumnWidth: 40px
@gridGutterWidth: 0px
@gridColumnWidth1200: 50px
@gridGutterWidth1200: 0px
@gridColumnWidth768: 31px
@gridGutterWidth768: 0px

Solution 3:

Inside 'application.scss' you can add in your own stylesheet containing custom vars to override Bootstrap's:

---

// application.scss@import"variables"; // Add custom vars here@import"bootstrap/variables";

@import"bootstrap/main"; 


// _variables.scss

%scope {
  @import"boostrap/variables";

  @gridColumns:24@gridColumnWidth: 30px@gridGutterWidth: 1px@gridColumnWidth1200: 35px@gridGutterWidth1200: 15px@gridColumnWidth768: 21px@gridGutterWidth768: 10px
}

Check this answer for more info: https://stackoverflow.com/a/38225564/1528308