Removing padding gutter from grid columns in Bootstrap 4 / Bootstrap 5

Question

How do you create a gutterless grid in bootstrap 4?

Is there an official API for removing the gutter or is it manual?

Solution 1

Bootstrap5: Comes with gutter utilities

• all viewports g-0 .. g-5
• responsive viewports g-sm-0 .. g-lg-5
• horizontal/vertical gy-0 .. gx-5

Example with zero-gutter width:

<div class="container">
  <div class="row g-0">
    <div class="col-6">
      <div class="p-3 border bg-light">...</div>
    </div>
    <div class="col-6">
      <div class="p-3 border bg-light">...</div>
    </div>
  </div>
</div> 

Bootstrap4: Comes with .no-gutters out of the box. source: https://github.com/twbs/bootstrap/pull/21211/files

Bootstrap3:

Requires custom CSS.

Stylesheet:

.row.no-gutters {
  margin-right: 0;
  margin-left: 0;

  & > [class^="col-"],
  & > [class*=" col-"] {
    padding-right: 0;
    padding-left: 0;
  }
}

Then to use:

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

It will:

• Remove margin from the row
• Remove padding from all columns directly beneath the row

Solution 2

You should use built-in bootstrap4 spacing classes for customizing the spacing of elements, that's more convenient method .

Solution 3

Need an edge-to-edge design? Drop the parent .container or .container-fluid.

Still if you need to remove padding from .row and immediate child columns you have to add the class .no-gutters with the code from @Brian above to your own CSS file, actually it's Not 'right out of the box', check here for official details on the final Bootstrap 4 release: https://getbootstrap.com/docs/4.0/layout/grid/#no-gutters

Solution 4

You can use this css code to get gutterless grid in bootstrap.

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

.no-gutter>[class^="col-"]{
  padding-left: 0;
  padding-right: 0;
}

Solution 5

You can use the mixin make-col-ready and set the gutter width to zero:

@include make-col-ready(0);

View more solutions

Comments

[Qazi Ammar]

In bootstrap-5 you can use these class (mx, px) to remove the margin and padding of the div. <div class="container mx-0 my-0 px-0 py-0">