From dafb498f75afe2552b8603ac59fe855b488a97e8 Mon Sep 17 00:00:00 2001
From: XhmikosR <xhmikosr@gmail.com>
Date: Sun, 11 Nov 2018 15:47:23 +0200
Subject: [PATCH] Spinners: show all color variants.

---
 site/docs/4.1/components/spinners.md | 22 +++++++---------------
 1 file changed, 7 insertions(+), 15 deletions(-)

diff --git a/site/docs/4.1/components/spinners.md b/site/docs/4.1/components/spinners.md
index 878c2a7de4c2..d1506700296c 100644
--- 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