How to Remove Bootstrap Column Gutters Without Negative Margins?

Eliminating Column Gutters in Bootstrap Without Using Negative Margins

Problem:

How to remove the default 30px spacing between columns in Bootstrap without resorting to setting negative margins?

Solution:

Depending on your Bootstrap version, here are the recommended approaches:

Bootstrap 5:

• New approach: Utilize the .g-0 class to eliminate gutters within the .row.
• Row gutters: Enhance responsiveness by applying gutter classes designed for specific breakpoints (e.g., .gx-sm-4 for horizontal gutters on small screens).

Bootstrap 4:

• Simplified: Implement the .no-gutters class directly on the .row.
• Code example:

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

Bootstrap 3.4.0 :

• Class-based: Use the newly introduced .row-no-gutters class.

Bootstrap 3 , <= 3.3.9:

• Padding adjustment: Modify the padding within the columns and add a custom .no-gutter class to the .row.
• CSS code:

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

.no-gutter > [class*="col-"] {
  padding-right: 0;
  padding-left: 0;
}
The above is the detailed content of How to Remove Bootstrap Column Gutters Without Negative Margins?. For more information, please follow other related articles on the PHP Chinese website!