↕️↔️ All directions

Class Name Output Guideline
m-auto margin: auto; Used for centering an element
m-0x margin: 0;
m-1x margin: 4px; Used for spacing within buttons and between type and icons
m-2x margin: 8px; Used for spacing within buttons and between type and icons
m-3x margin: 16px; Used for spacing between buttons and between strings of text
m-4x margin: 24px; Used for spacing between elements within a container
m-5x margin: 32px; Used for spacing of page-level elements, usually between containers

↔️ Horizontal only

Class Name Output
mh-auto margin-left: auto;
margin-right: auto;
mh-0x margin-left: 0;
margin-right: 0;
mh-1x margin-left: 4px;
margin-right: 4px;
mh-2x margin-left: 8px;
margin-right: 8px;
mh-3x margin-left: 16px;
margin-right: 16px;
mh-4x margin-left: 24px;
margin-right: 24px;
mh-5x margin-left: 32px;
margin-right: 32px;

↕️ Vertical only

Class Name Output
mv-auto margin-top: auto;
margin-bottom: auto;
mv-0x margin-top: 0;
margin-bottom: 0;
mv-1x margin-top: 4px;
margin-bottom: 4px;
mv-2x margin-top: 8px;
margin-bottom: 8px;
mv-3x margin-top: 16px;
margin-bottom: 16px;
mv-4x margin-top: 24px;
margin-bottom: 24px;
mv-5x margin-top: 32px;
margin-bottom: 32px;

⬇️ Bottom only

Class Name Output
mb-auto margin-bottom: auto;
mb-0x margin-bottom: 0;
mb-1x margin-bottom: 4px;
mb-2x margin-bottom: 8px;
mb-3x margin-bottom: 16px;
mb-4x margin-bottom: 24px;
mb-5x margin-bottom: 32px;

⬅️ Left only

Class Name Output
ml-auto margin-left: auto;
ml-0x margin-left: 0;
ml-1x margin-left: 4px;
ml-2x margin-left: 8px;
ml-3x margin-left: 16px;
ml-4x margin-left: 24px;
ml-5x margin-left: 32px;

➡️ Right only

Class Name Output
mr-auto margin-right: auto;
mr-0x margin-right: 0;
mr-1x margin-right: 4px;
mr-2x margin-right: 8px;
mr-3x margin-right: 16px;
mr-4x margin-right: 24px;
mr-5x margin-right: 32px;

⬆️ Top only

Class Name Output
mt-auto margin-top: auto;
mt-0x margin-top: 0;
mt-1x margin-top: 4px;
mt-2x margin-top: 8px;
mt-3x margin-top: 16px;
mt-4x margin-top: 24px;
mt-5x margin-top: 32px;

📱🖥 Viewport specific

If you only need margin on a specific viewport size, then you can sandwich the modifier modifier in-between the direction and value.

Class Name Description
-sm Only applied to small viewports
-md Applied to medium and up viewports
-lg Applied to large and up viewports

Example use:

This doesn't have margin.
📱 This element gets left + right auto-margin only on small.
  This doesn't have margin.

<div class="mh-sm-auto">
  📱 This element gets left + right auto-margin only on <strong>small</strong>.
This element gets left + right auto-margin for all viewports.
<div class="mh-auto">
  This element gets left + right auto-margin for <strong>all viewports</strong>.
Variable Value