Search⌘ K
Home/
Courses/
Modern Web Design Using Bootstrap 5 with Hands-On Projects

Gutters

Learn about the gutter property in Bootstrap.

We'll cover the following...

Gutters are the padding between our columns placed in the .row class. Gutters are defined within the .row class. But before we look at gutters, let’s take a look at the padding and margin properties in the .row class.

Gutter working

The .row class spacing is dependent on --bs-gutter-x and --bs-gutter-y variables. The variables are initialized as --bs-gutter-x: 1.5 rem; and --bs-gutter-y: 0 rem;.

C++
.row {
  --bs-gutter-x: 1.5rem;
  --bs-gutter-y: 0;
  display: flex;
  flex-wrap: wrap;
  margin-top: calc(var(--bs-gutter-y) * -1);
  margin-right: calc(var(--bs-gutter-x) * -.5);
  margin-left: calc(var(--bs-gutter-x) * -.5);
}
.row > * {
  flex-shrink: 0;
  width: 100%;
  max-width: 100%;
  padding-right: calc(var(--bs-gutter-x) * .5);
  padding-left: calc(var(--bs-gutter-x) * .5);
  margin-top: var(--bs-gutter-y);
}

Here, 1rem1rem is equal to 16px16px ...