Remove custom example plugin. (#25784)

1 files changed, 69 insertions, 46 deletions

diff --git a/docs/4.0/components/navbar.md b/docs/4.0/components/navbar.md
index 2e69a61298..3e3d1f2773 100644
--- a/docs/4.0/components/navbar.md
+++ b/docs/4.0/components/navbar.md
@@ -32,7 +32,7 @@ Navbars come with built-in support for a handful of sub-components. Choose from
 
 Here's an example of all the sub-components included in a responsive light-themed navbar that automatically collapses at the `lg` (large) breakpoint.
 
-{% example html %}
+{% capture example %}
 <nav class="navbar navbar-expand-lg navbar-light bg-light">
   <a class="navbar-brand" href="#">Navbar</a>
   <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
@@ -68,7 +68,8 @@ Here's an example of all the sub-components included in a responsive light-theme
     </form>
   </div>
 </nav>
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}
 
 This example uses [color]({{ site.baseurl }}/docs/{{ site.docs_version }}/utilities/colors/) (`bg-light`) and [spacing]({{ site.baseurl }}/docs/{{ site.docs_version }}/utilities/spacing/) (`my-2`, `my-lg-0`, `mr-sm-0`, `my-sm-0`) utility classes.
 
@@ -76,7 +77,7 @@ This example uses [color]({{ site.baseurl }}/docs/{{ site.docs_version }}/utilit
 
 The `.navbar-brand` can be applied to most elements, but an anchor works best as some elements might require utility classes or custom styles.
 
-{% example html %}
+{% capture example %}
 <!-- As a link -->
 <nav class="navbar navbar-light bg-light">
   <a class="navbar-brand" href="#">Navbar</a>
@@ -86,20 +87,22 @@ The `.navbar-brand` can be applied to most elements, but an anchor works best as
 <nav class="navbar navbar-light bg-light">
   <span class="navbar-brand mb-0 h1">Navbar</span>
 </nav>
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}
 
 Adding images to the `.navbar-brand` will likely always require custom styles or utilities to properly size. Here are some examples to demonstrate.
 
-{% example html %}
+{% capture example %}
 <!-- Just an image -->
 <nav class="navbar navbar-light bg-light">
   <a class="navbar-brand" href="#">
     <img src="{{ site.baseurl }}/assets/brand/bootstrap-solid.svg" width="30" height="30" alt="">
   </a>
 </nav>
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}
 
-{% example html %}
+{% capture example %}
 <!-- Image and text -->
 <nav class="navbar navbar-light bg-light">
   <a class="navbar-brand" href="#">
@@ -107,7 +110,8 @@ Adding images to the `.navbar-brand` will likely always require custom styles or
     Bootstrap
   </a>
 </nav>
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}
 
 ### Nav
 
@@ -115,7 +119,7 @@ Navbar navigation links build on our `.nav` options with their own modifier clas
 
 Active states—with `.active`—to indicate the current page can be applied directly to `.nav-link`s or their immediate parent `.nav-item`s.
 
-{% example html %}
+{% capture example %}
 <nav class="navbar navbar-expand-lg navbar-light bg-light">
   <a class="navbar-brand" href="#">Navbar</a>
   <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
@@ -138,11 +142,12 @@ Active states—with `.active`—to indicate the current page can be applied dir
     </ul>
   </div>
 </nav>
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}
 
 And because we use classes for our navs, you can avoid the list-based approach entirely if you like.
 
-{% example html %}
+{% capture example %}
 <nav class="navbar navbar-expand-lg navbar-light bg-light">
   <a class="navbar-brand" href="#">Navbar</a>
   <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
@@ -157,11 +162,12 @@ And because we use classes for our navs, you can avoid the list-based approach e
     </div>
   </div>
 </nav>
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}
 
 You may also utilize dropdowns in your navbar nav. Dropdown menus require a wrapping element for positioning, so be sure to use separate and nested elements for `.nav-item` and `.nav-link` as shown below.
 
-{% example html %}
+{% capture example %}
 <nav class="navbar navbar-expand-lg navbar-light bg-light">
   <a class="navbar-brand" href="#">Navbar</a>
   <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
@@ -191,24 +197,26 @@ You may also utilize dropdowns in your navbar nav. Dropdown menus require a wrap
     </ul>
   </div>
 </nav>
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}
 
 ### Forms
 
 Place various form controls and components within a navbar with `.form-inline`.
 
-{% example html %}
+{% capture example %}
 <nav class="navbar navbar-light bg-light">
   <form class="form-inline">
     <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
     <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
   </form>
 </nav>
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}
 
 Align the contents of your inline forms with utilities as needed.
 
-{% example html %}
+{% capture example %}
 <nav class="navbar navbar-light bg-light justify-content-between">
   <a class="navbar-brand">Navbar</a>
   <form class="form-inline">
@@ -216,11 +224,12 @@ Align the contents of your inline forms with utilities as needed.
     <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
   </form>
 </nav>
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}
 
 Input groups work, too:
 
-{% example html %}
+{% capture example %}
 <nav class="navbar navbar-light bg-light">
   <form class="form-inline">
     <div class="input-group">
