Use the example shortcode in more places

Now, it's safe to do use it since it covers more cases

4 files changed, 62 insertions, 176 deletions

diff --git a/site/content/docs/4.5/components/card.md b/site/content/docs/4.5/components/card.md
index d7730c6228..86d8fbf985 100644
--- a/site/content/docs/4.5/components/card.md
+++ b/site/content/docs/4.5/components/card.md
@@ -352,28 +352,9 @@ Cards include a few options for working with images. Choose from appending "imag
 
 Similar to headers and footers, cards can include top and bottom "image caps"—images at the top or bottom of a card.
 
-<div class="bd-example">
-  <div class="card mb-3">
-    {{< placeholder width="100%" height="180" class="card-img-top" text="Image cap" >}}
-    <div class="card-body">
-      <h5 class="card-title">Card title</h5>
-      <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
-      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
-    </div>
-  </div>
-  <div class="card">
-    <div class="card-body">
-      <h5 class="card-title">Card title</h5>
-      <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
-      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
-    </div>
-    {{< placeholder width="100%" height="180" class="card-img-bottom" text="Image cap" >}}
-  </div>
-</div>
-
-```html
+{{< example >}}
 <div class="card mb-3">
-  <img src="..." class="card-img-top" alt="...">
+  {{< placeholder width="100%" height="180" class="card-img-top" text="Image cap" >}}
   <div class="card-body">
     <h5 class="card-title">Card title</h5>
     <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
@@ -386,9 +367,9 @@ Similar to headers and footers, cards can include top and bottom "image caps"—
     <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
     <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
   </div>
-  <img src="..." class="card-img-bottom" alt="...">
+  {{< placeholder width="100%" height="180" class="card-img-bottom" text="Image cap" >}}
 </div>
-```
+{{< /example >}}
 
 ### Image overlays
 
diff --git a/site/content/docs/4.5/content/images.md b/site/content/docs/4.5/content/images.md
index 390b797798..8aca905464 100644
--- a/site/content/docs/4.5/content/images.md
+++ b/site/content/docs/4.5/content/images.md
@@ -10,13 +10,9 @@ toc: true
 
 Images in Bootstrap are made responsive with `.img-fluid`. `max-width: 100%;` and `height: auto;` are applied to the image so that it scales with the parent element.
 
-<div class="bd-example">
-  {{< placeholder width="100%" height="250" class="bd-placeholder-img-lg img-fluid" text="Responsive image" >}}
-</div>
-
-```html
-<img src="..." class="img-fluid" alt="Responsive image">
-```
+{{< example >}}
+{{< placeholder width="100%" height="250" class="bd-placeholder-img-lg img-fluid" text="Responsive image" >}}
+{{< /example >}}
 
 {{< callout warning >}}
 ##### SVG images and Internet Explorer
@@ -28,47 +24,28 @@ In Internet Explorer 10 and 11, SVG images with `.img-fluid` are disproportionat
 
 In addition to our [border-radius utilities]({{< docsref "/utilities/borders" >}}), you can use `.img-thumbnail` to give an image a rounded 1px border appearance.
 
-<div class="bd-example bd-example-images">
-  {{< placeholder width="200" height="200" class="img-thumbnail" title="A generic square placeholder image with a white border around it, making it resemble a photograph taken with an old instant camera" >}}
-</div>
-
-```html
-<img src="..." alt="..." class="img-thumbnail">
-```
+{{< example >}}
+{{< placeholder width="200" height="200" class="img-thumbnail" title="A generic square placeholder image with a white border around it, making it resemble a photograph taken with an old instant camera" >}}
+{{< /example >}}
 
 ## Aligning images
 
 Align images with the [helper float classes]({{< docsref "/utilities/float" >}}) or [text alignment classes]({{< docsref "/utilities/text#text-alignment" >}}). `block`-level images can be centered using [the `.mx-auto` margin utility class]({{< docsref "/utilities/spacing#horizontal-centering" >}}).
 
