Removing padding gutter from grid columns in Bootstrap 4


How do you create a gutterless grid in bootstrap 4?

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

This question is tagged with twitter-bootstrap bootstrap-4

~ Asked on 2016-04-04 21:59:57

The Best Answer is


Bootstrap4: Comes with .no-gutters out of the box. source:


Requires custom CSS.

Stylesheet: {
  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>

It will:

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

~ Answered on 2016-04-04 21:59:57


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

~ Answered on 2018-05-04 06:20:30

Most Viewed Questions: