1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
|
---
layout: docs
title: Gutters
description: Gutters are the padding between your columns, used to responsively space and align content in the Bootstrap grid system.
group: layout
toc: true
---
## How they work
- **Gutters are the gaps between column content, created by horizontal `padding`.** We set `padding-right` and `padding-left` on 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]({{< docsref "/utilities/spacing" >}}) 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 class="bd-example-cols" >}}
<div class="container px-4 text-center">
<div class="row gx-5">
<div class="col">
<div class="p-3">Custom column padding</div>
</div>
<div class="col">
<div class="p-3">Custom column padding</div>
</div>
</div>
</div>
{{< /example >}}
An alternative solution is to add a wrapper around the `.row` with the `.overflow-hidden` class:
{{< example class="bd-example-cols" >}}
<div class="container overflow-hidden text-center">
<div class="row gx-5">
<div class="col">
<div class="p-3">Custom column padding</div>
</div>
<div class="col">
<div class="p-3">Custom column padding</div>
</div>
</div>
</div>
{{< /example >}}
## Vertical gutters
`.gy-*` classes can be used to control the vertical gutter widths within a row when columns wrap to new lines. 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 class="bd-example-cols" >}}
<div class="container overflow-hidden text-center">
<div class="row gy-5">
<div class="col-6">
<div class="p-3">Custom column padding</div>
</div>
<div class="col-6">
<div class="p-3">Custom column padding</div>
</div>
<div class="col-6">
<div class="p-3">Custom column padding</div>
</div>
<div class="col-6">
<div class="p-3">Custom column padding</div>
</div>
</div>
</div>
{{< /example >}}
## Horizontal & vertical gutters
Use `.g-*` classes to control the horizontal and vertical grid gutters. In the example below, we use a smaller gutter width, so there isn't a need for the `.overflow-hidden` wrapper class.
{{< example class="bd-example-cols" >}}
<div class="container text-center">
<div class="row g-2">
<div class="col-6">
<div class="p-3">Custom column padding</div>
</div>
<div class="col-6">
<div class="p-3">Custom column padding</div>
</div>
<div class="col-6">
<div class="p-3">Custom column padding</div>
</div>
<div class="col-6">
<div class="p-3">Custom column padding</div>
</div>
</div>
</div>
{{< /example >}}
## Row columns gutters
Gutter classes can also be added to [row columns]({{< docsref "/layout/grid#row-columns" >}}). In the following example, we use responsive row columns and responsive gutter classes.
{{< example class="bd-example-cols" >}}
<div class="container text-center">
<div class="row row-cols-2 row-cols-lg-5 g-2 g-lg-3">
<div class="col">
<div class="p-3">Row column</div>
</div>
<div class="col">
<div class="p-3">Row column</div>
</div>
<div class="col">
<div class="p-3">Row column</div>
</div>
<div class="col">
<div class="p-3">Row column</div>
</div>
<div class="col">
<div class="p-3">Row column</div>
</div>
<div class="col">
<div class="p-3">Row column</div>
</div>
<div class="col">
<div class="p-3">Row column</div>
</div>
<div class="col">
<div class="p-3">Row column</div>
</div>
<div class="col">
<div class="p-3">Row column</div>
</div>
<div class="col">
<div class="p-3">Row column</div>
</div>
</div>
</div>
{{< /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` and add `.mx-0` to the `.row` to prevent overflow.
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" >}}
<div class="row g-0 text-center">
<div class="col-sm-6 col-md-8">.col-sm-6 .col-md-8</div>
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>
{{< /example >}}
## Change the gutters
Classes are built from the `$gutters` Sass map which is inherited from the `$spacers` Sass map.
```scss
$grid-gutter-width: 1.5rem;
$gutters: (
0: 0,
1: $spacer * .25,
2: $spacer * .5,
3: $spacer,
4: $spacer * 1.5,
5: $spacer * 3,
);
```
|
