Bootstrap Gutters

Question

I am new to bootstrap and exploring the documentation I have been encountering the Gutters term quite and am not able to properly understand what the terminology refers. It would be great if a clear answer can be provided?

score 1 · Answer 1 · answered Apr 05 '19 at 11:49

1

I believe just a fancy term for the default padding that bootstrap (3 and 4) adds around columns (15px padding on both sides of column).

Also this link might be helpful in understanding it better.

answered Apr 05 '19 at 11:49

Tayyab

1,207
8
29

score 1 · Accepted Answer · answered Apr 05 '19 at 11:54

It refers to the following:

negative margins on .row and the horizontal padding on all immediate children columns

You can use the .no-gutters class to remove this default styling.

.col-sm {
  background: rgba(86,61,124,.15);
  border: 1px solid rgba(86,61,124,.35);
}

.no-gutters .col-sm {
  background: rgba(0,0,255,.15);
  border: 1px solid rgba(0,0,255,.35);
}

<head>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<head>

<body>
  <div class="container">
    <div class="row">
      <div class="col-sm">
        COLUMN
      </div>
      <div class="col-sm">
        COLUMN
      </div>
      <div class="col-sm">
        COLUMN
      </div>
    </div>
  </div>
  <div class="container no-gutters">
    <div class="row no-gutters">
      <div class="col-sm">
        COLUMN
      </div>
      <div class="col-sm">
        COLUMN
      </div>
      <div class="col-sm">
        COLUMN
      </div>
    </div>
  </div>
</body>

Bootstrap Gutters

2 Answers2