Margin Values
Margin Positions
.ml-4
.ml-7
| Class | Description |
|---|---|
class="m-1" |
Add Margin all sides to element. |
class="ml-1" |
Add Margin left side to element. |
class="mr-1" |
Add Margin right side to element. |
class="mt-1" |
Add Margin top side to element. |
class="mb-1" |
Add Margin bottom side to element. |
class="mx-1" |
Add Margin horizonatl sides to element. |
class="my-1" |
Add Margin vertical sides to element. |
Margin values
| Class | Description |
|---|---|
class="m-1" |
Add margin m-1 to element. |
class="m-2" |
Add margin m-2 to element. |
class="m-3" |
Add margin m-3 to element. |
class="m-4" |
Add margin m-4 to element. |
class="m-5" |
Add margin m-5 to element. |
class="m-6" |
Add margin m-6 to element. |
class="m-7" |
Add margin m-7 to element. |
class="m-8" |
Add margin m-8 to element. |
Remove Margin
| Class | Description |
|---|---|
class="m-0" |
Remove margin all sides to element. |
class="ml-0" |
Remove margin left side to element. |
class="mr-0" |
Remove margin right side to element. |
class="mt-0" |
Remove margin top side to element. |
class="mb-0" |
Remove margin bottom side to element. |
class="mx-0" |
Remove margin horizonatl sides to element. |
class="my-0" |
Remove margin vertical sides to element. |
Media Query margins
| Class | Value |
|---|---|
.mt-[size]-[value]
.mb-[size]-[value]
.mr-[size]-[value]
.ml-[size]-[value]
|
size: xs | sm | md | lg | xl value: the padding value (refer to code above) |