Remove custom example plugin. (#25784)

1 files changed, 141 insertions, 94 deletions

diff --git a/docs/4.0/components/forms.md b/docs/4.0/components/forms.md
index fadc2dd27..0eb34bae9 100644
--- a/docs/4.0/components/forms.md
+++ b/docs/4.0/components/forms.md
@@ -14,7 +14,7 @@ Be sure to use an appropriate `type` attribute on all inputs (e.g., `email` for
 
 Here's a quick example to demonstrate Bootstrap's form styles. Keep reading for documentation on required classes, form layout, and more.
 
-{% example html %}
+{% capture example %}
 <form>
   <div class="form-group">
     <label for="exampleInputEmail1">Email address</label>
@@ -31,7 +31,8 @@ Here's a quick example to demonstrate Bootstrap's form styles. Keep reading for
   </div>
   <button type="submit" class="btn btn-primary">Submit</button>
 </form>
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}
 
 ## Form controls
 
@@ -39,7 +40,7 @@ Textual form controls—like `<input>`s, `<select>`s, and `<textarea>`s—are st
 
 Be sure to explore our [custom forms](#custom-forms) to further style `<select>`s.
 
-{% example html %}
+{% capture example %}
 <form>
   <div class="form-group">
     <label for="exampleFormControlInput1">Email address</label>
@@ -70,30 +71,33 @@ Be sure to explore our [custom forms](#custom-forms) to further style `<select>`
     <textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
   </div>
 </form>
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}
 
 For file inputs, swap the `.form-control` for `.form-control-file`.
 
-{% example html %}
+{% capture example %}
 <form>
   <div class="form-group">
     <label for="exampleFormControlFile1">Example file input</label>
     <input type="file" class="form-control-file" id="exampleFormControlFile1">
   </div>
 </form>
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}
 
 ### Sizing
 
 Set heights using classes like `.form-control-lg` and `.form-control-sm`.
 
-{% example html %}
+{% capture example %}
 <input class="form-control form-control-lg" type="text" placeholder=".form-control-lg">
 <input class="form-control" type="text" placeholder="Default input">
 <input class="form-control form-control-sm" type="text" placeholder=".form-control-sm">
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}
 
-{% example html %}
+{% capture example %}
 <select class="form-control form-control-lg">
   <option>Large select</option>
 </select>
@@ -103,34 +107,37 @@ Set heights using classes like `.form-control-lg` and `.form-control-sm`.
 <select class="form-control form-control-sm">
   <option>Small select</option>
 </select>
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}
 
 ## Range Inputs
 
 Set horizontally scrollable range inputs using `.form-control-range`.
 
-{% example html %}
+{% capture example %}
 <form>
   <div class="form-group">
     <label for="formControlRange">Example Range input</label>
     <input type="range" class="form-control-range" id="formControlRange">
   </div>
 </form>
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}
 
 ### Readonly
 
 Add the `readonly` boolean attribute on an input to prevent modification of the input's value. Read-only inputs appear lighter (just like disabled inputs), but retain the standard cursor.
 
-{% example html %}
+{% capture example %}
 <input class="form-control" type="text" placeholder="Readonly input here…" readonly>
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}
 
 ### Readonly plain text
 
 If you want to have `<input readonly>` elements in your form styled as plain text, use the `.form-control-plaintext` class to remove the default form field styling and preserve the correct margin and padding.
 
-{% example html %}
+{% capture example %}
 <form>
   <div class="form-group row">
     <label for="staticEmail" class="col-sm-2 col-form-label">Email</label>
@@ -145,9 +152,10 @@ If you want to have `<input readonly>` elements in your form styled as plain tex
     </div>
   </div>
 </form>
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}
 
-{% example html %}
+{% capture example %}
 <form class="form-inline">
   <div class="form-group mb-2">
     <label for="staticEmail2" class="sr-only">Email</label>
@@ -159,7 +167,8 @@ If you want to have `<input readonly>` elements in your form styled as plain tex
   </div>
   <button type="submit" class="btn btn-primary mb-2">Confirm identity</button>
 </form>
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}
 
 ## Checkboxes and radios
 
