Spinners: show all color variants.

diff --git a/site/docs/4.1/components/spinners.md b/site/docs/4.1/components/spinners.md
index 878c2a7de4c2dcd377e08a3bcaf6c425b01134b5..d1506700296c9a47b466c575ca19252e08d507c5 100644 (file)
--- a/site/docs/4.1/components/spinners.md
+++ b/site/docs/4.1/components/spinners.md
@@ -23,18 +23,13 @@ Use the border spinners for a lightweight loading indicator.
 
 ### Colors
 
-The border spinner uses `currentColor` for its `border-color`, meaning you can customize the color with [text color utilities][color]. Here's the regular border spinner in blue.
+The border spinner uses `currentColor` for its `border-color`, meaning you can customize the color with [text color utilities][color]. You can use any of our text color utilities on the standard spinner.
 
-<div class="bd-example">
-  <div class="spinner-border text-primary" role="status">Loading...</div>
-</div>
-
-Use any of our text color utilities on the standard spinner.
-
-{% highlight html %}
+{% capture example %}
 {% for color in site.data.theme-colors %}
 <div class="spinner-border text-{{ color.name }}" role="status">Loading...</div>{% endfor %}
-{% endhighlight %}
+{% endcapture %}
+{% include example.html content=example %}
 
 {% capture callout %}
 **Why not use `border-color` utilities?** Each border spinner specifies a `transparent` border for at least one side, so `.border-{color}` utilities would override that.
@@ -52,14 +47,11 @@ If you don't fancy a border spinner, switch to the grow spinner. While it doesn'
 
 Once again, this spinner is built with `currentColor`, so you can easily change its appearance with [text color utilities][color]. Here it is in blue, along with the supported variants.
 
-<div class="bd-example">
-  <div class="spinner-grow text-primary" role="status">Loading...</div>
-</div>
-
-{% highlight html %}
+{% capture example %}
 {% for color in site.data.theme-colors %}
 <div class="spinner-grow text-{{ color.name }}" role="status">Loading...</div>{% endfor %}
-{% endhighlight %}
+{% endcapture %}
+{% include example.html content=example %}
 
 ## Alignment