Padding

Overview

Use padding utilities to control the inner space within elements. Padding utilities are built from a default Sass map ranging from 0 to 3rem (.p-0 through .p-9). Use utilities like .p-3 and .p-5 to control the padding on all sides of an element:

<div class="p-3">.p-3</div>
<div class="p-5">.p-5</div>

Notation

Padding utilities that apply to all breakpoints, from xs to 2xl, have no breakpoint prefix in them. This is because those classes are applied from min-width: 0 and up, and thus are not bound by a media query. The remaining breakpoints, however, do include a breakpoint prefix.

The classes are named using the format {property}{sides}-{size} for xs and {breakpoint}:{property}{sides}-{size} for sm, md, lg, xl, and 2xl.

Where property is:

• p - for classes that set padding

Where sides is one of:

• t - for classes that set padding-block-start
• b - for classes that set padding-block-end
• s - (start) for classes that set padding-inline-start
• e - (end) for classes that set padding-inline-end
• x - for classes that set padding-inline
• y - for classes that set padding-block
• blank - for classes that set a padding on all 4 sides of the element

Where size is one of:

• 0 - for classes that eliminate the padding by setting it to 0
• 1 - (by default) for classes that set the padding to $spacer * .25
• 2 - (by default) for classes that set the padding to $spacer * .5
• 3 - (by default) for classes that set the padding to $spacer * .75
• 4 - (by default) for classes that set the padding to $spacer
• 5 - (by default) for classes that set the padding to $spacer * 1.25
• 6 - (by default) for classes that set the padding to $spacer * 1.5
• 7 - (by default) for classes that set the padding to $spacer * 2
• 8 - (by default) for classes that set the padding to $spacer * 2.5
• 9 - (by default) for classes that set the padding to $spacer * 3

(You can add more sizes by adding entries to the $spacers Sass map variable.)

Examples

Single side

Use utilities like .pt-4, .pe-4, .pb-4, and .ps-4 to control the padding on one side of an element:

<div class="pt-4">.pt-4</div>
<div class="pe-4">.pe-4</div>
<div class="pb-4">.pb-4</div>
<div class="ps-4">.ps-4</div>

Horizontal padding

Use utilities like .px-3 and .px-5 to control the horizontal padding of an element:

<div class="px-3">.px-3</div>
<div class="px-5">.px-5</div>

Vertical padding

Use utilities like .py-3 and .py-5 to control the vertical padding of an element:

<div class="py-3">.py-3</div>
<div class="py-5">.py-5</div>

Responsive

All padding utilities are responsive and include all breakpoints.

• .p-0 through .p-9
• .sm:p-0 through .sm:p-9
• .md:p-0 through .md:p-9
• .lg:p-0 through .lg:p-9
• .xl:p-0 through .xl:p-9
• .2xl:p-0 through .2xl:p-9

CSS

Sass utilities API

Padding utilities are declared in our utilities API in scss/_utilities.scss. Learn how to use the utilities API.

"padding": (
  responsive: true,
  property: padding,
  class: p,
  values: $spacers
),
"padding-x": (
  responsive: true,
  property: padding-inline,
  class: px,
  values: $spacers
),
"padding-y": (
  responsive: true,
  property: padding-block,
  class: py,
  values: $spacers
),
"padding-top": (
  responsive: true,
  property: padding-block-start,
  class: pt,
  values: $spacers
),
"padding-end": (
  responsive: true,
  property: padding-inline-end,
  class: pe,
  values: $spacers
),
"padding-bottom": (
  responsive: true,
  property: padding-block-end,
  class: pb,
  values: $spacers
),
"padding-start": (
  responsive: true,
  property: padding-inline-start,
  class: ps,
  values: $spacers
),