diff options
Diffstat (limited to '')
| -rw-r--r-- | site/content/docs/5.3/layout/gutters.md (renamed from site/content/docs/5.2/layout/gutters.md) | 56 |
1 files changed, 28 insertions, 28 deletions
diff --git a/site/content/docs/5.2/layout/gutters.md b/site/content/docs/5.3/layout/gutters.md index 5862094..a5b0772 100644 --- a/site/content/docs/5.2/layout/gutters.md +++ b/site/content/docs/5.3/layout/gutters.md @@ -18,14 +18,14 @@ toc: true `.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 >}} +{{< example class="bd-example-cols" >}} <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 class="p-3">Custom column padding</div> </div> <div class="col"> - <div class="p-3 border bg-light">Custom column padding</div> + <div class="p-3">Custom column padding</div> </div> </div> </div> @@ -33,14 +33,14 @@ toc: true An alternative solution is to add a wrapper around the `.row` with the `.overflow-hidden` class: -{{< example >}} +{{< example class="bd-example-cols" >}} <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 class="p-3">Custom column padding</div> </div> <div class="col"> - <div class="p-3 border bg-light">Custom column padding</div> + <div class="p-3">Custom column padding</div> </div> </div> </div> @@ -50,20 +50,20 @@ An alternative solution is to add a wrapper around the `.row` with the `.overflo `.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 >}} +{{< 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 border bg-light">Custom column padding</div> + <div class="p-3">Custom column padding</div> </div> <div class="col-6"> - <div class="p-3 border bg-light">Custom column padding</div> + <div class="p-3">Custom column padding</div> </div> <div class="col-6"> - <div class="p-3 border bg-light">Custom column padding</div> + <div class="p-3">Custom column padding</div> </div> <div class="col-6"> - <div class="p-3 border bg-light">Custom column padding</div> + <div class="p-3">Custom column padding</div> </div> </div> </div> @@ -71,22 +71,22 @@ An alternative solution is to add a wrapper around the `.row` with the `.overflo ## 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. +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 >}} +{{< example class="bd-example-cols" >}} <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 class="p-3">Custom column padding</div> </div> <div class="col-6"> - <div class="p-3 border bg-light">Custom column padding</div> + <div class="p-3">Custom column padding</div> </div> <div class="col-6"> - <div class="p-3 border bg-light">Custom column padding</div> + <div class="p-3">Custom column padding</div> </div> <div class="col-6"> - <div class="p-3 border bg-light">Custom column padding</div> + <div class="p-3">Custom column padding</div> </div> </div> </div> @@ -96,38 +96,38 @@ An alternative solution is to add a wrapper around the `.row` with the `.overflo 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 >}} +{{< 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 border bg-light">Row column</div> + <div class="p-3">Row column</div> </div> <div class="col"> - <div class="p-3 border bg-light">Row column</div> + <div class="p-3">Row column</div> </div> <div class="col"> - <div class="p-3 border bg-light">Row column</div> + <div class="p-3">Row column</div> </div> <div class="col"> - <div class="p-3 border bg-light">Row column</div> + <div class="p-3">Row column</div> </div> <div class="col"> - <div class="p-3 border bg-light">Row column</div> + <div class="p-3">Row column</div> </div> <div class="col"> - <div class="p-3 border bg-light">Row column</div> + <div class="p-3">Row column</div> </div> <div class="col"> - <div class="p-3 border bg-light">Row column</div> + <div class="p-3">Row column</div> </div> <div class="col"> - <div class="p-3 border bg-light">Row column</div> + <div class="p-3">Row column</div> </div> <div class="col"> - <div class="p-3 border bg-light">Row column</div> + <div class="p-3">Row column</div> </div> <div class="col"> - <div class="p-3 border bg-light">Row column</div> + <div class="p-3">Row column</div> </div> </div> </div> |