-<div class="bd-example bd-example-images">
-  {{< placeholder width="200" height="200" class="rounded float-left" >}}
-  {{< placeholder width="200" height="200" class="rounded float-right" >}}
-</div>
-
-```html
-<img src="..." class="rounded float-left" alt="...">
-<img src="..." class="rounded float-right" alt="...">
-```
-
-<div class="bd-example bd-example-images">
-  {{< placeholder width="200" height="200" class="rounded mx-auto d-block" >}}
-</div>
-
-```html
-<img src="..." class="rounded mx-auto d-block" alt="...">
-```
+{{< example >}}
+{{< placeholder width="200" height="200" class="rounded float-left" >}}
+{{< placeholder width="200" height="200" class="rounded float-right" >}}
+{{< /example >}}
 
-<div class="bd-example bd-example-images">
-  <div class="text-center">
-    {{< placeholder width="200" height="200" class="rounded" >}}
-  </div>
-</div>
+{{< example >}}
+{{< placeholder width="200" height="200" class="rounded mx-auto d-block" >}}
+{{< /example >}}
 
-```html
+{{< example >}}
 <div class="text-center">
-  <img src="..." class="rounded" alt="...">
+  {{< placeholder width="200" height="200" class="rounded" >}}
 </div>
-```
+{{< /example >}}
 
 
 ## Picture
