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";