Gap
Utilities for setting the spacing between rows and columns.
|
Class
|
Properties
|
|---|---|
| gap-0 | |
| gap-1 | |
| gap-2 | |
| gap-3 | |
| gap-4 | |
| gap-5 | |
| gap-6 | |
| gap-7 | |
| gap-8 | |
| gap-10 | |
| gap-12 | |
| gap-16 | |
| gap-20 | |
| gap-24 | |
| gap-32 | |
| gap-40 | |
| gap-48 | |
| gap-56 | |
| gap-64 | |
| gap-72 | |
| gap-80 | |
| gap-88 | |
| gap-96 | |
| gap-px |
Usaging with Flex
When using display: grid or display: flex, you can make use of gap utilities on the parent grid container. This can save on having to add margin utilities to individual grid items. Gap utilities are responsive by default, and are generated via our utilities API, based on the $spacers Sass map.
col
col
col
<div class="d-flex gap-8">
<div class="flex-fill">...</div>
<div class="flex-fill">...</div>
<div class="flex-fill">...</div>
</div>
Usaging with Grid
col
col
col
<div class="d-grid gap-8">
<div>...</div>
<div>...</div>
<div>...</div>
</div>
Responsive
Responsive variations also exist for each gap value. Use the .gap-{breakpoint}-{value} for sm, md, lg, xl, and xxl to any existing gap utility.
<div class="gap-8 gap-md-16 ..."></div>