Menu
I have a problem with understanding the $spacer variable(?) noted in Bootstrap 4's Spacing Documentation and couldn't find any documentation on it.
For example: 1 - (by default) for classes that set the margin or padding to $spacer * .25
.ml-1 {
margin-left: ($spacer * .25) !important;
}
What I understand is the value of the variable is to be multiplied by 0.25, but how is that possible if the value is not even set?
535
$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...
Similarly, to add margin to an element, we can use the following margin classes: 'm-{size}' for all sides, 'mt-{size}' for top, 'mb-{size}' for bottom, 'ml-{size}' for left, 'mr-{size}' for right, 'mx-{size}' for horizontal and 'my-{size}' for vertical margins.
Add an Empty div Element Between Two Buttons to Add Space Between Them in HTML. Use the margin-right Property to Put Space Between the Buttons in HTML.
If the variable wasn't set then it wouldn't be possible… but since it is set (right here), that doesn't matter.
112
$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
45
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