diff --git a/site/content/docs/4.5/layout/grid.md b/site/content/docs/4.5/layout/grid.md
index f7a70ca480..6281661c28 100644
--- a/site/content/docs/4.5/layout/grid.md
+++ b/site/content/docs/4.5/layout/grid.md
@@ -12,8 +12,7 @@ Bootstrap's grid system uses a series of containers, rows, and columns to layout
 
 **New to or unfamiliar with flexbox?** [Read this CSS Tricks flexbox guide](https://css-tricks.com/snippets/css/a-guide-to-flexbox/#flexbox-background) for background, terminology, guidelines, and code snippets.
 
-<div class="bd-example-row">
-{{< example >}}
+{{< example class="bd-example-row" >}}
 <div class="container">
   <div class="row">
     <div class="col-sm">
@@ -28,7 +27,6 @@ Bootstrap's grid system uses a series of containers, rows, and columns to layout
   </div>
 </div>
 {{< /example >}}
-</div>
 
 The above example creates three equal-width columns on small, medium, large, and extra large devices using our predefined grid classes. Those columns are centered in the page with the parent `.container`.
 
@@ -123,8 +121,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 `xl`. Add any number of unit-less classes for each breakpoint you need and every column will be the same width.
 
-<div class="bd-example-row">
-{{< example >}}
+{{< example class="bd-example-row" >}}
 <div class="container">
   <div class="row">
     <div class="col">
@@ -147,7 +144,6 @@ For example, here are two grid layouts that apply to every device and viewport,
   </div>
 </div>
 {{< /example >}}
-</div>
 
 ### Equal-width multi-line
 
@@ -155,8 +151,7 @@ Create equal-width columns that span multiple lines by inserting a `.w-100` wher
 
 There was a [Safari flexbox bug](https://github.com/philipwalton/flexbugs#flexbug-11) that prevented this from working without an explicit `flex-basis` or `border`. There are workarounds for older browser versions, but they shouldn't be necessary if your target browsers don't fall into the buggy versions.
 
-<div class="bd-example-row">
-{{< example >}}
+{{< example class="bd-example-row" >}}
 <div class="container">
   <div class="row">
     <div class="col">col</div>
@@ -167,14 +162,12 @@ There was a [Safari flexbox bug](https://github.com/philipwalton/flexbugs#flexbu
   </div>
 </div>
 {{< /example >}}
-</div>
 
 ### Setting one column width
 
 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.
 
-<div class="bd-example-row">
-{{< example >}}
+{{< example class="bd-example-row" >}}
 <div class="container">
   <div class="row">
     <div class="col">
@@ -200,14 +193,12 @@ Auto-layout for flexbox grid columns also means you can set the width of one col
   </div>
 </div>
 {{< /example >}}
-</div>
 
 ### Variable width content
 
 Use `col-{breakpoint}-auto` classes to size columns based on the natural width of their content.
 
-<div class="bd-example-row">
-{{< example >}}
+{{< example class="bd-example-row" >}}
 <div class="container">
   <div class="row justify-content-md-center">
     <div class="col col-lg-2">
@@ -233,7 +224,6 @@ Use `col-{breakpoint}-auto` classes to size columns based on the natural width o
   </div>
 </div>
 {{< /example >}}
-</div>
 
 ## Responsive classes
 
@@ -243,8 +233,7 @@ Bootstrap's grid includes five tiers of predefined classes for building complex
 
 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`.
 
-<div class="bd-example-row">
-{{< example >}}
+{{< example class="bd-example-row" >}}
 <div class="container">
   <div class="row">
     <div class="col">col</div>
@@ -258,14 +247,12 @@ For grids that are the same from the smallest of devices to the largest, use the
   </div>
 </div>
 {{< /example >}}
-</div>
 
 ### Stacked to horizontal
 
 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`).
 
-<div class="bd-example-row">
-{{< example >}}
+{{< example class="bd-example-row" >}}
 <div class="container">
   <div class="row">
     <div class="col-sm-8">col-sm-8</div>
@@ -278,14 +265,12 @@ Using a single set of `.col-sm-*` classes, you can create a basic grid system th
   </div>
 </div>
 {{< /example >}}
-</div>
 
 ### Mix and match
 
 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.
 
-<div class="bd-example-row">
-{{< example >}}
+{{< example class="bd-example-row" >}}
 <div class="container">
   <!-- Stack the columns on mobile by making one full-width and the other half-width -->
   <div class="row">
@@ -307,7 +292,6 @@ Don't want your columns to simply stack in some grid tiers? Use a combination of
   </div>
 </div>
 {{< /example >}}
-</div>
 
 ### Gutters
 
@@ -330,8 +314,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.
 
-<div class="bd-example-row">
-{{< example >}}
+{{< example class="bd-example-row" >}}
 <div class="container">
   <div class="row row-cols-2">
     <div class="col">Column</div>
@@ -341,10 +324,8 @@ Use these row columns classes to quickly create basic grid layouts or to control
   </div>
 </div>
 {{< /example >}}
-</div>
 
-<div class="bd-example-row">
-{{< example >}}
+{{< example class="bd-example-row" >}}
 <div class="container">
   <div class="row row-cols-3">
     <div class="col">Column</div>
@@ -354,10 +335,8 @@ Use these row columns classes to quickly create basic grid layouts or to control
   </div>
 </div>
 {{< /example >}}
-</div>
 
-<div class="bd-example-row">
-{{< example >}}
+{{< example class="bd-example-row" >}}
 <div class="container">
   <div class="row row-cols-4">
     <div class="col">Column</div>
@@ -367,10 +346,8 @@ Use these row columns classes to quickly create basic grid layouts or to control
   </div>
 </div>
 {{< /example >}}
-</div>
 
-<div class="bd-example-row">
-{{< example >}}
+{{< example class="bd-example-row" >}}
 <div class="container">
   <div class="row row-cols-4">
     <div class="col">Column</div>
@@ -380,10 +357,8 @@ Use these row columns classes to quickly create basic grid layouts or to control
   </div>
 </div>
 {{< /example >}}
-</div>
 
-<div class="bd-example-row">
-{{< example >}}
+{{< example class="bd-example-row" >}}
 <div class="container">
   <div class="row row-cols-1 row-cols-sm-2 row-cols-md-4">
     <div class="col">Column</div>
@@ -393,7 +368,6 @@ Use these row columns classes to quickly create basic grid layouts or to control
   </div>
 </div>
 {{< /example >}}
-</div>
 
 You can also use the accompanying Sass mixin, `row-cols()`:
 
@@ -415,8 +389,7 @@ Use flexbox alignment utilities to vertically and horizontally align columns. **
 
 ### Vertical alignment
 
-<div class="bd-example-row bd-example-row-flex-cols">
-{{< example >}}
+{{< example class="bd-example-row bd-example-row-flex-cols" >}}
 <div class="container">
   <div class="row align-items-start">
     <div class="col">
@@ -453,10 +426,8 @@ Use flexbox alignment utilities to vertically and horizontally align columns. **
   </div>
 </div>
 {{< /example >}}
-</div>
 
-<div class="bd-example-row bd-example-row-flex-cols">
-{{< example >}}
+{{< example class="bd-example-row bd-example-row-flex-cols" >}}
 <div class="container">
   <div class="row">
     <div class="col align-self-start">
@@ -471,12 +442,10 @@ Use flexbox alignment utilities to vertically and horizontally align columns. **
   </div>
 </div>
 {{< /example >}}
-</div>
 
 ### Horizontal alignment
 
-<div class="bd-example-row">
-{{< example >}}
+{{< example class="bd-example-row" >}}
 <div class="container">
   <div class="row justify-content-start">
     <div class="col-4">
@@ -520,7 +489,6 @@ Use flexbox alignment utilities to vertically and horizontally align columns. **
   </div>
 </div>
 {{< /example >}}
-</div>
 
 ### No gutters
 
@@ -545,21 +513,18 @@ Here's the source code for creating these styles. Note that column overrides are
 
 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).
 
-<div class="bd-example-row">
-{{< example >}}
+{{< example class="bd-example-row" >}}
 <div class="row no-gutters">
   <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 >}}
