How to Remove Gutter Space in Bootstrap Grid Systems?

Removing Gutter Space for Specific Divs

Introduction

The Bootstrap grid system employs a default gutter of 30px between columns, contributing to the clean and consistent layout. However, it may be desirable to remove this gutter space for specific elements within a row. This article explores techniques to achieve this goal without compromising Bootstrap's responsiveness or introducing unsightly empty space.

Bootstrap 3.x

For Bootstrap 3.x, the solution has become more straightforward. Padding is now employed to create the gutter, making it easier to remove. Implement the following CSS:

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

.row.no-gutter [class*='col-']:not(:first-child),
.row.no-gutter [class*='col-']:not(:last-child) {
  padding-right: 0;
  padding-left: 0;
}

To remove the gutter for specific divs, simply assign the "no-gutter" class to the corresponding row.

Bootstrap 4.x

Bootstrap 4.x includes a built-in utility class, "no-gutters," that achieves the desired effect.

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

Bootstrap 5.x

The latest iteration of Bootstrap offers even more granular control over gutter spacing with the introduction of gutter classes. Utilize "g-0" to remove gutters entirely or adjust them using the "g-1-5" classes. These classes can also be applied responsively with breakpoints, such as "gx-sm-4" to adjust horizontal gutters for screens smaller than 768px.

The above is the detailed content of How to Remove Gutter Space in Bootstrap Grid Systems?. For more information, please follow other related articles on the PHP Chinese website!