.g-col-6
.g-col-6
@@ -259,8 +259,8 @@ One limitation of the CSS Grid is that our default classes are still generated b
For example, you can increase the column count and change the gap size, and then size your "columns" with a mix of inline styles and predefined CSS Grid column classes (e.g., `.g-col-4`).
-{{< example class="bd-example-cssgrid text-center" >}}
-
+{{< example class="bd-example-cssgrid" >}}
+
diff --git a/site/content/docs/5.2/layout/grid.md b/site/content/docs/5.2/layout/grid.md
index 05fc1bd65db4..765b7eb60358 100644
--- a/site/content/docs/5.2/layout/grid.md
+++ b/site/content/docs/5.2/layout/grid.md
@@ -15,7 +15,7 @@ Bootstrap's grid system uses a series of containers, rows, and columns to layout
{{< /callout >}}
{{< example class="bd-example-row" >}}
-
+
Column
@@ -144,7 +144,7 @@ Utilize breakpoint-specific column classes for easy column sizing without an exp
For example, here are two grid layouts that apply to every device and viewport, from `xs` to `xxl`. Add any number of unit-less classes for each breakpoint you need and every column will be the same width.
{{< example class="bd-example-row" >}}
-
+
1 of 2
@@ -172,7 +172,7 @@ For example, here are two grid layouts that apply to every device and viewport,
Auto-layout for flexbox grid columns also means you can set the width of one column and have the sibling columns automatically resize around it. You may use predefined grid classes (as shown below), grid mixins, or inline widths. Note that the other columns will resize no matter the width of the center column.
{{< example class="bd-example-row" >}}
-
+
1 of 3
@@ -203,7 +203,7 @@ Auto-layout for flexbox grid columns also means you can set the width of one col
Use `col-{breakpoint}-auto` classes to size columns based on the natural width of their content.
{{< example class="bd-example-row" >}}
-
+
1 of 3
@@ -238,7 +238,7 @@ Bootstrap's grid includes six tiers of predefined classes for building complex r
For grids that are the same from the smallest of devices to the largest, use the `.col` and `.col-*` classes. Specify a numbered class when you need a particularly sized column; otherwise, feel free to stick to `.col`.
{{< example class="bd-example-row" >}}
-
+
col
col
@@ -257,7 +257,7 @@ For grids that are the same from the smallest of devices to the largest, use the
Using a single set of `.col-sm-*` classes, you can create a basic grid system that starts out stacked and becomes horizontal at the small breakpoint (`sm`).
{{< example class="bd-example-row" >}}
-
+
col-sm-8
col-sm-4
@@ -275,7 +275,7 @@ Using a single set of `.col-sm-*` classes, you can create a basic grid system th
Don't want your columns to simply stack in some grid tiers? Use a combination of different classes for each tier as needed. See the example below for a better idea of how it all works.
{{< example class="bd-example-row" >}}
-
+
.col-md-8
@@ -304,7 +304,7 @@ Use the responsive `.row-cols-*` classes to quickly set the number of columns th
Use these row columns classes to quickly create basic grid layouts or to control your card layouts.
{{< example class="bd-example-row" >}}
-
+
Column
Column
@@ -315,7 +315,7 @@ Use these row columns classes to quickly create basic grid layouts or to control
{{< /example >}}
{{< example class="bd-example-row" >}}
-
+
Column
Column
@@ -326,7 +326,7 @@ Use these row columns classes to quickly create basic grid layouts or to control
{{< /example >}}
{{< example class="bd-example-row" >}}
-
+
Column
Column
@@ -337,7 +337,7 @@ Use these row columns classes to quickly create basic grid layouts or to control
{{< /example >}}
{{< example class="bd-example-row" >}}
-
+
Column
Column
@@ -348,7 +348,7 @@ Use these row columns classes to quickly create basic grid layouts or to control
{{< /example >}}
{{< example class="bd-example-row" >}}
-
+
Column
Column
@@ -359,7 +359,7 @@ Use these row columns classes to quickly create basic grid layouts or to control
{{< /example >}}
{{< example class="bd-example-row" >}}
-
+
Column
Column
@@ -388,7 +388,7 @@ You can also use the accompanying Sass mixin, `row-cols()`:
To nest your content with the default grid, add a new `.row` and set of `.col-sm-*` columns within an existing `.col-sm-*` column. Nested rows should include a set of columns that add up to 12 or fewer (it is not required that you use all 12 available columns).
{{< example class="bd-example-row" >}}
-
+
Level 1: .col-sm-3
diff --git a/site/content/docs/5.2/layout/gutters.md b/site/content/docs/5.2/layout/gutters.md
index 9ea13e4ab246..1cb68303f1ad 100644
--- a/site/content/docs/5.2/layout/gutters.md
+++ b/site/content/docs/5.2/layout/gutters.md
@@ -19,7 +19,7 @@ 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 >}}
-
+
Custom column padding
@@ -34,7 +34,7 @@ toc: true
An alternative solution is to add a wrapper around the `.row` with the `.overflow-hidden` class:
{{< example >}}
-
+
Custom column padding
@@ -51,7 +51,7 @@ 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. 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 >}}
-
+
Custom column padding
@@ -74,7 +74,7 @@ An alternative solution is to add a wrapper around the `.row` with the `.overflo
`.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 >}}
-
+
Custom column padding
@@ -97,7 +97,7 @@ 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 >}}
-
+
Row column
@@ -142,7 +142,7 @@ The gutters between columns in our predefined grid classes can be removed with `
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" >}}
-
+
.col-sm-6 .col-md-8
.col-6 .col-md-4