Skip to content

Instantly share code, notes, and snippets.

@bradsiefert

bradsiefert/bootstrap4-8pt-grid-system.scss

Last active January 7, 2023 13:55
Show Gist options
  • Star 2 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save bradsiefert/be0f931f82ec33782ceb2b75e5caf31a to your computer and use it in GitHub Desktop.
Save bradsiefert/be0f931f82ec33782ceb2b75e5caf31a to your computer and use it in GitHub Desktop.
Download ZIP
Updating the Bootstrap 4 Grid System to an 8pt Grid
Raw
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;
Raw
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.

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