Spacing
↕️↔️ 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.
<div>
This doesn't have margin.
</div>
<div class="mh-sm-auto">
📱 This element gets left + right auto-margin only on <strong>small</strong>.
</div>
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>.
</div>
| Variable |
Value |
|
4px |
|
8px |
|
16px |
|
24px |
|
32px |
|
36px |
|
40px |
|
48px |
|
56px |