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.

Tags:

Html

Css

Sass