Remove custom example plugin. (#25784)

2 files changed, 90 insertions, 60 deletions

diff --git a/docs/4.0/layout/grid.md b/docs/4.0/layout/grid.md
index 6a7a771bb..c8dad9ecf 100644
--- a/docs/4.0/layout/grid.md
+++ b/docs/4.0/layout/grid.md
@@ -13,7 +13,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 html %}
+{% capture example %}
 <div class="container">
   <div class="row">
     <div class="col-sm">
@@ -27,7 +27,8 @@ Bootstrap's grid system uses a series of containers, rows, and columns to layout
     </div>
   </div>
 </div>
-{% endexample %}
+{% endcapture %}
+{% include example.html content=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`.
@@ -124,7 +125,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 html %}
+{% capture example %}
 <div class="container">
   <div class="row">
     <div class="col">
@@ -146,13 +147,14 @@ For example, here are two grid layouts that apply to every device and viewport,
     </div>
   </div>
 </div>
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}
 </div>
 
 Equal-width columns can be broken into multiple lines, but there was a [Safari flexbox bug](https://github.com/philipwalton/flexbugs#11-min-and-max-size-declarations-are-ignored-when-wrapping-flex-items) 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 you're up-to-date.
 
 <div class="bd-example-row">
-{% example html %}
+{% capture example %}
 <div class="container">
   <div class="row">
     <div class="col">Column</div>
@@ -162,7 +164,8 @@ Equal-width columns can be broken into multiple lines, but there was a [Safari f
     <div class="col">Column</div>
   </div>
 </div>
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}
 </div>
 
 ### Setting one column width
@@ -170,7 +173,7 @@ Equal-width columns can be broken into multiple lines, but there was a [Safari f
 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 html %}
+{% capture example %}
 <div class="container">
   <div class="row">
     <div class="col">
@@ -195,7 +198,8 @@ Auto-layout for flexbox grid columns also means you can set the width of one col
     </div>
   </div>
 </div>
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}
 </div>
 
 ### Variable width content
@@ -203,7 +207,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.
 
 <div class="bd-example-row">
-{% example html %}
+{% capture example %}
 <div class="container">
   <div class="row justify-content-md-center">
     <div class="col col-lg-2">
@@ -228,7 +232,8 @@ Use `col-{breakpoint}-auto` classes to size columns based on the natural width o
     </div>
   </div>
 </div>
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}
 </div>
 
 ### Equal-width multi-row
@@ -236,7 +241,7 @@ Use `col-{breakpoint}-auto` classes to size columns based on the natural width o
 Create equal-width columns that span multiple rows by inserting a `.w-100` where you want the columns to break to a new line. Make the breaks responsive by mixing the `.w-100` with some [responsive display utilities]({{ site.baseurl }}/docs/{{ site.docs_version }}/utilities/display/).
 
 <div class="bd-example-row">
-{% example html %}
+{% capture example %}
 <div class="row">
   <div class="col">col</div>
   <div class="col">col</div>
@@ -244,7 +249,8 @@ Create equal-width columns that span multiple rows by inserting a `.w-100` where
   <div class="col">col</div>
   <div class="col">col</div>
 </div>
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}
 </div>
 
 ## Responsive classes
@@ -256,7 +262,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 html %}
+{% capture example %}
 <div class="row">
   <div class="col">col</div>
   <div class="col">col</div>
@@ -267,7 +273,8 @@ For grids that are the same from the smallest of devices to the largest, use the
   <div class="col-8">col-8</div>
   <div class="col-4">col-4</div>
 </div>
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}
 </div>
 
 ### Stacked to horizontal
@@ -275,7 +282,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`).
 
 <div class="bd-example-row">
-{% example html %}
+{% capture example %}
 <div class="row">
   <div class="col-sm-8">col-sm-8</div>
   <div class="col-sm-4">col-sm-4</div>
@@ -285,7 +292,8 @@ Using a single set of `.col-sm-*` classes, you can create a basic grid system th
   <div class="col-sm">col-sm</div>
   <div class="col-sm">col-sm</div>
 </div>
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}
 </div>
 
 ### Mix and match
@@ -293,7 +301,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.
 
 <div class="bd-example-row">
-{% example html %}
+{% capture example %}
 <!-- Stack the columns on mobile by making one full-width and the other half-width -->
 <div class="row">
   <div class="col-12 col-md-8">.col-12 .col-md-8</div>
@@ -312,7 +320,8 @@ Don't want your columns to simply stack in some grid tiers? Use a combination of
   <div class="col-6">.col-6</div>
   <div class="col-6">.col-6</div>
 </div>
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}
 </div>
 
 ## Alignment
@@ -322,7 +331,7 @@ Use flexbox alignment utilities to vertically and horizontally align columns.
 ### Vertical alignment
 
 <div class="bd-example-row bd-example-row-flex-cols">
-{% example html %}
+{% capture example %}
 <div class="container">
   <div class="row align-items-start">
     <div class="col">
