Gutters between columns

A gutter is the space between grid columns. By default it is 1.5rem horizontally and 0 vertically. The g-* classes on a row change this space so that cards do not stick together or, on the contrary, sit edge to edge.

Seeing the gutter

The gutter is made by the columns' padding. That is why the background and border go not on the column itself but on a block inside it:

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
 
<div class="container">
  <div class="row">
    <div class="col"><div class="border bg-light p-3">Tasks</div></div>
    <div class="col"><div class="border bg-light p-3">Projects</div></div>
  </div>
</div>

There is a 1.5rem strip between the blocks — the default gutter.

The g, gx and gy classes

The numbers are steps of the Bootstrap spacing scale: 0, 0.25rem, 0.5rem, 1rem, 1.5rem and 3rem.

A grid of cards

The vertical gutter matters when columns wrap onto new lines. Here is the features grid for the landing page:

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
 
<div class="container">
  <div class="row row-cols-2 g-4">
    <div class="col"><div class="border bg-light p-3">Task lists</div></div>
    <div class="col"><div class="border bg-light p-3">Deadlines</div></div>
    <div class="col"><div class="border bg-light p-3">Comments</div></div>
    <div class="col"><div class="border bg-light p-3">Reports</div></div>
  </div>
</div>

The g-4 class gives the same 1.5rem gap between columns and between rows. Remove it and the bottom row sticks to the top one.

No gutters

The g-0 class removes the gutters completely — this is how, for example, an image and text are put edge to edge:

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
 
<div class="container">
  <div class="row g-0 border">
    <div class="col-4 bg-primary text-white p-3">Tasko</div>
    <div class="col-8 p-3">Plan tasks with your whole team.</div>
  </div>
</div>

The blue block and the text touch without a gap.

Common mistake

Coloring the column itself and wondering why there is no gutter. The gutter is the column's padding, and the background fills it too, so the columns look merged. Put a styled block (later, a card) inside the column and keep the column for layout only.