@@ -231,34 +240,37 @@ Input groups work, too:
     </div>
   </form>
 </nav>
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}
 
 Various buttons are supported as part of these navbar forms, too. This is also a great reminder that vertical alignment utilities can be used to align different sized elements.
 
-{% example html %}
+{% capture example %}
 <nav class="navbar navbar-light bg-light">
   <form class="form-inline">
     <button class="btn btn-outline-success" type="button">Main button</button>
     <button class="btn btn-sm btn-outline-secondary" type="button">Smaller button</button>
   </form>
 </nav>
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}
 
 ### Text
 
 Navbars may contain bits of text with the help of `.navbar-text`. This class adjusts vertical alignment and horizontal spacing for strings of text.
 
-{% example html %}
+{% capture example %}
 <nav class="navbar navbar-light bg-light">
   <span class="navbar-text">
     Navbar text with an inline element
   </span>
 </nav>
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}
 
 Mix and match with other components and utilities as needed.
 
-{% example html %}
+{% capture example %}
 <nav class="navbar navbar-expand-lg navbar-light bg-light">
   <a class="navbar-brand" href="#">Navbar w/ text</a>
   <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
@@ -281,7 +293,8 @@ Mix and match with other components and utilities as needed.
     </span>
   </div>
 </nav>
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}
 
 ## Color schemes
 
@@ -391,23 +404,25 @@ Theming the navbar has never been easier thanks to the combination of theming cl
 
 Although it's not required, you can wrap a navbar in a `.container` to center it on a page or add one within to only center the contents of a [fixed or static top navbar](#placement).
 
-{% example html %}
+{% capture example %}
 <div class="container">
   <nav class="navbar navbar-expand-lg navbar-light bg-light">
     <a class="navbar-brand" href="#">Navbar</a>
   </nav>
 </div>
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}
 
 When the container is within your navbar, its horizontal padding is removed at breakpoints lower than your specified `.navbar-expand{-sm|-md|-lg|-xl}` class. This ensures we're not doubling up on padding unnecessarily on lower viewports when your navbar is collapsed.
 
-{% example html %}
+{% capture example %}
 <nav class="navbar navbar-expand-lg navbar-light bg-light">
   <div class="container">
     <a class="navbar-brand" href="#">Navbar</a>
   </div>
 </nav>
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}
 
 ## Placement
 
@@ -415,29 +430,33 @@ Use our [position utilities]({{ site.baseurl }}/docs/{{ site.docs_version }}/uti
 
 Also note that **`.sticky-top` uses `position: sticky`, which [isn't fully supported in every browser](https://caniuse.com/#feat=css-sticky)**.
 
-{% example html %}
+{% capture example %}
 <nav class="navbar navbar-light bg-light">
   <a class="navbar-brand" href="#">Default</a>
 </nav>
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}
 
-{% example html %}
+{% capture example %}
 <nav class="navbar fixed-top navbar-light bg-light">
   <a class="navbar-brand" href="#">Fixed top</a>
 </nav>
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}
 
-{% example html %}
+{% capture example %}
 <nav class="navbar fixed-bottom navbar-light bg-light">
   <a class="navbar-brand" href="#">Fixed bottom</a>
 </nav>
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}
 
-{% example html %}
+{% capture example %}
 <nav class="navbar sticky-top navbar-light bg-light">
   <a class="navbar-brand" href="#">Sticky top</a>
 </nav>
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}
 
 ## Responsive behaviors
 
@@ -451,7 +470,7 @@ Navbar togglers are left-aligned by default, but should they follow a sibling el
 
 With no `.navbar-brand` shown in lowest breakpoint:
 
-{% example html %}
+{% capture example %}
 <nav class="navbar navbar-expand-lg navbar-light bg-light">
   <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation">
     <span class="navbar-toggler-icon"></span>
@@ -475,11 +494,12 @@ With no `.navbar-brand` shown in lowest breakpoint:
     </form>
   </div>
 </nav>
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}
 
 With a brand name shown on the left and toggler on the right:
 
-{% example html %}
+{% capture example %}
 <nav class="navbar navbar-expand-lg navbar-light bg-light">
   <a class="navbar-brand" href="#">Navbar</a>
   <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
@@ -504,11 +524,12 @@ With a brand name shown on the left and toggler on the right:
     </form>
   </div>
 </nav>
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}
 
 With a toggler on the left and brand name on the right:
 
-{% example html %}
+{% capture example %}
 <nav class="navbar navbar-expand-lg navbar-light bg-light">
   <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo03" aria-controls="navbarTogglerDemo03" aria-expanded="false" aria-label="Toggle navigation">
     <span class="navbar-toggler-icon"></span>
@@ -533,13 +554,14 @@ With a toggler on the left and brand name on the right:
     </form>
   </div>
 </nav>
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}
 
 ### External content
 
 Sometimes you want to use the collapse plugin to trigger hidden content elsewhere on the page. Because our plugin works on the `id` and `data-target` matching, that's easily done!
 
-{% example html %}
+{% capture example %}
 <div class="pos-f-t">
   <div class="collapse" id="navbarToggleExternalContent">
     <div class="bg-dark p-4">
@@ -553,4 +575,5 @@ Sometimes you want to use the collapse plugin to trigger hidden content elsewher
     </button>
   </nav>
 </div>
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}