Grid - gutters

Gutters are the gaps between columns. By default, columns side by side have a gap, and columns one below the other have none. On the row, gx-0 to gx-5 set the gaps between columns side by side, gy-0 to gy-5 the gaps between columns one below the other, and g-0 to g-5 both, from 0 for no gap to 5 for the widest. Gaps wider than gx-4 can make the page scroll sideways on phones. The gaps between columns side by side only show between boxes inside the columns, so give the box, not the column, a background or border.

Code

<div class="row gx-4 gy-3">
  <div class="col-6"><div class="p-3 border">Column</div></div>
  <div class="col-6"><div class="p-3 border">Column</div></div>
  <div class="col-6"><div class="p-3 border">Column</div></div>
  <div class="col-6"><div class="p-3 border">Column</div></div>
</div>

Result

Column