Many times a component has different spacings around it depending on where it is located. Spacers help you add paddings and margins of different sizes conveniently, without having to create a new class for every case.
-You get access to classes like m-t-2
which stands to margin-top: 20px, so same goes for something like p-b-3
padding-bottom: 30px.
-There is also m-v-2 which stands for vertical margin or margin-top: 20px; margin-bottom:20px; and p-h-3
would be padding horizontal 30px;
This classes use the convention type_position_negative_number_target
Member | Options | Example classes |
---|---|---|
type | m margin, p padding |
.m-2 , .p-3 |
position | t top, b bottom, l left, r right, v vertical, h horizontal |
.m-t-2 .p-v-6 .m-b-3 |
negative | n |
.m-t-n-2 only available for margins |
number | 0 to 20 | .m-h-0 .p-h-15 |
target | xs , sm , md , lg |
.m-t-2-xs .m-t-4-sm |