Spacing helpers

Change the size and color of the text for one or multiple viewport width

New! 0.9.0

Bulma provides margin m* and padding p* helpers in all directions:

  • *t for top
  • *r for right
  • *b for bottom
  • *l for left
  • *x horizontally for both left and right
  • *y vertically for both top and bottom

You need to 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

List of all spacing helpers #

There are 84 spacing helpers to choose from:

Property Shortcut Classes ↓
Values → 0 0.25rem 0.5rem 0.75rem 1rem 1.5rem 3rem
margin m m-0 m-1 m-2 m-3 m-4 m-5 m-6
margin-top mt mt-0 mt-1 mt-2 mt-3 mt-4 mt-5 mt-6
margin-right mr mr-0 mr-1 mr-2 mr-3 mr-4 mr-5 mr-6
margin-bottom mb mb-0 mb-1 mb-2 mb-3 mb-4 mb-5 mb-6
margin-left ml ml-0 ml-1 ml-2 ml-3 ml-4 ml-5 ml-6
margin-left and
mx mx-0 mx-1 mx-2 mx-3 mx-4 mx-5 mx-6
margin-top and
my my-0 my-1 my-2 my-3 my-4 my-5 my-6
padding p p-0 p-1 p-2 p-3 p-4 p-5 p-6
padding-top pt pt-0 pt-1 pt-2 pt-3 pt-4 pt-5 pt-6
padding-right pr pr-0 pr-1 pr-2 pr-3 pr-4 pr-5 pr-6
padding-bottom pb pb-0 pb-1 pb-2 pb-3 pb-4 pb-5 pb-6
padding-left pl pl-0 pl-1 pl-2 pl-3 pl-4 pl-5 pl-6
padding-left and
px px-0 px-1 px-2 px-3 px-4 px-5 px-6
padding-top and
py py-0 py-1 py-2 py-3 py-4 py-5 py-6

To use these classes, simply append them to any HTML element:

<!-- Adds 1rem of margin at the bottom -->
<p class="mb-4">
  Margin bottom

<!-- Adds 0.25rem of padding on the left and the right -->
<p class="px-1">
  Horizontal padding

<!-- Removes the margin on the right and adds 0.75rem padding at the top -->
<p class="mr-0 pt-3">

Configuration #

Because every developer has their own preferences, and to satisfy Bulma's customization features, it's possible to specify your own class name shortcuts as well as the spacing values.

For example, if you wanted:

  • margin to be abbreviated to mg
  • padding to be totally excluded
  • horizontal to be abbreviated to h
  • vertical to be excluded as well
  • and to only have 3 values: "small" at 10px, "medium" at 30px, and "large" at 60px

You can simplify the CSS output by customizing these SCSS variables:

$spacing-shortcuts: ("margin": "mg");
$spacing-horizontal: "h";
$spacing-vertical: null;
$spacing-values: ("small": 10px, "medium": 30px, "large": 60px);
Property Shortcut Classes ↓
Values → 10px 30px 60px
margin mg mg-small mg-medium mg-large
margin-top mgt mgt-small mgt-medium mgt-large
margin-right mgr mgr-small mgr-medium mgr-large
margin-bottom mgb mgb-small mgb-medium mgb-large
margin-left mgl mgl-small mgl-medium mgl-large
margin-left and
mgh mgh-small mgh-medium mgh-large

By customizing the output, you've narrowed down the list of spacing helpers from 84 to only 15.