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,
Get hands-on with 1400+ tech skills courses.