Gap

Overview

Use gap utilities to control the space between children in flexbox and grid layouts. Gap utilities are built from a default Sass map ranging from 0 to 3rem (.gap-0 through .gap-9). Use utilities like .gap-3 and .gap-5 to control the gap between all children:

<div class="d-flex gap-3">...</div>
<div class="d-flex gap-5">...</div>

Notation

Gap 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}-{size} for xs and {breakpoint}:{property}-{size} for sm, md, lg, xl, and 2xl.

Where property is one of:

• gap - for classes that set gap
• row-gap - for classes that set row-gap
• column-gap - for classes that set column-gap

Where size is one of:

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

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

Examples

Flexbox gap

Use gap utilities to control the space between children in a flexbox container:

<div class="d-flex gap-4">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</div>

Grid gap

Gap utilities also work with CSS Grid layouts:

<div class="d-grid gap-3" style="grid-template-columns: 1fr 1fr;">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
  <div>Item 4</div>
</div>

Row and column gaps

Use row-gap and column-gap utilities to control the space between rows and columns independently:

<div class="d-grid row-gap-4 column-gap-2" style="grid-template-columns: 1fr 1fr 1fr;">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
  <div>Item 4</div>
  <div>Item 5</div>
  <div>Item 6</div>
</div>

Flexbox with wrapping

You can also use row-gap and column-gap utilities with flexbox layouts that wrap:

<div class="d-flex flex-wrap row-gap-3 column-gap-2">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
  <div>Item 4</div>
  <div>Item 5</div>
</div>

Responsive

All gap utilities are responsive and include all breakpoints.

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

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

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

CSS

Sass utilities API

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

"gap": (
  responsive: true,
  property: gap,
  class: gap,
  values: $spacers
),
"row-gap": (
  responsive: true,
  property: row-gap,
  class: row-gap,
  values: $spacers
),
"column-gap": (
  responsive: true,
  property: column-gap,
  class: column-gap,
  values: $spacers
),