Bootstrap includes a wide range of shorthand responsive margin, padding, and gap utility classes to modify an element's appearance.
A wide range of shorthand responsive padding utility classes to modify an element's appearance.
<div class="bg-grey-light-3 ps-4">
<div class="w-100p h-100p bg-grey-light-4">
<div class="d-flex justify-content-center align-items-center h-100 w-100">.ps-4</div>
</div>
</div>
<div class="bg-grey-light-3 pt-4">
<div class="w-100p h-100p bg-grey-light-4">
<div class="d-flex justify-content-center align-items-center h-100 w-100">.pt-4</div>
</div>
</div>
<div class="bg-grey-light-3 pb-4">
<div class="w-100p h-100p bg-grey-light-4">
<div class="d-flex justify-content-center align-items-center h-100 w-100">.pb-4</div>
</div>
</div>
<div class="bg-grey-light-3 pe-4">
<div class="w-100p h-100p bg-grey-light-4">
<div class="d-flex justify-content-center align-items-center h-100 w-100">.pe-4</div>
</div>
</div>
<div class="bg-grey-light-3 px-4">
<div class="w-100p h-100p bg-grey-light-4">
<div class="d-flex justify-content-center align-items-center h-100 w-100">.px-4</div>
</div>
</div>
<div class="bg-grey-light-3 py-4">
<div class="w-100p h-100p bg-grey-light-4">
<div class="d-flex justify-content-center align-items-center h-100 w-100">.py-4</div>
</div>
</div>
Class | Values |
---|---|
class="p-[value]"
class="ps-[value]"
class="pt-[value]"
class="pb-[value]"
class="pe-[value]"
class="px-[value]"
class="py-[value]"
class="p-[size]-[value]"
class="ps-[size]-[value]"
class="pt-[size]-[value]"
class="pb-[size]-[value]"
class="pe-[size]-[value]"
class="px-[size]-[value]"
class="py-[size]-[value]"
|
1 / 2 / 3 / 4 / 5 ... / 160 (step of 1) |
A wide range of shorthand responsive margin utility classes to modify an element's appearance.
<div class="bg-grey-light-2 ms-4 mb-4">
<div class="w-100p h-100p bg-grey-light-4">
<div class="d-flex justify-content-center align-items-center h-100 w-100">.ms-4</div>
</div>
</div>
<div class="bg-grey-light-2 ms-10 mb-4">
<div class="w-100p h-100p bg-grey-light-4">
<div class="d-flex justify-content-center align-items-center h-100 w-100">.ms-10</div>
</div>
</div>
Class | Values |
---|---|
class="m-[value]"
class="ms-[value]"
class="mt-[value]"
class="mb-[value]"
class="me-[value]"
class="mx-[value]"
class="my-[value]"
class="m-[size]-[value]"
class="ms-[size]-[value]"
class="mt-[size]-[value]"
class="mb-[size]-[value]"
class="me-[size]-[value]"
class="mx-[size]-[value]"
class="my-[size]-[value]"
|
1 / 2 / 3 / 4 / 5 ... / 160 (step of 1) |
When using display: grid,
you can make use of gap utilities on the parent grid container. This can save on having to add margin utilities to individual grid items (children of a display: grid container).
<div class="d-grid gap-3">
<div class="p-2 bg-grey-light-4">Grid item 1</div>
<div class="p-2 bg-grey-light-4">Grid item 2</div>
<div class="p-2 bg-grey-light-4">Grid item 3</div>
</div>
Class | Values |
---|---|
class="gap-[value]" |
>1 / 2 / 3 / 4 ... / 7 (step of 1) |