Use the Bootstrap’s Gaps utilitie to controlling the space between child elements.

Quick reference

Class	Properties
`.gap-0`	gap: 0;
`.gap-1`	gap: 0.25rem; /* 4px */
`.gap-2`	gap: 0.5rem; /* 8px */
`.gap-3`	gap: 0.75rem; /* 12px */
`.gap-4`	gap: 1rem; /* 16px */
`.gap-5`	gap: 1.25rem; /* 20px */
`.gap-6`	gap: 1.5rem; /* 24px */
`.gap-7`	gap: 1.75rem; /* 28px */
`.gap-8`	gap: 2rem; /* 32px */
`.gap-9`	gap: 2.25rem; /* 36px */
`.gap-10`	gap: 2.5rem; /* 40px */
`.gap-11`	gap: 2.75rem; /* 44px */
`.gap-12`	gap: 3rem; /* 48px */
`.gap-14`	gap: 3.5rem; /* 56px */
`.gap-16`	gap: 4rem; /* 64px */
`.gap-20`	gap: 5rem; /* 80px */
`.row-gap-0`	row-gap: 0;
`.row-gap-1`	row-gap: 0.25rem; /* 4px */
`.row-gap-2`	row-gap: 0.5rem; /* 8px */
`.row-gap-3`	row-gap: 0.75rem; /* 12px */
`.row-gap-4`	row-gap: 1rem; /* 16px */
`.row-gap-5`	row-gap: 1.25rem; /* 20px */
`.row-gap-6`	row-gap: 1.5rem; /* 24px */
`.row-gap-7`	row-gap: 1.75rem; /* 28px */
`.row-gap-8`	row-gap: 2rem; /* 32px */
`.row-gap-9`	row-gap: 2.25rem; /* 36px */
`.row-gap-10`	row-gap: 2.5rem; /* 40px */
`.row-gap-11`	row-gap: 2.75rem; /* 44px */
`.row-gap-12`	row-gap: 3rem; /* 48px */
`.row-gap-14`	row-gap: 3.5rem; /* 56px */
`.row-gap-16`	row-gap: 4rem; /* 64px */
`.row-gap-20`	row-gap: 5rem; /* 80px */
`.column-gap-0`	column-gap: 0;
`.column-gap-1`	column-gap: 0.25rem; /* 4px */
`.column-gap-2`	column-gap: 0.5rem; /* 8px */
`.column-gap-3`	column-gap: 0.75rem; /* 12px */
`.column-gap-4`	column-gap: 1rem; /* 16px */
`.column-gap-5`	column-gap: 1.25rem; /* 20px */
`.column-gap-6`	column-gap: 1.5rem; /* 24px */
`.column-gap-7`	column-gap: 1.75rem; /* 28px */
`.column-gap-8`	column-gap: 2rem; /* 32px */
`.column-gap-9`	column-gap: 2.25rem; /* 36px */
`.column-gap-10`	column-gap: 2.5rem; /* 40px */
`.column-gap-11`	column-gap: 2.75rem; /* 44px */
`.column-gap-12`	column-gap: 3rem; /* 48px */
`.column-gap-14`	column-gap: 3.5rem; /* 56px */
`.column-gap-16`	column-gap: 4rem; /* 64px */
`.column-gap-20`	column-gap: 5rem; /* 80px */

Basic usage

Add horizontal space between children

Control the horizontal space between elements using the column-gap-{amount} utilities.

01

02

03

<div class="d-flex column-gap-4 ...">
  <div>01</div>
  <div>02</div>
  <div>03</div>
</div>

Add vertical space between children

Control the vertical space between elements using the row-gap-{amount} utilities.

01

02

03

<div class="d-flex flex-column row-gap-4 ...">
  <div>01</div>
  <div>02</div>
  <div>03</div>
</div>

Reversing children order

Using the .flex-row-reverse utilite to reversing the children elements.

01

02

03

<div class="d-flex flex-row-reverse column-gap-4 ...">
  <div>01</div>
  <div>02</div>
  <div>03</div>
</div>

Breakpoints and media queries

All utilities that supports responsive at specific breakpoints, from xs to xxl, have no breakpoint abbreviation in them.

<div class="d-flex column-gap-4 column-gap-lg-6...">
  <div>01</div>
  <div>02</div>
  <div>03</div>
</div>

Edit this page on Github

Last updated on April 6, 2024