How to remove gutters (spacing) between Bootstrap columns?

To remove the spacing between Bootstrap columns, you should choose the appropriate method according to the version: 1. Bootstrap 5 uses the g-0 class (recommended), and can remove all gaps in the row, or use gx-0 and gy-0 to remove horizontal or vertical gaps respectively; 2. Bootstrap 4 uses the no-gutters class, but this class has been deprecated in Bootstrap 5; 3. Use custom CSS, remove spacing by setting padding-left and padding-right to 0, which is suitable for all versions; 4. In advanced cases, you can adjust the row margin in combination with negative margins to ensure that the content is displayed. The best practice is to use g-0 for Bootstrap 5 and no-gutters for Bootstrap 4. In most cases, seamless column layout can be achieved without additional CSS.

By default, Bootstrap adds gutters (padding) on ​​the left and right of each column ( col-* ) to create spacing between columns. If you want to remove the gutters (spacing) between Bootstrap columns, here are the most effective and clean ways to do it, depending on your Bootstrap version (v4 or v5 ).

✅ 1. Use g-0 (Gap Utility) – Recommended (Bootstrap 5)

In Bootstrap 5 , spacing between columns is controlled by the gap property on the row. You can remove spacing by using the g-0 class (which sets gap to 0):

 <div class="row g-0">
  <div class="col">Column 1</div>
  <div class="col">Column 2</div>
  <div class="col">Column 3</div>
</div>

• g-0 removes all gap (horizontal and vertical).
• For horizontal gap only, use gx-0 .
• For vertical gap only, use gy-0 .

? This is the cleanest and most modern way in Bootstrap 5.

✅ 2. Use no-gutters – Bootstrap 4

In Bootstrap 4 , the class was no-gutters :

 <div class="row no-gutters">
  <div class="col">Column 1</div>
  <div class="col">Column 2</div>
  <div class="col">Column 3</div>
</div>

⚠️ Note: no-gutters was deprecated in Bootstrap 5 in favor of gap utilities like g-0 .

✅ 3. Custom CSS (Works in all versions)

If you're using an older version or need more control, you can override the padding on columns:

 .no-gutter .col,
.no-gutter [class*="col-"] {
  padding-left: 0;
  padding-right: 0;
}

Then apply it:

 <div class="row no-gutter">
  <div class="col">No spacing here</div>
  <div class="col">Next to it</div>
</div>

? This works by removing the default 15px padding on left and right of each column.

✅ 4. Use Negative Margins (Advanced)

Sometimes you might need to compensate for padding removal by adjusting the row:

 .row.no-gutter {
  margin-left: 0;
  margin-right: 0;
}
.row.no-gutter > [class*="col-"] {
  padding-left: 0;
  padding-right: 0;
}

This is useful if you're removing padding and want the content to go edge-to-edge.

Summary

✅ Best Practice : Use g-0 in Bootstrap 5, no-gutters in Bootstrap 4.

Basically, just add the right utility class to your .row , and the spacing between columns disappears — no extra CSS needed in most cases.

The above is the detailed content of How to remove gutters (spacing) between Bootstrap columns?. For more information, please follow other related articles on the PHP Chinese website!