@@ -358,11 +367,12 @@ Use flexbox alignment utilities to vertically and horizontally align columns.
     </div>
   </div>
 </div>
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}
 </div>
 
 <div class="bd-example-row bd-example-row-flex-cols">
-{% example html %}
+{% capture example %}
 <div class="container">
   <div class="row">
     <div class="col align-self-start">
@@ -376,13 +386,14 @@ Use flexbox alignment utilities to vertically and horizontally align columns.
     </div>
   </div>
 </div>
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}
 </div>
 
 ### Horizontal alignment
 
 <div class="bd-example-row">
-{% example html %}
+{% capture example %}
 <div class="container">
   <div class="row justify-content-start">
     <div class="col-4">
@@ -425,7 +436,8 @@ Use flexbox alignment utilities to vertically and horizontally align columns.
     </div>
   </div>
 </div>
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}
 </div>
 
 ### No gutters
@@ -452,12 +464,13 @@ 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 html %}
+{% capture example %}
 <div class="row no-gutters">
   <div class="col-12 col-sm-6 col-md-8">.col-12 .col-sm-6 .col-md-8</div>
   <div class="col-6 col-md-4">.col-6 .col-md-4</div>
 </div>
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}
 </div>
 
 ### Column wrapping
@@ -465,13 +478,14 @@ In practice, here's how it looks. Note you can continue to use this with all oth
 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 html %}
+{% capture example %}
 <div class="row">
   <div class="col-9">.col-9</div>
   <div class="col-4">.col-4<br>Since 9 + 4 = 13 &gt; 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit.</div>
   <div class="col-6">.col-6<br>Subsequent columns continue along the new line.</div>
 </div>
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}
 </div>
 
 ### Column breaks
@@ -479,7 +493,7 @@ If more than 12 columns are placed within a single row, each group of extra colu
 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 html %}
+{% capture example %}
 <div class="row">
   <div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
   <div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
@@ -490,13 +504,14 @@ Breaking columns to a new line in flexbox requires a small hack: add an element
   <div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
   <div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
 </div>
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}
 </div>
 
 You may also apply this break at specific breakpoints with our [responsive display utilities]({{ site.baseurl }}/docs/{{ site.docs_version }}/utilities/display/).
 
 <div class="bd-example-row">
-{% example html %}
+{% capture example %}
 <div class="row">
   <div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
   <div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
@@ -507,7 +522,8 @@ You may also apply this break at specific breakpoints with our [responsive displ
   <div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
   <div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
 </div>
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}
 </div>
 
 ## Reordering
@@ -517,7 +533,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 html %}
+{% capture example %}
 <div class="container">
   <div class="row">
     <div class="col">
@@ -531,13 +547,14 @@ Use `.order-` classes for controlling the **visual order** of your content. Thes
     </div>
   </div>
 </div>
-{% endexample %}
+{% endcapture %}
+{% include example.html content=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 html %}
+{% capture example %}
 <div class="container">
   <div class="row">
     <div class="col order-last">
@@ -551,7 +568,8 @@ There are also responsive `.order-first` and `.order-last` classes that change t
     </div>
   </div>
 </div>
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}
 </div>
 
 ### Offsetting columns
@@ -563,7 +581,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 html %}
+{% capture example %}
 <div class="row">
   <div class="col-md-4">.col-md-4</div>
   <div class="col-md-4 offset-md-4">.col-md-4 .offset-md-4</div>
@@ -575,13 +593,14 @@ Move columns to the right using `.offset-md-*` classes. These classes increase t
 <div class="row">
   <div class="col-md-6 offset-md-3">.col-md-6 .offset-md-3</div>
 </div>
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}
 </div>
 
 In addition to column clearing at responsive breakpoints, you may need to reset offsets. See this in action in [the grid example]({{ site.baseurl }}/docs/{{ site.docs_version }}/examples/grid/).
 
 <div class="bd-example-row">
-{% example html %}
+{% capture example %}
 <div class="row">
   <div class="col-sm-5 col-md-6">.col-sm-5 .col-md-6</div>
   <div class="col-sm-5 offset-sm-2 col-md-6 offset-md-0">.col-sm-5 .offset-sm-2 .col-md-6 .offset-md-0</div>
@@ -591,7 +610,8 @@ In addition to column clearing at responsive breakpoints, you may need to reset
   <div class="col-sm-6 col-md-5 col-lg-6">.col-sm-6 .col-md-5 .col-lg-6</div>
   <div class="col-sm-6 col-md-5 offset-md-2 col-lg-6 offset-lg-0">.col-sm-6 .col-md-5 .offset-md-2 .col-lg-6 .offset-lg-0</div>
 </div>
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}
 </div>
 
 #### Margin utilities
@@ -599,7 +619,7 @@ In addition to column clearing at responsive breakpoints, you may need to reset
 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 html %}
+{% capture example %}
 <div class="row">
   <div class="col-md-4">.col-md-4</div>
   <div class="col-md-4 ml-auto">.col-md-4 .ml-auto</div>
