Padding

Overview

Use padding utilities to control the inner space within elements. Padding utilities are built from a default Sass map ranging from .25rem to 3rem. 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 abbreviation 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 abbreviation.

The classes are named using the format {property}{sides}-{size} for xs and {property}{sides}-{breakpoint}-{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-top
• b - for classes that set padding-bottom
• s - (start) for classes that set padding-left in LTR, padding-right in RTL
• e - (end) for classes that set padding-right in LTR, padding-left in RTL
• x - for classes that set both *-left and *-right
• y - for classes that set both *-top and *-bottom
• 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
• 4 - (by default) for classes that set the padding to $spacer * 1.5
• 5 - (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-5
• .p-sm-0 through .p-sm-5
• .p-md-0 through .p-md-5
• .p-lg-0 through .p-lg-5
• .p-xl-0 through .p-xl-5
• .p-2xl-0 through .p-2xl-5

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-right padding-left,
  class: px,
  values: $spacers
),
"padding-y": (
  responsive: true,
  property: padding-top padding-bottom,
  class: py,
  values: $spacers
),
"padding-top": (
  responsive: true,
  property: padding-top,
  class: pt,
  values: $spacers
),
"padding-end": (
  responsive: true,
  property: padding-right,
  class: pe,
  values: $spacers
),
"padding-bottom": (
  responsive: true,
  property: padding-bottom,
  class: pb,
  values: $spacers
),
"padding-start": (
  responsive: true,
  property: padding-left,
  class: ps,
  values: $spacers
),