How Do I Remove Gutters in Bootstrap Across Different Versions?

Removing Gutters in Bootstrap

In Bootstrap, columns are separated by a 30px gutter, but there are instances where removing it is necessary. This article delves into the solutions for removing gutters without resorting to the margin-left:-30px approach.

Bootstrap 5 (Latest)

Bootstrap 5 introduces a simplified solution with the .no-gutters class. Adding this class to the .row will eliminate the spacing between columns:

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

Bootstrap 4

Bootstrap 4 also added a .no-gutters class, similar to Bootstrap 5:

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

Bootstrap 4 also includes responsive gutter classes, providing more flexibility:

<!-- Remove gutters on small and above breakpoints -->
<div class="row g-0 g-sm-3">
  <div class="col">x</div>
  <div class="col">x</div>
  <div class="col">x</div>
</div>

Bootstrap 3.4.0

For Bootstrap versions 3.4.0 and later, a dedicated .row-no-gutters class can be used:

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

Bootstrap 3 (<= 3.3.9)

In earlier Bootstrap versions (3 upto 3.3.9), removing gutters requires adjusting both margin and padding:

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

/* .row > [class*="col-"] */
.no-gutter > [class*="col-"] {
  padding-right: 0;
  padding-left: 0;
}<p>Add the <strong>.no-gutter</strong> class to the <strong>.row</strong> and you're set:</p>
<pre class="brush:php;toolbar:false"><div class="row no-gutter">
  <div class="col">x</div>
  <div class="col">x</div>
  <div class="col">x</div>
</div>

Utilizing these techniques, you can easily eliminate gutters in Bootstrap and achieve a desired visual layout.

The above is the detailed content of How Do I Remove Gutters in Bootstrap Across Different Versions?. For more information, please follow other related articles on the PHP Chinese website!