@@ -173,7 +182,7 @@ Checkboxes and radios use are built to support HTML-based form validation and pr
 
 By default, any number of checkboxes and radios that are immediate sibling will be vertically stacked and appropriately spaced with `.form-check`.
 
-{% example html %}
+{% capture example %}
 <div class="form-check">
   <input class="form-check-input" type="checkbox" value="" id="defaultCheck1">
   <label class="form-check-label" for="defaultCheck1">
@@ -186,9 +195,10 @@ By default, any number of checkboxes and radios that are immediate sibling will
     Disabled checkbox
   </label>
 </div>
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}
 
-{% example html %}
+{% capture example %}
 <div class="form-check">
   <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios1" value="option1" checked>
   <label class="form-check-label" for="exampleRadios1">
@@ -207,13 +217,14 @@ By default, any number of checkboxes and radios that are immediate sibling will
     Disabled radio
   </label>
 </div>
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}
 
 ### Inline
 
 Group checkboxes or radios on the same horizontal row by adding `.form-check-inline` to any `.form-check`.
 
-{% example html %}
+{% capture example %}
 <div class="form-check form-check-inline">
   <input class="form-check-input" type="checkbox" id="inlineCheckbox1" value="option1">
   <label class="form-check-label" for="inlineCheckbox1">1</label>
@@ -226,9 +237,10 @@ Group checkboxes or radios on the same horizontal row by adding `.form-check-inl
   <input class="form-check-input" type="checkbox" id="inlineCheckbox3" value="option3" disabled>
   <label class="form-check-label" for="inlineCheckbox3">3 (disabled)</label>
 </div>
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}
 
-{% example html %}
+{% capture example %}
 <div class="form-check form-check-inline">
   <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1">
   <label class="form-check-label" for="inlineRadio1">1</label>
@@ -241,20 +253,22 @@ Group checkboxes or radios on the same horizontal row by adding `.form-check-inl
   <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3" disabled>
   <label class="form-check-label" for="inlineRadio3">3 (disabled)</label>
 </div>
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}
 
 ### Without labels
 
 Add `.position-static` to inputs within `.form-check` that don't have any label text. Remember to still provide some form of label for assistive technologies (for instance, using `aria-label`).
 
-{% example html %}
+{% capture example %}
 <div class="form-check">
   <input class="form-check-input position-static" type="checkbox" id="blankCheckbox" value="option1" aria-label="...">
 </div>
 <div class="form-check">
   <input class="form-check-input position-static" type="radio" name="blankRadio" id="blankRadio1" value="option1" aria-label="...">
 </div>
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}
 
 ## Layout
 
@@ -264,7 +278,7 @@ Since Bootstrap applies `display: block` and `width: 100%` to almost all our for
 
 The `.form-group` class is the easiest way to add some structure to forms. It provides a flexible class that encourages proper grouping of labels, controls, optional help text, and form validation messaging. By default it only applies `margin-bottom`, but it picks up additional styles in `.form-inline` as needed. Use it with `<fieldset>`s, `<div>`s, or nearly any other element.
 
-{% example html %}
+{% capture example %}
 <form>
   <div class="form-group">
     <label for="formGroupExampleInput">Example label</label>
@@ -275,13 +289,14 @@ The `.form-group` class is the easiest way to add some structure to forms. It pr
     <input type="text" class="form-control" id="formGroupExampleInput2" placeholder="Another input">
   </div>
 </form>
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}
 
 ### Form grid
 
 More complex forms can be built using our grid classes. Use these for form layouts that require multiple columns, varied widths, and additional alignment options.
 
-{% example html %}
+{% capture example %}
 <form>
   <div class="row">
     <div class="col">
@@ -292,13 +307,14 @@ More complex forms can be built using our grid classes. Use these for form layou
     </div>
   </div>
 </form>
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}
 
 #### Form row
 
 You may also swap `.row` for `.form-row`, a variation of our standard grid row that overrides the default column gutters for tighter and more compact layouts.
 
