How Can I Remove or Adjust Gutter Space in Bootstrap for Specific Divs?

Removing Gutter Space for Specific Divs

Bootstrap's default grid system includes 30px gutter space between columns, resulting in a row with 360px of unused space if gutters are removed completely. To address this, while maintaining Bootstrap responsiveness, follow these steps:

Bootstrap 5 (Since Update 2021)

Bootstrap 5 introduced specific gutter classes:

• g-0: No gutters
• g-(1-5): Adjust horizontal and vertical gutters using spacing units
• gy-*: Adjust vertical gutters
• gx-*: Adjust horizontal gutters

Example:

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

Bootstrap 4 (No Additional CSS Required)

Bootstrap 4 provides the no-gutters class for rows:

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

Bootstrap 3 (Original Answer)

Bootstrap 3 introduced the use of padding instead of margins for gutters. To achieve this effect:

1. Create a new CSS class:

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

2. Remove padding from all columns except the first and last:

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

3. Apply the no-gutter class to the desired rows:

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

The above is the detailed content of How Can I Remove or Adjust Gutter Space in Bootstrap for Specific Divs?. For more information, please follow other related articles on the PHP Chinese website!