Updating the Bootstrap 4 Grid System to an 8pt Grid

bootstrap4-8pt-grid-system.scss

// 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;

explanation.md

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.