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 .25rem to 3rem. 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 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}-{size} for xs and {property}-{breakpoint}-{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
• 4 - (by default) for classes that set the gap to $spacer * 1.5
• 5 - (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-5
• .gap-sm-0 through .gap-sm-5
• .gap-md-0 through .gap-md-5
• .gap-lg-0 through .gap-lg-5
• .gap-xl-0 through .gap-xl-5
• .gap-2xl-0 through .gap-2xl-5

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

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

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