Bulma | Spacing helpers

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.

Margin & Padding Helpers

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:

for a margin-top, use mt-*
for a padding-bottom, use pb-*
for both 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>

Try it now

Web Tutorials

Html Tutorial HTML

Javascript Tutorial JAVASCRIPT

Css Tutorial CSS

Bootstrap 5 Tutorial BOOTSTRAP 5

Bootstrap 4 Tutorial BOOTSTRAP 4