You are viewing the deprecated 0.9.1 version of the website. Click here to view the latest version

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
*-00
*-10.25rem
*-20.5rem
*-30.75rem
*-41rem
*-51.5rem
*-63rem

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
margin-right
mx mx-0 mx-1 mx-2 mx-3 mx-4 mx-5 mx-6
margin-top and
margin-bottom
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
padding-right
px px-0 px-1 px-2 px-3 px-4 px-5 px-6
padding-top and
padding-bottom
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
</p>

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

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

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
margin-right
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.

Made with Bulma
This page is open source. Noticed a typo? Or something unclear?
Improve this page on GitHub

#native_company# #native_desc#
#native_cta#
New!

The official Bulma book! 😲

by Jeremy Thomas, creator of Bulma, Oleksii Potiekhin,
Mikko Lauhakari, Aslam Shah and David Berning

A step-by-step guide that teaches you how to build a web interface from scratch using Bulma.

Formats available:
PDF Epub Mobi
or
Kindle

Newsletter

Features, releases, showcase… stay in the loop!