Gutters

Learn about the gutter property in Bootstrap.

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.

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;.

Press + to interact
.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, 1rem ...

Get hands-on with 1400+ tech skills courses.