The Complete Guide to Bootstrap’s Gap Class (Columns and Rows)

Bootstrap has a special class called gap that can be used when you apply display: table to a containing div. It adds gap and grid-gap CSS values to the div which spaces any child elements.

Here’s what we will build in this tutorial:

This grid is simple, but we will use it to explore the DOM and understand Bootstrap gap more deeply. We will examine how the gap property adds spaces between columns and rows.

How Bootstrap Gap Works

Bootstrap’s gap class must be used on elements that also have display: grid set on them. This applies CSS Grid Layout to the containing div, which then can support CSS gap properties.

The Grid layout informs the browser exactly how many rows and columns there will be in a grid. These do not have to be symmetrical.

The gap property then adds spacing known as gutters between each row and column. This isn’t the same as padding or margin. Padding and margin are a part of each div, while gutters are outside the div. The gutters are owned by the parent grid div.

In Bootstrap, gap is set using a class such as gap-0, gap-1, all the way to gap-5. The higher the number, the bigger the gutter.

How Bootstrap Gap Class Renders in the DOM

In my example grid I applied gap-4 to the wrapping grid div.

I mentioned in the previous section that gap is owned by the parent. We can see the evidence of that when we select a child div in the grid:

Notice that when the div is selected it shows no ownership of the spacing outside itself.

If we highlight the parent div, we can see that it owns the gutters:

Notice also that the Bootstrap gap-4 class applies both grid-gap and gap to the wrapping div. The grid-gap property is redundant in my example. The gap property equally applies both row-gap and column-gap.

If you want only row-gap or only column-gap, you will have to create your own class for that.

Custom Bootstrap Gap Between Columns or Rows

We can customize the Bootstrap gap class by updating Bootstrap’s $utilities map. In the code below I made all the gap classes have larger rem values:

//CustomGridGap.scss file

$utilities: (
  "gap": (
    property: gap,
    class: gap,
    values: (
      0: 0,
      1: 1rem,
      2: 2rem,
      3: 3rem,
      4: 4rem,
      5: 5rem,

      6: 6rem
    )
  )
);

I also added a new value, gap-6.

In the previous section, I mentioned there are no row-gap or column-gap classes. However, we can create these and add them to the $utilities map:

$utilities: (
  "xgap": (
    property: row-gap,
    class: xgap,
    values: (
      0: 0,
      1: 1rem,
      2: 2rem,
      3: 3rem,
      4: 4rem,
      5: 5rem,
      6: 6rem
    )
  ),
"ygap": (
    property: column-gap,
    class: ygap,
    values: (
      0: 0,
      1: 1rem,
      2: 2rem,
      3: 3rem,
      4: 4rem,
      5: 5rem,
      6: 6rem
    )
  )
);

Now I can use the xgap classes (i.e. xgap-2) in my grid:

And here’s the ygap class adding custom space between my columns in Bootstrap:

Resources

If you need margin instead of grid gap then check out this tutorial.

Here is full code for this tutorial:

//CustomGridGap.tsx

import React from "react";
import "./CustomGridGap.scss";

export default function CustomGridGap() {
  return (
    <div className="d-grid ygap-2 grid-layout p-2">
      <div className="p-3 bg-secondary text-center">Item 1</div>
      <div className="p-3 bg-secondary text-center">Item 2</div>
      <div className="p-3 bg-secondary text-center">Item 3</div>
      <div className="p-3 bg-secondary text-center">Item 4</div>
      <div className="p-3 bg-secondary text-center">Item 5</div>
      <div className="p-3 bg-secondary text-center">Item 6</div>
      <div className="p-3 bg-secondary text-center">Item 7</div>
      <div className="p-3 bg-secondary text-center">Item 8</div>
      <div className="p-3 bg-secondary text-center">Item 9</div>
    </div>
  );
}

//CustomGridGap.scss

.grid-layout {
  grid-template-columns: auto auto auto;
}

$utilities: (
  "gap": (
    property: gap,
    class: gap,
    values: (
      0: 0,
      1: 1rem,
      2: 2rem,
      3: 3rem,
      4: 4rem,
      5: 5rem,
      6: 6rem
    )
  ),
  "xgap": (
    property: row-gap,
    class: xgap,
    values: (
      0: 0,
      1: 1rem,
      2: 2rem,
      3: 3rem,
      4: 4rem,
      5: 5rem,
      6: 6rem
    )
  ),
  "ygap": (
    property: column-gap,
    class: ygap,
    values: (
      0: 0,
      1: 1rem,
      2: 2rem,
      3: 3rem,
      4: 4rem,
      5: 5rem,
      6: 6rem
    )
  )
);

@import "bootstrap/scss/bootstrap";