Extend border, spacing, gutter utilities multiplier

[AlexVanK]

A Bootstrap utility multiplier is a number by which the base size of a certain CSS style can be multiplied. This provides utilities so a user can increase spacing, border-thickness out-of-the-box.

For border and spacing the current max multiplier is 5: https://getbootstrap.com/docs/5.3/utilities/borders/#sass-variables https://getbootstrap.com/docs/5.3/utilities/spacing/#css

Let's expand this (as well as spacing utilities) to provide more options for web designers to choose from.

[AlexVanK]

Extended each by 1 extra multiplier. This should serve most purpose (can always extend further):

// *
// *
// BORDER UTILITIES
$border-width: 1px;
$border-widths: (
  1: 1px,
  2: 2px,
  3: 3px,
  4: 4px,
  5: 5px,
  6: 6px,
  7: 7px
);

// *
// *
// SPACING UTILITIES
$spacer: 1rem;
$spacers: (
  0: 0,
  1: $spacer * .25,
  2: $spacer * .5,
  3: $spacer,
  4: $spacer * 1.5,
  5: $spacer * 3,
  6: $spacer * 4.5
);

[AlexVanK]

Done this also for gutters: https://getbootstrap.com/docs/5.3/layout/gutters/#how-they-work

// *
// *
// GUTTER UTILITIES (for flex)
$grid-gutter-width: 1.5rem;
$gutters: (
  0: 0,
  1: $spacer * .25,
  2: $spacer * .5,
  3: $spacer,
  4: $spacer * 1.5,
  5: $spacer * 3,
  6: $spacer * 4
);