-</div>
 
 ### Column wrapping
 
 If more than 12 columns are placed within a single row, each group of extra columns will, as one unit, wrap onto a new line.
 
-<div class="bd-example-row">
-{{< example >}}
+{{< example class="bd-example-row" >}}
 <div class="container">
   <div class="row">
     <div class="col-9">.col-9</div>
@@ -568,14 +533,12 @@ If more than 12 columns are placed within a single row, each group of extra colu
   </div>
 </div>
 {{< /example >}}
-</div>
 
 ### Column breaks
 
 Breaking columns to a new line in flexbox requires a small hack: add an element with `width: 100%` wherever you want to wrap your columns to a new line. Normally this is accomplished with multiple `.row`s, but not every implementation method can account for this.
 
-<div class="bd-example-row">
-{{< example >}}
+{{< example class="bd-example-row" >}}
 <div class="container">
   <div class="row">
     <div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
@@ -589,12 +552,10 @@ Breaking columns to a new line in flexbox requires a small hack: add an element
   </div>
 </div>
 {{< /example >}}
-</div>
 
 You may also apply this break at specific breakpoints with our [responsive display utilities]({{< docsref "/utilities/display" >}}).
 
-<div class="bd-example-row">
-{{< example >}}
+{{< example class="bd-example-row" >}}
 <div class="container">
   <div class="row">
     <div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