-{% example html %}
+{% capture example %}
 <form>
   <div class="form-row">
     <div class="col">
@@ -309,11 +325,12 @@ You may also swap `.row` for `.form-row`, a variation of our standard grid row t
     </div>
   </div>
 </form>
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}
 
 More complex layouts can also be created with the grid system.
 
-{% example html %}
+{% capture example %}
 <form>
   <div class="form-row">
     <div class="form-group col-md-6">
@@ -360,7 +377,8 @@ More complex layouts can also be created with the grid system.
   </div>
   <button type="submit" class="btn btn-primary">Sign in</button>
 </form>
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}
 
 #### Horizontal form
 
@@ -368,7 +386,7 @@ Create horizontal forms with the grid by adding the `.row` class to form groups
 
 At times, you maybe need to use margin or padding utilities to create that perfect alignment you need. For example, we've removed the `padding-top` on our stacked radio inputs label to better align the text baseline.
 
-{% example html %}
+{% capture example %}
 <form>
   <div class="form-group row">
     <label for="inputEmail3" class="col-sm-2 col-form-label">Email</label>
@@ -424,13 +442,14 @@ At times, you maybe need to use margin or padding utilities to create that perfe
     </div>
   </div>
 </form>
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}
 
 ##### Horizontal form label sizing
 
 Be sure to use `.col-form-label-sm` or `.col-form-label-lg` to your `<label>`s or `<legend>`s to correctly follow the size of `.form-control-lg` and `.form-control-sm`.
 
-{% example html %}
+{% capture example %}
 <form>
   <div class="form-group row">
     <label for="colFormLabelSm" class="col-sm-2 col-form-label col-form-label-sm">Email</label>
@@ -451,13 +470,14 @@ Be sure to use `.col-form-label-sm` or `.col-form-label-lg` to your `<label>`s o
     </div>
   </div>
 </form>
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}
 
 #### Column sizing
 
 As shown in the previous examples, our grid system allows you to place any number of `.col`s within a `.row` or `.form-row`. They'll split the available width equally between them. You may also pick a subset of your columns to take up more or less space, while the remaining `.col`s equally split the rest, with specific column classes like `.col-7`.
 
-{% example html %}
+{% capture example %}
 <form>
   <div class="form-row">
     <div class="col-7">
@@ -471,13 +491,14 @@ As shown in the previous examples, our grid system allows you to place any numbe
     </div>
   </div>
 </form>
-{% endexample html %}
+{% endcapture %}
+{% include example.html content=example %}
 
 #### Auto-sizing
 
 The example below uses a flexbox utility to vertically center the contents and changes `.col` to `.col-auto` so that your columns only take up as much space as needed. Put another way, the column sizes itself based on the contents.
 
-{% example html %}
+{% capture example %}
 <form>
   <div class="form-row align-items-center">
     <div class="col-auto">
@@ -506,11 +527,12 @@ The example below uses a flexbox utility to vertically center the contents and c
     </div>
   </div>
 </form>
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}
 
 You can then remix that once again with size-specific column classes.
 
-{% example html %}
+{% capture example %}
 <form>
   <div class="form-row align-items-center">
     <div class="col-sm-3 my-1">
@@ -539,11 +561,12 @@ You can then remix that once again with size-specific column classes.
     </div>
   </div>
 </form>
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}
 
 And of course [custom form controls](#custom-forms) are supported.
 
-{% example html %}
+{% capture example %}
 <form>
   <div class="form-row align-items-center">
     <div class="col-auto my-1">
@@ -566,7 +589,8 @@ And of course [custom form controls](#custom-forms) are supported.
     </div>
   </div>
 </form>
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}
 
 ### Inline forms
 
@@ -578,7 +602,7 @@ Use the `.form-inline` class to display a series of labels, form controls, and b
 
 You may need to manually address the width and alignment of individual form controls with [spacing utilities]({{ site.baseurl }}/docs/{{ site.docs_version }}/utilities/spacing/) (as shown below). Lastly, be sure to always include a `<label>` with each form control, even if you need to hide it from non-screenreader visitors with `.sr-only`.
 
-{% example html %}
+{% capture example %}
 <form class="form-inline">
   <label class="sr-only" for="inlineFormInputName2">Name</label>
   <input type="text" class="form-control mb-2 mr-sm-2" id="inlineFormInputName2" placeholder="Jane Doe">
@@ -600,11 +624,12 @@ You may need to manually address the width and alignment of individual form cont
 
   <button type="submit" class="btn btn-primary mb-2">Submit</button>
 </form>
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}
 
 Custom form controls and selects are also supported.
 
