Extending the Bootstrap 4 $spacer variable via the 8pt grid

bootstrap4-spacer-extended.scss

// 8pt Spacers Extended
$spacer: 1rem !default;
$spacers: () !default;
$spacers: map-merge((
  0: 0,
  1: ($spacer * .25), 2: ($spacer * .5),   3: ($spacer * 1),   4: ($spacer * 1.5),
  5: ($spacer * 2),   6: ($spacer * 2.5),  7: ($spacer * 3),   8: ($spacer * 3.5),
  9: ($spacer * 4),   10: ($spacer * 4.5), 11: ($spacer * 5),  12: ($spacer * 6),
  13: ($spacer * 8),  14: ($spacer * 10),  15: ($spacer * 12), 16: ($spacer * 16)
), $spacers);

explanation.md

8pt Boostrap 4 Grid Update

The Bootstrap 4 $spacer is a really smart way of using rems of including spacing ulitilies. I love that they added it, but I use needed a few more spacing options than the 5 that are included by default.

Assuming that 1rem = 16px, here are the spacing options this gist creates.

• 0 = 0px
• 1 = 4px
• 2 = 8px
• 3 = 16px
• 4 = 24px
• 5 = 32px
• 6 = 40px
• 7 = 48px
• 8 = 56px
• 9 = 64px
• 10 = 72px
• 11 = 80px
• 12 = 96px
• 13 = 128px
• 14 = 160px
• 15 = 192px
• 16 = 256px

For more information about Boostrap 4 spacing: https://getbootstrap.com/docs/4.0/utilities/spacing/

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