Home Get Started Examples

Spacing

displayn/a positionn/a z-indexn/a font-size scalingn/a breakpointsyes

Class list

  • .m-(level)
  • .mt-(level)
  • .mb-(level)
  • .ml-(level)
  • .mr-(level)
  • .mx-(level)
  • .my-(level)
  • .m-(level)-(breakpoint)
  • .mt-(level)-(breakpoint)
  • .mb-(level)-(breakpoint)
  • .ml-(level)-(breakpoint)
  • .mr-(level)-(breakpoint)
  • .mx-(level)-(breakpoint)
  • .my-(level)-(breakpoint)
  • .mx-auto
  • .p-(level)
  • .pt-(level)
  • .pb-(level)
  • .pl-(level)
  • .pr-(level)
  • .px-(level)
  • .py-(level)
  • .p-(level)-(breakpoint)
  • .pt-(level)-(breakpoint)
  • .pb-(level)-(breakpoint)
  • .pl-(level)-(breakpoint)
  • .pr-(level)-(breakpoint)
  • .px-(level)-(breakpoint)
  • .py-(level)-(breakpoint)

Description

In the above classes m stands for margin, and p stands for padding.

t stands for top, b stands for bottom, l stands for left, r stands for right, x stands for the x axis, and y stands for the y axis.

The values that can be plugged into (level) as seen above are determined by the $SPACING_LEVELS global variable, which Sandbox defaults to a value of 4. This means that the values 1, 2, 3, 4 could be plugged into (level). If you set $SPACING_LEVELS to 6 and ran a build, the values 1 - 6 could be plugged in.

A non integer value that can be plugged into (level), regardless of what $SPACING_LEVELS value is used, is half. Each of these values is a multiplier on the global $UNIT_SPACING value which is used.

As always, the values that can be plugged into (breakpoint) are any of the breakpoint suffixes: sm, md, lg.

Example

Reduce the width of your browser to see the example in action.

<div class="clearfix b mb-2">
    <div class="p-1 p-half-sm p-3-lg danger to-left"></div>
    <div class="p-1 m-1 m-half-sm m-3-lg dark to-right"></div>
</div>

Margin x auto

Use the .mx-auto class on a block level element with a fixed width to center it along the x axis of its parent.

<div class="danger mx-auto mb-2" style="width: 5rem; height: 5rem;"></div>
previous next