Answer»
Bootstrap includes a wide range of shorthand responsive margin, padding, and gap utility classes to modify an element’s appearance.
| m-1 / m-*-# | spaced div tags with margin on all sides; star ranges from 0 space to 6 spaces. |
<div class="m-4 bg-success d-inline-block">div with 4 spaces</div> |
|---|
| mt-1 / mt-*-# | the margin on top. |
<div class="mt-3 bg-warning d-inline-block">Spaced top margin</div> |
|---|
| mr-1 / mr-*-# | the margin on right. |
<div class="mr-3 bg-warning d-inline-block">Spaced right margin</div> |
|---|
| mb-1 / mb-*-# | bottom margin. |
<div class="mb-3 bg-warning d-inline-block">Spaced bottom margin</div> |
|---|
| ml-1 / ml-*-# | left margin. |
<div class="mx-3 bg-primary d-inline-block">Spaced x axis margin</div> |
|---|
| mx-1 / mx-*-# | left and right (x-axis) margin. |
<div class="mx-3 bg-primary d-inline-block">Spaced x axis margin</div> |
|---|
| my-1 / my-*-# | top and bottom (y-axis) margin. |
<div class="my-3 bg-primary d-inline-block">Spaced y axis margin</div> |
|---|
| m-n1 / m-*-n# | negative spacing (change of direction) – can be any of the above – left, right, top, bottom, x, y. |
<div class="m-n5 bg-primary d-inline-block">Negative spacing</div> |
|---|
| p-1 / p-*-# | padding on all sides. |
<div class="pt-3 bg-danger d-inline-block">Padding on top with box size 3</div> |
|---|
| pt-1 / pt-*-# | padding on top. |
<div class="pt-3 bg-danger d-inline-block">Padding on top with box size 3</div> |
|---|
| pr-1 / pr-*-# | padding on right. |
<div class="pr-3 bg-danger d-inline-block">Padding on right with box size 3</div> |
|---|
| pb-1 / pb-*-# | padding on bottom. |
<div class="pb-3 bg-danger d-inline-block">Padding on bottom with box size 3</div> |
|---|
| pl-1 / pl-*-# | padding on left. |
<div class="pl-3 bg-danger d-inline-block">Padding on left with box size 3</div> |
|---|
| px-1 / px-*-# | padding on left and right (x-axis). |
<div class="px-3 bg-danger d-inline-block">Padding on left and right with box size 3</div> |
|---|
| py-1 / py-*-# | padding on top and bottom (y-axis). |
<div class="py-3 bg-danger d-inline-block">Padding on top and bottom with box size 3</div> |
|---|
|
