What is the meaning of $spacer in bootstrap?

Question

I am new to bootstrap. I came aloing this documentation on bootstrap:

https://getbootstrap.com/docs/4.3/utilities/spacing/

Here is writed that when we write for example mt-1 that means:

1 - (by default) for classes that set the margin or padding to $spacer * .25

what means in this situation $spacer * .25 ?

score 3 · Accepted Answer · answered Nov 15 '20 at 11:19

$spacer is a SASS variable. By default it's value is 1rem. Therefore mt-1 is margin-top:.25rem;

The value for each of the 6 spacing units (0-5) are derived from the $spacers SASS map variable...

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

Result...

mt-1 = .25rem
mt-2 = .5rem
mt-3 = 1rem
mt-4 = 1.5rem
mt-5 = 3rem

1 Answers1