-{% example html %}
+{% capture example %}
 <form class="form-inline">
   <label class="my-1 mr-2" for="inlineFormCustomSelectPref">Preference</label>
   <select class="custom-select my-1 mr-sm-2" id="inlineFormCustomSelectPref">
@@ -621,7 +646,8 @@ Custom form controls and selects are also supported.
 
   <button type="submit" class="btn btn-primary my-1">Submit</button>
 </form>
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}
 
 {% capture callout %}
 ##### Alternatives to hidden labels
@@ -642,17 +668,18 @@ Help text should be explicitly associated with the form control it relates to us
 
 Help text below inputs can be styled with `.form-text`. This class includes `display: block` and adds some top margin for easy spacing from the inputs above.
 
-{% example html %}
+{% capture example %}
 <label for="inputPassword5">Password</label>
 <input type="password" id="inputPassword5" class="form-control" aria-describedby="passwordHelpBlock">
 <small id="passwordHelpBlock" class="form-text text-muted">
   Your password must be 8-20 characters long, contain letters and numbers, and must not contain spaces, special characters, or emoji.
 </small>
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}
 
 Inline text can use any typical inline HTML element (be it a `<small>`, `<span>`, or something else) with nothing more than a utility class.
 
-{% example html %}
+{% capture example %}
 <form class="form-inline">
   <div class="form-group">
     <label for="inputPassword6">Password</label>
@@ -662,7 +689,8 @@ Inline text can use any typical inline HTML element (be it a `<small>`, `<span>`
     </small>
   </div>
 </form>
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}
 
 ## Disabled forms
 
@@ -674,7 +702,7 @@ Add the `disabled` boolean attribute on an input to prevent user interactions an
 
 Add the `disabled` attribute to a `<fieldset>` to disable all the controls within.
 
-{% example html %}
+{% capture example %}
 <form>
   <fieldset disabled>
     <div class="form-group">
@@ -696,7 +724,8 @@ Add the `disabled` attribute to a `<fieldset>` to disable all the controls withi
     <button type="submit" class="btn btn-primary">Submit</button>
   </fieldset>
 </form>
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}
 
 {% capture callout %}
 ##### Caveat with anchors
@@ -742,7 +771,7 @@ For custom Bootstrap form validation messages, you'll need to add the `novalidat
 
 When attempting to submit, you'll see the `:invalid` and `:valid` styles applied to your form controls.
 
-{% example html %}
+{% capture example %}
 <form class="needs-validation" novalidate>
   <div class="form-row">
     <div class="col-md-4 mb-3">
@@ -829,7 +858,8 @@ When attempting to submit, you'll see the `:invalid` and `:valid` styles applied
   }, false);
 })();
 </script>
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}
 
 ### Browser defaults
 
@@ -837,7 +867,7 @@ Not interested in custom validation feedback messages or writing JavaScript to c
 
 While these feedback styles cannot be styled with CSS, you can still customize the feedback text through JavaScript.
 
-{% example html %}
+{% capture example %}
 <form>
   <div class="form-row">
     <div class="col-md-4 mb-3">
@@ -882,13 +912,14 @@ While these feedback styles cannot be styled with CSS, you can still customize t
   </div>
   <button class="btn btn-primary" type="submit">Submit form</button>
 </form>
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}
 
 ### Server side
 
 We recommend using client side validation, but in case you require server side, you can indicate invalid and valid form fields with `.is-invalid` and `.is-valid`. Note that `.invalid-feedback` is also supported with these classes.
 
-{% example html %}
+{% capture example %}
 <form>
   <div class="form-row">
     <div class="col-md-4 mb-3">
@@ -954,13 +985,14 @@ We recommend using client side validation, but in case you require server side,
   </div>
   <button class="btn btn-primary" type="submit">Submit form</button>
 </form>
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}
 
 ### Supported elements
 
 Our example forms show native textual `<input>`s above, but form validation styles are available for our custom form controls, too.
 
-{% example html %}
+{% capture example %}
 <form class="was-validated">
   <div class="custom-control custom-checkbox mb-3">
     <input type="checkbox" class="custom-control-input" id="customControlValidation1" required>
@@ -994,13 +1026,14 @@ Our example forms show native textual `<input>`s above, but form validation styl
     <div class="invalid-feedback">Example invalid custom file feedback</div>
   </div>
 </form>
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}
 
 ### Tooltips
 
 If your form layout allows it, you can swap the `.{valid|invalid}-feedback` classes for `.{valid|invalid}-tooltip` classes to display validation feedback in a styled tooltip. Be sure to have a parent with `position: relative` on it for tooltip positioning. In the example below, our column classes have this already, but your project may require an alternative setup.
 
-{% example html %}
+{% capture example %}
 <form class="needs-validation" novalidate>
   <div class="form-row">
     <div class="col-md-4 mb-3">
@@ -1055,7 +1088,8 @@ If your form layout allows it, you can swap the `.{valid|invalid}-feedback` clas
   </div>
   <button class="btn btn-primary" type="submit">Submit form</button>
 </form>
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}
 
 ## Custom forms
 
@@ -1073,12 +1107,13 @@ In the checked states, we use **base64 embedded SVG icons** from [Open Iconic](h
 
 #### Checkboxes
 
-{% example html %}
+{% capture example %}
 <div class="custom-control custom-checkbox">
   <input type="checkbox" class="custom-control-input" id="customCheck1">
   <label class="custom-control-label" for="customCheck1">Check this custom checkbox</label>
 </div>
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}
 
 Custom checkboxes can also utilize the `:indeterminate` pseudo class when manually set via JavaScript (there is no available HTML attribute for specifying it).
 
@@ -1097,7 +1132,7 @@ $('.your-checkbox').prop('indeterminate', true)
 
 #### Radios
 
-{% example html %}
+{% capture example %}
 <div class="custom-control custom-radio">
   <input type="radio" id="customRadio1" name="customRadio" class="custom-control-input">
   <label class="custom-control-label" for="customRadio1">Toggle this custom radio</label>
@@ -1106,11 +1141,12 @@ $('.your-checkbox').prop('indeterminate', true)
   <input type="radio" id="customRadio2" name="customRadio" class="custom-control-input">
   <label class="custom-control-label" for="customRadio2">Or toggle this other custom radio</label>
 </div>
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}
 
 #### Inline
 
-{% example html %}
+{% capture example %}
 <div class="custom-control custom-radio custom-control-inline">
   <input type="radio" id="customRadioInline1" name="customRadioInline1" class="custom-control-input">
   <label class="custom-control-label" for="customRadioInline1">Toggle this custom radio</label>
@@ -1119,13 +1155,14 @@ $('.your-checkbox').prop('indeterminate', true)
   <input type="radio" id="customRadioInline2" name="customRadioInline1" class="custom-control-input">
   <label class="custom-control-label" for="customRadioInline2">Or toggle this other custom radio</label>
 </div>
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}
 
 #### Disabled
 
 Custom checkboxes and radios can also be disabled. Add the `disabled` boolean attribute to the `<input>` and the custom indicator and label description will be automatically styled.
 
-{% example html %}
+{% capture example %}
 <div class="custom-control custom-checkbox">
   <input type="checkbox" class="custom-control-input" id="customCheckDisabled" disabled>
   <label class="custom-control-label" for="customCheckDisabled">Check this custom checkbox</label>
