Creating custom grid number (24) for Bootstrap 4

Question

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 spaces from 12 to 24. I know there is a way to do it from the documentation but I dont know how to where to integrate it.

This is the bootstrap documentation

$grid-columns:               12 !default;
$grid-gutter-width-base:     30px !default;
$grid-gutter-widths: (
  xs: $grid-gutter-width-base,
  sm: $grid-gutter-width-base,
  md: $grid-gutter-width-base,
  lg: $grid-gutter-width-base,
  xl: $grid-gutter-width-base
) !default;

Where do I put it in my code.

CSS file
HTML file
Js file
....

Carol Skelly · Accepted Answer · 2021-05-01T12:57:26.490

5

$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";

Demo https://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

edited May 01 '21 at 12:57

answered Dec 05 '17 at 12:31

Carol Skelly

351,302
90
710
624

do i add that in the html file as a script in the header or where would I add that – Omar Jandali Dec 06 '17 at 00:18

score 0 · Answer 2 · answered Dec 05 '17 at 09:07

0

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

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

answered Dec 05 '17 at 09:07

Sonia

1,909
1
11
13

can check here: https://stackoverflow.com/a/15173226/2210243 – Sonia Dec 05 '17 at 09:08

Alex · Answer 3 · 2017-12-05T14:29:10.450

0

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

edited Dec 05 '17 at 14:29

answered Dec 05 '17 at 09:26

Alex

2,651
2
25
45

The customizer isn't available for Bootstrap 4. – Klooven Dec 05 '17 at 14:26
Oh really, shows how long it's been since I used Bootstrap... – Alex Dec 05 '17 at 14:29
1

There's a third party customizer at: http://upgrade-bootstrap.bootply.com/bootstrap-4-customizer – Klooven Dec 05 '17 at 14:57

Creating custom grid number (24) for Bootstrap 4

3 Answers3

Linked