Skip to content

Instantly share code, notes, and snippets.

What would you like to do?
Updating the Bootstrap 4 Grid System to an 8pt Grid
// Update to 8pt Grid System
$grid-gutter-width: 32px !default;
$container-max-widths: (sm: 480px, md: 736px, lg: 992px, xl: 1200px) !default;
$grid-breakpoints: (xs: 0, sm: 512px, md: 768px, lg: 1024px, xl: 1200px ) !default;

8pt Boostrap 4 Grid Update

It has always bugged me that Bootstrap's grid gutters are 30px instead of 32px. I've also never understood why the max widths and/or the grid breakpoints of the container aren't equal to something divisible by 8 or 16. In this update, I made the breakpoint and the max-width at xl the same and I think it gives me what I want. Also, I updated the breakpoints to be 1024px and 768px which will make it easier to target iPad screen sizes.

On sm, md, and lg, I added an additional 32px margin from the breakpoints to give the containers a bit more cusion. I think it frames the content better with this extra margin.

Include the scss file before your @import of boostrap4 and it will update the sass variables.

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