Bulma | spacing helpers change the size and color of the text with respect to one or multiple viewports such as : mobile
, tablet
, desktop
, widescreen
, fullhd
.
Bulma provides margin m*
and padding p*
helper modifier class that is used in the following directions:
*t
- It refers to the top.*r
- It refers to the right.*b
- It refers to the bottom.*l
- It refers to the left.*l
- It refers to the left.*x
- It refers to horizontally left and right.*y
- It refers to vertically top and bottom.You can also combine a margin/padding prefix with a direction suffix. For example:
margin-top
, use mt-*
padding-bottom
, use pb-*
margin-left
and margin-right
, use mx-*
Each of these property-direction
combinations needs to be appended with one of 6 value suffixes:
Suffix | Value |
---|---|
*-0 |
0 |
*-1 |
0.25rem |
*-2 |
0.5rem |
*-3 |
0.75rem |
*-4 |
1rem |
*-5 |
1.5rem |
*-6 |
3rem |
General Syntax
<element class="m{t | r | b | l | x | y}-{1 to 6}">Margin</element>
<element class="p{ t | r | b | l | x | y }-{1 to 6}">Padding</element>