Skip to content

Instantly share code, notes, and snippets.

@octoxan

octoxan/_bigger-grid.scss

Created January 11, 2017 21:02
Show Gist options
  • Star 3 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save octoxan/080dcff2f806b1ee54dc8349d8dd2ec7 to your computer and use it in GitHub Desktop.
Save octoxan/080dcff2f806b1ee54dc8349d8dd2ec7 to your computer and use it in GitHub Desktop.
Download ZIP
Fix for Bootstrap 4's grid system not having actual large screen size breakpoints
Raw
_bigger-grid.scss
// Add two new breakpoints because Bootstrap is stupid by default
$grid-breakpoints: (
xs : 0,
sm : 576px,
md : 768px,
lg : 992px,
xl : 1200px,
xxl : 1400px,
xxxl: 1800px
) !default;
$container-max-widths: (
sm : 540px,
md : 720px,
lg : 960px,
xl : 1140px,
xxl : 1340px,
xxxl: 1740px
) !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,
xxl : $grid-gutter-width-base * 2,
xxxl: $grid-gutter-width-base * 2
) !default;
@le-tone
Copy link

le-tone commented Apr 5, 2017

hello,

added this to custom.scss, but the grid had no change...the container width is equal.

Do I need to do more stuff besides that?

thanks

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment