What this Bootstrap Utility API class does
Set the CSS gap property of an element. The CSS gap property is used to set the space between rows and columns in a grid or between flex items in a flex container. It specifies the size of the gap between the elements within a container.
The gap property is a shorthand for the row-gap and column-gap properties, which are used to set the gap between rows and columns separately. When using gap, the value is applied to both the row and column gaps.
Use this utility when you have set the display property of the same element to grid. The gap property will control the spacing between child items of the element. Note that the available options are based on the Bootstrap SASS map $spacers.
Example usage & available classes
<div class="d-grid gap-0">
<div class="p-2 bg-light border">Grid item 1</div>
<div class="p-2 bg-light border">Grid item 2</div>
<div class="p-2 bg-light border">Grid item 3</div>
</div>
<div class="d-grid gap-1">
<div class="p-2 bg-light border">Grid item 1</div>
<div class="p-2 bg-light border">Grid item 2</div>
<div class="p-2 bg-light border">Grid item 3</div>
</div>
<div class="d-grid gap-2">
<div class="p-2 bg-light border">Grid item 1</div>
<div class="p-2 bg-light border">Grid item 2</div>
<div class="p-2 bg-light border">Grid item 3</div>
</div>
<div class="d-grid gap-3">
<div class="p-2 bg-light border">Grid item 1</div>
<div class="p-2 bg-light border">Grid item 2</div>
<div class="p-2 bg-light border">Grid item 3</div>
</div>
<div class="d-grid gap-4">
<div class="p-2 bg-light border">Grid item 1</div>
<div class="p-2 bg-light border">Grid item 2</div>
<div class="p-2 bg-light border">Grid item 3</div>
</div>
<div class="d-grid gap-5">
<div class="p-2 bg-light border">Grid item 1</div>
<div class="p-2 bg-light border">Grid item 2</div>
<div class="p-2 bg-light border">Grid item 3</div>
</div>Example override
In the example override below, we are removing the responsive option from the utility, which means it would not be available per breakpoint.
"gap": map-merge(
map-get($utilities, "gap"),
(
responsive: false
)
)