@@ -1135,24 +1172,26 @@ Custom checkboxes and radios can also be disabled. Add the `disabled` boolean at
   <input type="radio" id="radio3" name="radioDisabled" id="customRadioDisabled" class="custom-control-input" disabled>
   <label class="custom-control-label" for="customRadioDisabled">Toggle this custom radio</label>
 </div>
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}
 
 ### Select menu
 
 Custom `<select>` menus need only a custom class, `.custom-select` to trigger the custom styles.
 
-{% example html %}
+{% capture example %}
 <select class="custom-select">
   <option selected>Open this select menu</option>
   <option value="1">One</option>
   <option value="2">Two</option>
   <option value="3">Three</option>
 </select>
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}
 
 You may also choose from small and large custom selects to match our similarly sized text inputs.
 
-{% example html %}
+{% capture example %}
 <select class="custom-select custom-select-lg mb-3">
   <option selected>Open this select menu</option>
   <option value="1">One</option>
@@ -1166,63 +1205,70 @@ You may also choose from small and large custom selects to match our similarly s
   <option value="2">Two</option>
   <option value="3">Three</option>
 </select>
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}
 
 The `multiple` attribute is also supported:
 
-{% example html %}
+{% capture example %}
 <select class="custom-select" multiple>
   <option selected>Open this select menu</option>
   <option value="1">One</option>
   <option value="2">Two</option>
   <option value="3">Three</option>
 </select>
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}
 
 As is the `size` attribute:
 
-{% example html %}
+{% capture example %}
 <select class="custom-select" size="3">
   <option selected>Open this select menu</option>
   <option value="1">One</option>
   <option value="2">Two</option>
   <option value="3">Three</option>
 </select>
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}
 
 ### Range
 
 Create custom `<input type="range">` controls with `.custom-range`. The track (the background) and thumb (the value) are both styled to appear the same across browsers. As only IE and Firefox support "filling" their track from the left or right of the thumb as a means to visually indicate progress, we do not currently support it.
 
-{% example html %}
+{% capture example %}
 <label for="customRange1">Example range</label>
 <input type="range" class="custom-range" id="customRange1">
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}
 
 Range inputs have implicit values for `min` and `max`—`0` and `100`, respectively. You may specify new values for those using the `min` and `max` attributes.
 
-{% example html %}
+{% capture example %}
 <label for="customRange2">Example range</label>
 <input type="range" class="custom-range" min="0" max="5" id="customRange2">
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}
 
 By default, range inputs "snap" to integer values. To change this, you can specify a `step` value. In the example below, we double the number of steps by using `step="0.5"`.
 
-{% example html %}
+{% capture example %}
 <label for="customRange3">Example range</label>
 <input type="range" class="custom-range" min="0" max="5" step="0.5" id="customRange3">
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}
 
 ### File browser
 
 The file input is the most gnarly of the bunch and requires additional JavaScript if you'd like to hook them up with functional *Choose file...* and selected file name text.
 
-{% example html %}
+{% capture example %}
 <div class="custom-file">
   <input type="file" class="custom-file-input" id="customFile">
   <label class="custom-file-label" for="customFile">Choose file</label>
 </div>
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}
 
 We hide the default file `<input>` via `opacity` and instead style the `<label>`. The button is generated and positioned with `::after`. Lastly, we declare a `width` and `height` on the `<input>` for proper spacing for surrounding content.
 
@@ -1239,11 +1285,12 @@ $custom-file-text: (
 
 Here's `lang(es)` in action on the custom file input for a Spanish translation:
 
-{% example html %}
+{% capture example %}
 <div class="custom-file">
   <input type="file" class="custom-file-input" id="customFileLang" lang="es">
   <label class="custom-file-label" for="customFileLang">Seleccionar Archivo</label>
 </div>
-{% endexample %}
+{% endcapture %}
+{% include example.html content=example %}
 
 You'll need to set the language of your document (or subtree thereof) correctly in order for the correct text to be shown. This can be done using [the `lang` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/lang) on the `<html>` element or the [`Content-Language` HTTP header](https://www.w3.org/Protocols/rfc2616/rfc2616-sec14.html#sec14.12), among other methods.