summaryrefslogtreecommitdiffstats
path: root/site/content/docs/5.2/layout/gutters.md
diff options
context:
space:
mode:
Diffstat (limited to 'site/content/docs/5.2/layout/gutters.md')
-rw-r--r--site/content/docs/5.2/layout/gutters.md165
1 files changed, 165 insertions, 0 deletions
diff --git a/site/content/docs/5.2/layout/gutters.md b/site/content/docs/5.2/layout/gutters.md
new file mode 100644
index 0000000..5862094
--- /dev/null
+++ b/site/content/docs/5.2/layout/gutters.md
@@ -0,0 +1,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 >}}
+<div class="container px-4 text-center">
+ <div class="row gx-5">
+ <div class="col">
+ <div class="p-3 border bg-light">Custom column padding</div>
+ </div>
+ <div class="col">
+ <div class="p-3 border bg-light">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 >}}
+<div class="container overflow-hidden text-center">
+ <div class="row gx-5">
+ <div class="col">
+ <div class="p-3 border bg-light">Custom column padding</div>
+ </div>
+ <div class="col">
+ <div class="p-3 border bg-light">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 >}}
+<div class="container overflow-hidden text-center">
+ <div class="row gy-5">
+ <div class="col-6">
+ <div class="p-3 border bg-light">Custom column padding</div>
+ </div>
+ <div class="col-6">
+ <div class="p-3 border bg-light">Custom column padding</div>
+ </div>
+ <div class="col-6">
+ <div class="p-3 border bg-light">Custom column padding</div>
+ </div>
+ <div class="col-6">
+ <div class="p-3 border bg-light">Custom column padding</div>
+ </div>
+ </div>
+</div>
+{{< /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 >}}
+<div class="container text-center">
+ <div class="row g-2">
+ <div class="col-6">
+ <div class="p-3 border bg-light">Custom column padding</div>
+ </div>
+ <div class="col-6">
+ <div class="p-3 border bg-light">Custom column padding</div>
+ </div>
+ <div class="col-6">
+ <div class="p-3 border bg-light">Custom column padding</div>
+ </div>
+ <div class="col-6">
+ <div class="p-3 border bg-light">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 >}}
+<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 border bg-light">Row column</div>
+ </div>
+ <div class="col">
+ <div class="p-3 border bg-light">Row column</div>
+ </div>
+ <div class="col">
+ <div class="p-3 border bg-light">Row column</div>
+ </div>
+ <div class="col">
+ <div class="p-3 border bg-light">Row column</div>
+ </div>
+ <div class="col">
+ <div class="p-3 border bg-light">Row column</div>
+ </div>
+ <div class="col">
+ <div class="p-3 border bg-light">Row column</div>
+ </div>
+ <div class="col">
+ <div class="p-3 border bg-light">Row column</div>
+ </div>
+ <div class="col">
+ <div class="p-3 border bg-light">Row column</div>
+ </div>
+ <div class="col">
+ <div class="p-3 border bg-light">Row column</div>
+ </div>
+ <div class="col">
+ <div class="p-3 border bg-light">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,
+);
+```