Home > Web Front-end > CSS Tutorial > How to Eliminate Gutter Spacing Between Bootstrap Columns?

How to Eliminate Gutter Spacing Between Bootstrap Columns?

Mary-Kate Olsen
Release: 2024-11-27 07:23:10
Original
309 people have browsed it

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>
Copy after login

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>
Copy after login

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>
Copy after login

Bootstrap 3 (<= 3.3.9)

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!

Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Latest Articles by Author
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template