diff options
Diffstat (limited to 'vendor/twbs/bootstrap/site/content/docs/5.2/layout/gutters.md')
| -rw-r--r-- | vendor/twbs/bootstrap/site/content/docs/5.2/layout/gutters.md | 165 |
1 files changed, 0 insertions, 165 deletions
diff --git a/vendor/twbs/bootstrap/site/content/docs/5.2/layout/gutters.md b/vendor/twbs/bootstrap/site/content/docs/5.2/layout/gutters.md deleted file mode 100644 index 586209451..000000000 --- a/vendor/twbs/bootstrap/site/content/docs/5.2/layout/gutters.md +++ /dev/null @@ -1,165 +0,0 @@ ---- -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, -); -``` |