@@ -612,7 +632,8 @@ With the move to flexbox in v4, you can use margin utilities like `.mr-auto` to
   <div class="col-auto mr-auto">.col-auto .mr-auto</div>
   <div class="col-auto">.col-auto</div>
 </div>
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}
 </div>
 
 ## Nesting
@@ -620,7 +641,7 @@ With the move to flexbox in v4, you can use margin utilities like `.mr-auto` to
 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 html %}
+{% capture example %}
 <div class="row">
   <div class="col-sm-9">
     Level 1: .col-sm-9
@@ -634,7 +655,8 @@ To nest your content with the default grid, add a new `.row` and set of `.col-sm
     </div>
   </div>
 </div>
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}
 </div>
 
 ## Sass mixins
@@ -723,14 +745,15 @@ You can modify the variables to your own custom values, or just use the mixins w
 }
 {% endhighlight %}
 
-{% example html %}
+{% capture example %}
 <div class="example-container">
   <div class="example-row">
     <div class="example-content-main">Main content</div>
     <div class="example-content-secondary">Secondary content</div>
   </div>
 </div>
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}
 
 ## Customizing the grid
 
diff --git a/docs/4.0/layout/media-object.md b/docs/4.0/layout/media-object.md
index 3aebe6028..70a5e6a94 100644
--- a/docs/4.0/layout/media-object.md
+++ b/docs/4.0/layout/media-object.md
@@ -12,7 +12,7 @@ The [media object](http://www.stubbornella.org/content/2010/06/25/the-media-obje
 
 Below is an example of a single media object. Only two classes are required—the wrapping `.media` and the `.media-body` around your content. Optional padding and margin can be controlled through [spacing utilities]({{ site.baseurl }}/docs/{{ site.docs_version }}/utilities/spacing/).
 
-{% example html %}
+{% capture example %}
 <div class="media">
   <img class="mr-3" data-src="holder.js/64x64" alt="Generic placeholder image">
   <div class="media-body">
@@ -20,7 +20,8 @@ Below is an example of a single media object. Only two classes are required—th
     Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
   </div>
 </div>
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}
 
 {% capture callout %}
 ##### Flexbug #12: Inline elements aren't treated as flex items
@@ -35,7 +36,7 @@ Internet Explorer 10-11 do not render inline elements like links or images (or `
 
 Media objects can be infinitely nested, though we suggest you stop at some point. Place nested `.media` within the `.media-body` of a parent media object.
 
-{% example html %}
+{% capture example %}
 <div class="media">
   <img class="mr-3" data-src="holder.js/64x64" alt="Generic placeholder image">
   <div class="media-body">
@@ -53,13 +54,14 @@ Media objects can be infinitely nested, though we suggest you stop at some point
     </div>
   </div>
 </div>
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}
 
 ## Alignment
 
 Media in a media object can be aligned with flexbox utilities to the top (default), middle, or end of your `.media-body` content.
 
-{% example html %}
+{% capture example %}
 <div class="media">
   <img class="align-self-start mr-3" data-src="holder.js/64x64" alt="Generic placeholder image">
   <div class="media-body">
@@ -68,9 +70,10 @@ Media in a media object can be aligned with flexbox utilities to the top (defaul
     <p>Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
   </div>
 </div>
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}
 
-{% example html %}
+{% capture example %}
 <div class="media">
   <img class="align-self-center mr-3" data-src="holder.js/64x64" alt="Generic placeholder image">
   <div class="media-body">
@@ -79,9 +82,10 @@ Media in a media object can be aligned with flexbox utilities to the top (defaul
     <p class="mb-0">Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
   </div>
 </div>
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}
 
-{% example html %}
+{% capture example %}
 <div class="media">
   <img class="align-self-end mr-3" data-src="holder.js/64x64" alt="Generic placeholder image">
   <div class="media-body">
@@ -90,13 +94,14 @@ Media in a media object can be aligned with flexbox utilities to the top (defaul
     <p class="mb-0">Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
   </div>
 </div>
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}
 
 ## Order
 
 Change the order of content in media objects by modifying the HTML itself, or by adding some custom flexbox CSS to set the `order` property (to an integer of your choosing).
 
-{% example html %}
+{% capture example %}
 <div class="media">
   <div class="media-body">
     <h5 class="mt-0 mb-1">Media object</h5>
@@ -104,13 +109,14 @@ Change the order of content in media objects by modifying the HTML itself, or by
   </div>
   <img class="ml-3" data-src="holder.js/64x64" alt="Generic placeholder image">
 </div>
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}
 
 ## Media list
 
 Because the media object has so few structural requirements, you can also use these classes on list HTML elements. On your `<ul>` or `<ol>`, add the `.list-unstyled` to remove any browser default list styles, and then apply `.media` to your `<li>`s. As always, use spacing utilities wherever needed to fine tune.
 
-{% example html %}
+{% capture example %}
 <ul class="list-unstyled">
   <li class="media">
     <img class="mr-3" data-src="holder.js/64x64" alt="Generic placeholder image">
@@ -134,4 +140,5 @@ Because the media object has so few structural requirements, you can also use th
     </div>
   </li>
 </ul>
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}