Spacing

Bootstrap includes a wide range of shorthand responsive margin, padding, and gap utility classes to modify an element's appearance.

Padding

A wide range of shorthand responsive padding utility classes to modify an element's appearance.

.ps-4
.pt-4
.pb-4
.pe-4
.px-4
.py-4
														
<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)
Margin

A wide range of shorthand responsive margin utility classes to modify an element's appearance.

.ms-4
.ms-10
														
<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)
Gap

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).

Grid item 1
Grid item 2
Grid item 3
														
<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)