Gutters
How they work
- Gutters are the gaps between column content, created by
horizontal padding. We setpadding-rightandpadding-lefton each column, and use negative margin to offset that at the start and end of each row to align content. - Gutters start at
1.5rem (24px)wide. This allows us to match our grid to the padding and margin spacers scale. - Gutters can be responsively adjusted. Use breakpoint-specific gutter classes to modify horizontal gutters, vertical gutters, and all gutters.
Horizontal gutters
.gx-* classes can be used to control the horizontal gutter widths. The
.container or
.container-fluid parent may need to be adjusted if larger gutters are used too to avoid
unwanted
overflow, using a matching padding utility. For example, in the following example we’ve increased the
padding with .px-4:
An alternative solution is to add a wrapper around the .row with the
.overflow-hidden
class:
Vertical gutters
.gy-* classes can be used to control the vertical gutter widths. Like the horizontal
gutters, the
vertical gutters can cause some overflow below the .row at the end of a page. If this
occurs, you
add a wrapper around .row with the .overflow-hidden class:
Custom column padding
Custom column padding
Custom column padding
Custom column padding
Horizontal & vertical gutters
.g-* classes can be used to control the horizontal gutter widths, for the following
example we use
a smaller gutter width, so there won’t be a need to add the .overflow-hidden wrapper
class.
Row columns gutters
Gutter classes can also be added to row columns. In the following example, we use responsive row columns and responsive gutter classes.
No gutters
The gutters between columns in our predefined grid classes can be removed with .g-0.
This removes the
negative margins from .row and the horizontal padding from
all immediate children columns.
Need an edge-to-edge design? Drop the parent
.container or .container-fluid.
In practice, here’s how it looks. Note you can continue to use this with all other predefined grid classes (including column widths, responsive tiers, reorders, and more).