@@ -608,7 +569,6 @@ You may also apply this break at specific breakpoints with our [responsive displ
   </div>
 </div>
 {{< /example >}}
-</div>
 
 ## Reordering
 
@@ -616,8 +576,7 @@ You may also apply this break at specific breakpoints with our [responsive displ
 
 Use `.order-` classes for controlling the **visual order** of your content. These classes are responsive, so you can set the `order` by breakpoint (e.g., `.order-1.order-md-2`). Includes support for `1` through `12` across all five grid tiers.
 
-<div class="bd-example-row">
-{{< example >}}
+{{< example class="bd-example-row" >}}
 <div class="container">
   <div class="row">
     <div class="col">
@@ -632,12 +591,10 @@ Use `.order-` classes for controlling the **visual order** of your content. Thes
   </div>
 </div>
 {{< /example >}}
-</div>
 
 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.
 
-<div class="bd-example-row">
-{{< example >}}
+{{< example class="bd-example-row" >}}
 <div class="container">
   <div class="row">
     <div class="col order-last">
@@ -652,7 +609,6 @@ There are also responsive `.order-first` and `.order-last` classes that change t
   </div>
 </div>
 {{< /example >}}
-</div>
 
 ### 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.
 
-<div class="bd-example-row">
-{{< example >}}
+{{< example class="bd-example-row" >}}
 <div class="container">
   <div class="row">
     <div class="col-md-4">.col-md-4</div>
@@ -678,12 +633,10 @@ Move columns to the right using `.offset-md-*` classes. These classes increase t
   </div>
 </div>
 {{< /example >}}
-</div>
 
 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" >}}).
 
-<div class="bd-example-row">
-{{< example >}}
+{{< example class="bd-example-row" >}}
 <div class="container">
   <div class="row">
     <div class="col-sm-5 col-md-6">.col-sm-5 .col-md-6</div>
@@ -695,14 +648,12 @@ In addition to column clearing at responsive breakpoints, you may need to reset
   </div>
 </div>
 {{< /example >}}
-</div>
 
 #### 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.
 
-<div class="bd-example-row">
-{{< example >}}
+{{< example class="bd-example-row" >}}
 <div class="container">
   <div class="row">
     <div class="col-md-4">.col-md-4</div>
@@ -718,14 +669,12 @@ With the move to flexbox in v4, you can use margin utilities like `.mr-auto` to
   </div>
 </div>
 {{< /example >}}
-</div>
 
 ## 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).
 
-<div class="bd-example-row">
-{{< example >}}
+{{< example class="bd-example-row" >}}
 <div class="container">
   <div class="row">
     <div class="col-sm-9">
@@ -742,7 +691,6 @@ To nest your content with the default grid, add a new `.row` and set of `.col-sm
   </div>
 </div>
 {{< /example >}}
-</div>
 
 ## Sass mixins
 
diff --git a/site/content/docs/4.5/utilities/borders.md b/site/content/docs/4.5/utilities/borders.md
index 2e7541f046..8958171103 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
 
-<div class="bd-example-border-utils">
-{{< example >}}
+{{< example class="bd-example-border-utils">}}
 <span class="border"></span>
 <span class="border-top"></span>
 <span class="border-right"></span>
 <span class="border-bottom"></span>
 <span class="border-left"></span>
 {{< /example >}}
-</div>
 
 ### Subtractive
 
-<div class="bd-example-border-utils bd-example-border-utils-0">
-{{< example >}}
+{{< example class="bd-example-border-utils bd-example-border-utils-0" >}}
 <span class="border-0"></span>
 <span class="border-top-0"></span>
 <span class="border-right-0"></span>
 <span class="border-bottom-0"></span>
 <span class="border-left-0"></span>
 {{< /example >}}
-</div>
 
 ## 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.
 
-<div class="bd-example bd-example-images">
-  {{< 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)" >}}
-</div>
-
-```html
-<img src="..." alt="..." class="rounded">
-<img src="..." alt="..." class="rounded-top">
-<img src="..." alt="..." class="rounded-right">
-<img src="..." alt="..." class="rounded-bottom">
-<img src="..." alt="..." class="rounded-left">
-<img src="..." alt="..." class="rounded-circle">
-<img src="..." alt="..." class="rounded-pill">
-<img src="..." alt="..." class="rounded-0">
-```
+{{< 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.
 
-<div class="bd-example bd-example-images">
-  {{< 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" >}}
-</div>
-
-```html
-<img src="..." alt="..." class="rounded-sm">
-<img src="..." alt="..." class="rounded-lg">
-```
+{{< 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 >}}