↕️↔️ All directions
Class Name | Output | Guideline |
---|
m-auto | margin: auto; | Used for centering an element |
m-0x | margin: 0; | |
m-1x | margin: 0.25rem; | Used for spacing within buttons and between type and icons |
m-2x | margin: 0.5rem; | Used for spacing within buttons and between type and icons |
m-3x | margin: 1rem; | Used for spacing between buttons and between strings of text |
m-4x | margin: 1.5rem; | Used for spacing between elements within a container |
m-5x | margin: 2rem; | 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: 0.25rem;
margin-right: 0.25rem; |
mh-2x | margin-left: 0.5rem;
margin-right: 0.5rem; |
mh-3x | margin-left: 1rem;
margin-right: 1rem; |
mh-4x | margin-left: 1.5rem;
margin-right: 1.5rem; |
mh-5x | margin-left: 2rem;
margin-right: 2rem; |
↕️ 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: 0.25rem;
margin-bottom: 0.25rem; |
mv-2x | margin-top: 0.5rem;
margin-bottom: 0.5rem; |
mv-3x | margin-top: 1rem;
margin-bottom: 1rem; |
mv-4x | margin-top: 1.5rem;
margin-bottom: 1.5rem; |
mv-5x | margin-top: 2rem;
margin-bottom: 2rem; |
⬇️ Bottom only
Class Name | Output |
---|
mb-auto | margin-bottom: auto; |
mb-0x | margin-bottom: 0; |
mb-1x | margin-bottom: 0.25rem; |
mb-2x | margin-bottom: 0.5rem; |
mb-3x | margin-bottom: 1rem; |
mb-4x | margin-bottom: 1.5rem; |
mb-5x | margin-bottom: 2rem; |
⬅️ Left only
Class Name | Output |
---|
ml-auto | margin-left: auto; |
ml-0x | margin-left: 0; |
ml-1x | margin-left: 0.25rem; |
ml-2x | margin-left: 0.5rem; |
ml-3x | margin-left: 1rem; |
ml-4x | margin-left: 1.5rem; |
ml-5x | margin-left: 2rem; |
➡️ Right only
Class Name | Output |
---|
mr-auto | margin-right: auto; |
mr-0x | margin-right: 0; |
mr-1x | margin-right: 0.25rem; |
mr-2x | margin-right: 0.5rem; |
mr-3x | margin-right: 1rem; |
mr-4x | margin-right: 1.5rem; |
mr-5x | margin-right: 2rem; |
⬆️ Top only
Class Name | Output |
---|
mt-auto | margin-top: auto; |
mt-0x | margin-top: 0; |
mt-1x | margin-top: 0.25rem; |
mt-2x | margin-top: 0.5rem; |
mt-3x | margin-top: 1rem; |
mt-4x | margin-top: 1.5rem; |
mt-5x | margin-top: 2rem; |
📱🖥 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.
Expand
Copy<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.
Copy<div class="mh-auto">
This element gets left + right auto-margin for <strong>all viewports</strong>.
</div>
Variable | Value |
---|
| 0rem |
| 0.25rem |
| 0.5rem |
| 1rem |
| 1.5rem |
| 2rem |
| 2.5rem |
| 3rem |
| 4rem |
| 5rem |
| 6rem |
| 8rem |
| 10rem |
↕️↔️ 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.
Expand
Copy<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.
Copy<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 |