Spacings

Default

Use spacing utilities to apply margin or padding to elements.

The default scale provides whole and half steps from 0 through 5. Decimal class suffixes keep their dot, while the corresponding CSS variable uses a hyphen so it remains a valid custom property name.

<div class="p-1 bg-primary rounded">p-1</div>
<div class="p-1.5 bg-primary rounded">p-1.5</div>
<div class="p-2 bg-primary rounded">p-2</div>
<div class="p-2.5 bg-primary rounded">p-2.5</div>
<div class="p-3 bg-primary rounded">p-3</div>
<div class="p-3.5 bg-primary rounded">p-3.5</div>

Margin

Apply margin to all sides of an element.

<div class="m-1 p-2 bg-primary rounded">m-1</div>
<div class="m-2 p-2 bg-primary rounded">m-2</div>
<div class="m-3 p-2 bg-primary rounded">m-3</div>

Padding

Apply padding to all sides of an element.

<div class="p-1 bg-primary rounded">p-1</div>
<div class="p-2 bg-primary rounded">p-2</div>
<div class="p-3 bg-primary rounded">p-3</div>

Directions

Apply margin or padding to a specific direction.

<div class="mt-3 p-2 bg-primary rounded">mt-3</div>
<div class="me-3 p-2 bg-primary rounded">me-3</div>
<div class="mb-3 p-2 bg-primary rounded">mb-3</div>
<div class="ms-3 p-2 bg-primary rounded">ms-3</div>

Axis

Apply spacing to the horizontal or vertical axis.

<div class="mx-3 p-2 bg-primary rounded">mx-3</div>
<div class="my-3 p-2 bg-primary rounded">my-3</div>
<div class="px-3 bg-primary rounded">px-3</div>
<div class="py-3 bg-primary rounded">py-3</div>

Auto margins

Use auto margin utilities to align elements.

<div class="mx-auto p-2 bg-primary rounded w-50">mx-auto w-50</div>

Child spacing

Use space-x-* or space-y-* when direct siblings need spacing without changing the container’s layout mode. The utilities apply logical start margins, so horizontal spacing follows the writing direction. A margin utility on an individual child can override the generated sibling margin.

<div class="d-flex space-x-1.5">
	<span>First</span>
	<span>Second</span>
	<span>Third</span>
</div>

<div class="space-y-2.5">
	<div>First</div>
	<div>Second</div>
	<div>Third</div>
</div>

Responsive variants

Use responsive margin, padding, gap and child-spacing utilities to change spacing at different breakpoints.

<div class="p-2 p-md-3 p-lg-4 bg-primary rounded">p-2 p-md-3 p-lg-4</div>
<div class="d-flex gap-1.5 gap-md-2.5">Responsive gap</div>
<div class="space-y-1.5 space-y-md-2.5">Responsive child spacing</div>

Customize the spacing scale

Spacing utilities and components use the same --spacer-* runtime tokens. Override a token on :root to change that spacing level globally, or scope the override to an ancestor to customize only one part of the page. Base and responsive margin, padding and gap utilities all follow the nearest matching token, as do space-x-* and space-y-*.

:root {
	--spacer-3: 1.25rem;
	--spacer-2-5: 0.875rem;
}

.compact-panel {
	--spacer-3: 0.75rem;
}

<div class="d-flex p-3 gap-3">Uses the global spacer</div>
<div class="compact-panel">
	<div class="d-flex p-2 p-md-3 gap-2 gap-md-3">Uses the locally scoped spacer from md</div>
</div>

Custom entries added to the Sass spacings theme map generate matching --spacer-* tokens and utility classes. Each utility retains its Sass value as a fallback when its partial is imported without variables.scss. A decimal map key such as 2.5 generates classes such as .p-2.5 and the valid custom property --spacer-2-5.

Examples

Combine spacing utilities with layout utilities.

<div class="d-flex flex-column gap-2">
	<div class="p-2 bg-primary rounded">Item 1</div>
	<div class="p-2 bg-primary rounded">Item 2</div>
	<div class="p-2 bg-primary rounded">Item 3</div>
</div>