Bulma Spacing Helpers Tutorial

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

Try it now