How to Remove Gutter Space from Specific Divs in Bootstrap?

Removing Gutter Space for a Specific div

The default Bootstrap grid system employs a 12-column layout with a 30px gutter separating the columns. While Bootstrap provides a no-gutters class for removing gutters from an entire row, this can lead to additional space at the end of the row.

For situations where you need to remove the gutter space for specific divs only, consider the following options:

Bootstrap 5

• Utilize the new g-* gutter classes to adjust gutters responsively according to specific breakpoints.
• g-0 eliminates all gutters.
• g-(1-5) adjusts horizontal and vertical gutters using spacing units.
• gy-* adjusts vertical gutters only.
• gx-* adjusts horizontal gutters only.

Bootstrap 4

• Incorporate the no-gutters class to the row, which removes gutters from all columns:

  <div>

• Utilize the spacing utilities to control individual column margins and padding:

  <div>

Bootstrap 3

• Leverage the row.no-gutter class, which adjusts both margins and padding to remove gutters:

  .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;
  }

Example (Bootstrap 3):

<div>

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