How to Remove Bootstrap Gutters from Specific Divs Without Breaking Responsiveness?

How to Remove Gutter Space for a Specific Div Without Affecting Bootstrap Responsiveness

In a Bootstrap layout, gutters create the white space between columns, typically around 20-30px wide. While this provides a visually appealing separation, there may be instances where you want to remove this gutter for specific divs without disrupting the responsiveness of the layout.

Bootstrap 3 Solution

For Bootstrap 3, the removal of gutters has become simpler due to the use of padding instead of margins to create the gutters. Here's the CSS code:

.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 in Bootstrap 3, simply add the class "no-gutter" to the corresponding rows:

<div class="row no-gutter">
  <div class="col-lg-1"><div>1</div></div>
  <div class="col-lg-1"><div>1</div></div>
  <div class="col-lg-1"><div>1</div></div>
</div>

Bootstrap 4 and 5 Solutions

Bootstrap 4 introduces the "no-gutters" class to remove gutters from an entire row:

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

Bootstrap 5 further expands on this with gutter classes that allow for fine-grained control over both horizontal and vertical spacing. The classes include:

• g-0 for no gutters
• g-(1-5) to adjust spacing
• gy-* to adjust vertical spacing
• gx-* to adjust horizontal spacing

For example, to remove the gutter for specific divs while preserving responsiveness:

#main_content .col {
  padding: 0 !important;
}

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

The above is the detailed content of How to Remove Bootstrap Gutters from Specific Divs Without Breaking Responsiveness?. For more information, please follow other related articles on the PHP Chinese website!