How Can I Remove Gutters in Bootstrap?

Removing Gutters in Bootstrap: A Comprehensive Guide

Introduction

When working with Bootstrap, the 30px gutter between columns can sometimes be a hindrance to your design. In this article, we will explore various methods to remove this gutter without resorting to setting negative margins.

Bootstrap 5

The latest version of Bootstrap 5 introduces a dedicated class, .no-gutters, which can be added to the .row element to remove all horizontal and vertical gutters.

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

Additionally, Bootstrap 5 provides a range of new gutter classes for fine-tuning the spacing between columns responsively.

Bootstrap 4

For Bootstrap 4, the .no-gutters class can also be used on the .row element to remove gutters.

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

Bootstrap 3.4.0

Bootstrap 3.4.0 introduced the .row-no-gutters class specifically designed for removing gutters.

<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

For Bootstrap 3 versions earlier than 3.4.0, gutters are created using padding. To remove them, you can define a custom CSS class:

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

.no-gutter > [class*="col-"] {
  padding-right: 0;
  padding-left: 0;
}
Then, add the .no-gutter class to the .row element.
The above is the detailed content of How Can I Remove Gutters in Bootstrap?. For more information, please follow other related articles on the PHP Chinese website!