Gutter

Gutters are the padding between columns. Use .g-*, .gx-*, and .gy-* classes to control spacing.

Horizontal Gutters .gx-*

gx-5 col
gx-5 col
							<div class="row gx-5">
  <div class="col">...</div>
  <div class="col">...</div>
</div>

Vertical Gutters .gy-*

gy-4 col-6
gy-4 col-6
gy-4 col-6
gy-4 col-6
							<div class="row gy-4">
  <div class="col-6">...</div>
  <div class="col-6">...</div>
  <div class="col-6">...</div>
  <div class="col-6">...</div>
</div>

Combined Gutters .g-*

g-2 col-6
g-2 col-6
g-2 col-6
g-2 col-6
							<div class="row g-2">
  <div class="col-6">...</div>
  <div class="col-6">...</div>
</div>

No Gutters .g-0

col-4
col-4
col-4
							<div class="row g-0">
  <div class="col-4">...</div>
  <div class="col-4">...</div>
  <div class="col-4">...</div>
</div>

Responsive Gutters

col-6
col-6
col-6
col-6
							<div class="row g-1 g-md-3 g-lg-5">
  <div class="col-6">...</div>
  <div class="col-6">...</div>
</div>

Gutter Sizes Reference

Class Size Direction
.g-0 0 Both
.g-1 0.25rem Both
.g-2 0.5rem Both
.g-3 1rem Both
.g-4 1.5rem Both
.g-5 3rem Both
.gx-* 0–5 Horizontal
.gy-* 0–5 Vertical