Gutters are padding between columns in row, this property applies to row to make equal spaces between call columns.
Gutters class is g-* (here * is from 1 to 5)
Example
Example with gutter g-3
<div class="container">
<div class="row g-3">
<div class="col">
<div class="p-3 border bg-light">Custom column padding</div>
</div>
<div class="col">
<div class="p-3 border bg-light">Custom column padding</div>
</div>
</div>
</div>
Devices Breakpoint
Gutters are also divided into media query break points, sm, md, lg, xl, xxl
- g-sm-*
- g-md-*
- g-lg-*
- g-xl-*
- g-xxl-*
here * is from 1 to 5
Vertical or Horizontal Gutters
Gutters are divided in to horizontal padding or verticall padding
- gx-*
- gy-*
- gx-sm-*
- gx-md-*
- gx-lg-*
- gx-xl-*
- gx-xxl-*
- gy-sm-*
- gy-md-*
- gy-lg-*
- gy-xl-*
- gy-xxl-*
No gutters
If you do not want to apply gutters then you use g-0 class
<div class="row g-0">
<div class="col">.col</div>
<div class="col">.col</div>
</div>
