Unable to undertstand usage of $spacer in Bootstrap 4
$spacer is a sass variable . its value is 16px
in Bootstrap for example ml-1
mean margin-left
with size 1
whose value is ($spacer * 0.25
) i.e 16px*0.25
which is 1/4th value of 16px
== 4px,
therefore a size 1 for padding or margin stands for "$spacer * .25
" :4px.
For size 2: $spacer * .5
== 16px*0.5
== 8px
.
now..
size 3: $spacer*1
[the exact value] == 16px
.
size 4: $spacer*1.5
==24px
.
size 5: $spacer*3
== 48px
As Quentin pointed, The default value of $spacer is 1rem, i.e 16 pixels for most of the browsers. You can evaluate the outcome by multiplying 16 * the fraction( .25, .5 etc), and cross-check the result in Devtool's CSSBox Model.Consider the below example,
<form class="form-inline ">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
</form>
As we use mr-sm-2 class on the input field, Which essentially says, set the right margin to size 2 on small breakpoint( between 576px to 767 px)
Now, if you check the right margin of the subject element, it will be 16 * .5 = 8px.
If the variable wasn't set then it wouldn't be possible… but since it is set (right here), that doesn't matter.