1. Home
  2. Examples
  3. Spacing

Generic Spacing Classes

Assign margin or padding to an element or a subset of it’s sides with shorthand classes. Includes support for individual properties, all properties, vertical only and horizontal only properties.

Naming Convention

The naming convention used can be broken down into three parts.

Part 1: can be m or p and relates to Margin or Padding respectivly.

Part 2: corolates to the margin or padding position.

  • a = All
  • t = Top
  • r = Right
  • b = Bottom
  • l = Left
  • x = x axis or Left & Right
  • y = y axis or Top & Bottom

Part 3: refers to how much padding or margin an element receives and is based on multiples of the base font size. (Currently 16px) It can have the following arguments 0 = None, md = x1.5, lg = x3

<ul class="list-unstyled m-x-md m-b-md">

This code sample illustrates the spacing classes used in the Part 2 unordered list above. m-x-md defines a medium margin for the left and right axis. m-b-md is setting the bottom margin to a medium height.