How to Eliminate Gutter Spacing Between Bootstrap Columns?

How to Remove the Gutter Spacing Between Columns in Bootstrap

The spacing between columns in Bootstrap can create a visually cluttered appearance when undesired. Here's how to eliminate this gutter space without setting individual margins:

Bootstrap 5 and Later

In Bootstrap 5, the .no-gutters class has been replaced with .g-0. You can use it on the .row element to remove all spacing between columns:

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

Bootstrap 5 also provides responsive gutter classes that allow you to adjust the spacing for specific breakpoints. For example, .gx-sm-4 would remove the horizontal gutter only on screens with a 'small' breakpoint (e.g., smartphones).

Bootstrap 4

In Bootstrap 4, you can use the .no-gutters class directly on the .row:

<div class="row no-gutters">
  <div class="col" ...></div>
  <div class="col" ...></div>
  <div class="col" ...></div>
</div>

Bootstrap 3.4.0

In Bootstrap 3.4, a dedicated .row-no-gutters class was introduced:

<div class="row row-no-gutters">
  <div class="col" ...></div>
  <div class="col" ...></div>
  <div class="col" ...></div>
</div>

Bootstrap 3 (

In Bootstrap 3.3.9 and earlier, gutters are created using padding. To remove them, you need to use the following CSS:

.no-gutter {
  margin-right: 0;
  margin-left: 0;
}

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

Add the .no-gutter class to the .row element.

The above is the detailed content of How to Eliminate Gutter Spacing Between Bootstrap Columns?. For more information, please follow other related articles on the PHP Chinese website!