- Breaks grid content across multiple pages - Updates mentions of grid tiers from five to six - Rewrites how it works sections to reference new options and tiers
5.3 KiB
layout | title | description | group | toc |
---|---|---|---|---|
docs | Gutters | Gutters are the padding between your columns, used to responsively space and align content in the Bootstrap grid system. | layout | true |
How they work
-
Gutters are the gaps between column content, created by horizontal
padding
. We setpadding-right
andpadding-left
on each column, and use negativemargin
to offset that at the start and end of each row to align content. -
Gutters start are
1.5rem
(20px
) 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
:
{{< example >}}
An alternative solution is to add a wrapper around the .row
with the .overflow-hidden
class:
{{< example >}}
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:
{{< example >}}
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.
{{< example >}}
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.
{{< example >}}
No gutters
The gutters between columns in our predefined grid classes can be removed with .g-0
. This removes the negative margin
s 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).
{{< example class="bd-example-row" >}}
Change the gutters
Classes are built from the $gutters
Sass map which is inherited from the $spacers
Sass map.
$grid-gutter-width: 1.5rem;
$gutters: (
0: 0,
1: $spacer * .25,
2: $spacer * .5,
3: $spacer,
4: $spacer * 1.5,
5: $spacer * 3,
);