How to extend Bootstrap 4.1 $spacers with additional sizes

user_918255 0
Viewed 5436

The Bootstrap 4.1 documentation on spacing says that I can extend the $spacers variable (which is used by the margin and padding classes) but it doesn't explain how.

Can anyone share a link to official documentation? If that doesn't exist can anyone explain?

bootstrap-4 sass
2 Answers

You can follow Bootstrap's Variable defaults documentation for how to override the default for just a single Sass variable. You can add your own by setting $spacers in your override file:

// Your variable overrides
$spacer: 1rem;
$spacers: (
  6: ($spacer * 3.5),
  7: ($spacer * 10)
)

// Bootstrap and its default variables
@import "../node_modules/bootstrap/scss/bootstrap";

The variable the docs refer to is called $spacers and is in _variables.scss:

// Spacing
//
// Control the default styling of most Bootstrap elements by modifying these
// variables. Mostly focused on spacing.
// You can add more entries to the $spacers map, should you need more variation.

$spacer: 1rem !default;
$spacers: () !default;
// stylelint-disable-next-line scss/dollar-variable-default
$spacers: map-merge(
  (
    0: 0,
    1: ($spacer * .25),
    2: ($spacer * .5),
    3: $spacer,
    4: ($spacer * 1.5),
    5: ($spacer * 3)
  ),
  $spacers
);
user_3686970

You could do it using Sass, you simply add another entry to the $spacers variable before compiling bootstrap. So something like:

$spacers: (
  0: 0,
  1: ($spacer * .25),
  2: ($spacer * .5),
  3: $spacer,
  4: ($spacer * 1.5),
  5: ($spacer * 3),
  6: ($spacer * 5)
)

I hope it's helps ;)

user_102568060
Related