BootstrapHow-ToBeginner · 4 min read

How to Use Gutter in Bootstrap for Spacing Between Columns

In Bootstrap, you use gutter classes like g-0 to g-5 on .row to control the space between columns. These classes adjust horizontal and vertical spacing easily without custom CSS.

📐

Syntax

Bootstrap uses gutter classes on the .row element to set spacing between columns. The syntax is g-{size}, where {size} is a number from 0 to 5 representing the gutter size.

g-0: No gutter (no space)
g-1 to g-5: Increasing gutter sizes

You can also control horizontal and vertical gutters separately using gx-{size} for horizontal and gy-{size} for vertical spacing.

html

<div class="row g-3">
  <div class="col bg-primary text-white">Column 1</div>
  <div class="col bg-secondary text-white">Column 2</div>
</div>

Output

Two columns side by side with moderate spacing between them horizontally and vertically.

💻

Example

This example shows a row with three columns using g-4 to add a larger gutter space between columns. The columns have background colors to highlight the spacing.

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Bootstrap Gutter Example</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
  <div class="container mt-4">
    <div class="row g-4">
      <div class="col bg-info text-white p-3">Column 1</div>
      <div class="col bg-warning text-dark p-3">Column 2</div>
      <div class="col bg-success text-white p-3">Column 3</div>
    </div>
  </div>
</body>
</html>

Output

A webpage showing three colored columns with noticeable space between them horizontally and vertically.

⚠️

Common Pitfalls

Common mistakes when using gutters in Bootstrap include:

Applying gutter classes to .col instead of .row. Gutters only work on rows.
Forgetting to include Bootstrap CSS, so gutter classes have no effect.
Using old Bootstrap versions that do not support gutter utility classes (introduced in Bootstrap 5).
Trying to add gutters by adding margin or padding manually on columns, which can break the grid layout.

html

<!-- Wrong: gutter on columns -->
<div class="row">
  <div class="col g-3 bg-primary text-white">Wrong gutter</div>
  <div class="col g-3 bg-secondary text-white">Wrong gutter</div>
</div>

<!-- Right: gutter on row -->
<div class="row g-3">
  <div class="col bg-primary text-white">Correct gutter</div>
  <div class="col bg-secondary text-white">Correct gutter</div>
</div>

Output

First row columns have no spacing; second row columns have spacing between them.

📊

Quick Reference

Use these gutter classes on .row to control spacing:

Class	Effect
g-0	No gutter (no space)
g-1	Small gutter
g-2	Slightly larger gutter
g-3	Medium gutter (default)
g-4	Large gutter
g-5	Extra large gutter
gx-{size}	Horizontal gutter only
gy-{size}	Vertical gutter only

✅

Key Takeaways

Apply gutter classes like g-0 to g-5 on the .row element to control spacing between columns.

Use gx-{size} and gy-{size} to adjust horizontal or vertical gutters separately.

Gutter classes only work in Bootstrap 5 and later versions.

Do not apply gutter classes on .col elements; always use them on .row.

Including Bootstrap CSS is required for gutter classes to work.