Extra margin/padding classes

You could create a bunch of classes manually, but there’s a much easier way to do it within variables.scss.

How To - variables.scss

Find the variable for spacers. This should be around line 39 and look something like this:

$spacers: ();
   // stylelint-disable-next-line scss/dollar-variable-default
   $spacers: map-merge(
      (
         ...
         9: ($spacer * 9),
         10: ($spacer * 10),
         11: ($spacer * 11)
      ), $spacers
   );

Add your desired classes to the { } brackets as shown, like the 11: ($spacer * 11) line above. Make sure to comma-separate each line.

Once the lines you need have been added, Bootstrap 4 will automatically create the padding and margin classes for you, like p-11 and m-11 to match the others.

Tags: BS4, scss, sass*