There are also responsive `.order-first` and `.order-last` classes that change the `order` of an element by applying `order: -1` and `order: 13` (`order: $columns + 1`), respectively. These classes can also be intermixed with the numbered `.order-*` classes as needed.
-
-{{< example >}}
+{{< example class="bd-example-row" >}}
@@ -652,7 +609,6 @@ There are also responsive `.order-first` and `.order-last` classes that change t
{{< /example >}}
-
### Offsetting columns
@@ -662,8 +618,7 @@ You can offset grid columns in two ways: our responsive `.offset-` grid classes
Move columns to the right using `.offset-md-*` classes. These classes increase the left margin of a column by `*` columns. For example, `.offset-md-4` moves `.col-md-4` over four columns.
-
-{{< example >}}
+{{< example class="bd-example-row" >}}
.col-md-4
@@ -678,12 +633,10 @@ Move columns to the right using `.offset-md-*` classes. These classes increase t
{{< /example >}}
-
In addition to column clearing at responsive breakpoints, you may need to reset offsets. See this in action in [the grid example]({{< docsref "/examples/grid" >}}).
-
-{{< example >}}
+{{< example class="bd-example-row" >}}
.col-sm-5 .col-md-6
@@ -695,14 +648,12 @@ In addition to column clearing at responsive breakpoints, you may need to reset
{{< /example >}}
-
#### Margin utilities
With the move to flexbox in v4, you can use margin utilities like `.mr-auto` to force sibling columns away from one another.
-
-{{< example >}}
+{{< example class="bd-example-row" >}}
.col-md-4
@@ -718,14 +669,12 @@ With the move to flexbox in v4, you can use margin utilities like `.mr-auto` to
{{< /example >}}
-
## Nesting
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 >}}
+{{< example class="bd-example-row" >}}
@@ -742,7 +691,6 @@ To nest your content with the default grid, add a new `.row` and set of `.col-sm
{{< /example >}}
-
## Sass mixins
diff --git a/site/content/docs/4.5/utilities/borders.md b/site/content/docs/4.5/utilities/borders.md
index 2e7541f04646..8958171103a6 100644
--- a/site/content/docs/4.5/utilities/borders.md
+++ b/site/content/docs/4.5/utilities/borders.md
@@ -13,27 +13,23 @@ Use border utilities to add or remove an element's borders. Choose from all bord
### Additive
-
-{{< example >}}
+{{< example class="bd-example-border-utils">}}
{{< /example >}}
-
### Subtractive
-
-{{< example >}}
+{{< example class="bd-example-border-utils bd-example-border-utils-0" >}}
{{< /example >}}
-
## Border color
@@ -52,38 +48,22 @@ Change the border color using utilities built on our theme colors.
Add classes to an element to easily round its corners.
-
- {{< placeholder width="75" height="75" class="rounded" title="Example rounded image" >}}
- {{< placeholder width="75" height="75" class="rounded-top" title="Example top rounded image" >}}
- {{< placeholder width="75" height="75" class="rounded-right" title="Example right rounded image" >}}
- {{< placeholder width="75" height="75" class="rounded-bottom" title="Example bottom rounded image" >}}
- {{< placeholder width="75" height="75" class="rounded-left" title="Example left rounded image" >}}
- {{< placeholder width="75" height="75" class="rounded-circle" title="Completely round image" >}}
- {{< placeholder width="150" height="75" class="rounded-pill" title="Rounded pill image" >}}
- {{< placeholder width="75" height="75" class="rounded-0" title="Example non-rounded image (overrides rounding applied elsewhere)" >}}
-
-
-```html
-
-
-
-
-
-
-
-
-```
+{{< example>}}
+{{< placeholder width="75" height="75" class="rounded" title="Example rounded image" >}}
+{{< placeholder width="75" height="75" class="rounded-top" title="Example top rounded image" >}}
+{{< placeholder width="75" height="75" class="rounded-right" title="Example right rounded image" >}}
+{{< placeholder width="75" height="75" class="rounded-bottom" title="Example bottom rounded image" >}}
+{{< placeholder width="75" height="75" class="rounded-left" title="Example left rounded image" >}}
+{{< placeholder width="75" height="75" class="rounded-circle" title="Completely round image" >}}
+{{< placeholder width="150" height="75" class="rounded-pill" title="Rounded pill image" >}}
+{{< placeholder width="75" height="75" class="rounded-0" title="Example non-rounded image (overrides rounding applied elsewhere)" >}}
+{{< /example >}}
## Sizes
Use `.rounded-lg` or `.rounded-sm` for larger or smaller border-radius.
-
- {{< placeholder width="75" height="75" class="rounded-sm" title="Example small rounded image" >}}
- {{< placeholder width="75" height="75" class="rounded-lg" title="Example large rounded image" >}}
-
-
-```html
-
-
-```
+{{< example >}}
+{{< placeholder width="75" height="75" class="rounded-sm" title="Example small rounded image" >}}
+{{< placeholder width="75" height="75" class="rounded-lg" title="Example large rounded image" >}}
+{{< /example >}}