diff --git a/docs/utilities.html b/docs/utilities.html
index a90e51de..49aebd29 100644
--- a/docs/utilities.html
+++ b/docs/utilities.html
@@ -140,14 +140,23 @@
 
 <h3 id="background-utilities">Background Utilities</h3>
 <p>Background utility classes can be applied to change an element’s background color.</p>
-<div class="margin-bottom-small padding-small bg-primary text-light">bg-primary</div>
-<div class="margin-bottom-small padding-small bg-secondary text-light">bg-secondary</div>
-<div class="margin-bottom-small padding-small bg-success text-light">bg-success</div>
-<div class="margin-bottom-small padding-small bg-info text-light">bg-info</div>
-<div class="margin-bottom-small padding-small bg-warning text-light">bg-warning</div>
-<div class="margin-bottom-small padding-small bg-danger text-light">bg-danger</div>
-<div class="margin-bottom-small padding-small bg-light text-dark">bg-light</div>
-<div class="margin-bottom-small padding-small bg-dark text-light">bg-dark</div>
+<pre><code class="lang-html">&lt;div class=&quot;bg-primary&quot;&gt;Primary&lt;/div&gt;
+&lt;div class=&quot;bg-secondary&quot;&gt;Secondary&lt;/div&gt;
+&lt;div class=&quot;bg-success&quot;&gt;Success&lt;/div&gt;
+&lt;div class=&quot;bg-info&quot;&gt;Info&lt;/div&gt;
+&lt;div class=&quot;bg-warning&quot;&gt;Warning&lt;/div&gt;
+&lt;div class=&quot;bg-danger&quot;&gt;Danger&lt;/div&gt;
+&lt;div class=&quot;bg-light&quot;&gt;Light&lt;/div&gt;
+&lt;div class=&quot;bg-dark&quot;&gt;Dark&lt;/div&gt;
+</code></pre>
+<div class="margin-bottom-small padding-small bg-primary text-light">Primary</div>
+<div class="margin-bottom-small padding-small bg-secondary text-light">Secondary</div>
+<div class="margin-bottom-small padding-small bg-success text-light">Success</div>
+<div class="margin-bottom-small padding-small bg-info text-light">Info</div>
+<div class="margin-bottom-small padding-small bg-warning text-light">Warning</div>
+<div class="margin-bottom-small padding-small bg-danger text-light">Danger</div>
+<div class="margin-bottom-small padding-small bg-light text-dark">Light</div>
+<div class="margin-bottom-small padding-small bg-dark text-light">Dark</div>
 
 <h3 id="float-utilities">Float Utilities</h3>
 <p>Float utilities are provided to easily float elements to the left or right. Just apply the <code>float-left</code> or <code>float-right</code> class to an element to float it left or right.</p>
diff --git a/source/docs/utilities.md b/source/docs/utilities.md
index e4179061..9a366076 100644
--- a/source/docs/utilities.md
+++ b/source/docs/utilities.md
@@ -103,14 +103,25 @@ Text utility classes can be applied to change an element’s text.
 
 Background utility classes can be applied to change an element’s background color.
 
-<div class="margin-bottom-small padding-small bg-primary text-light">bg-primary</div>
-<div class="margin-bottom-small padding-small bg-secondary text-light">bg-secondary</div>
-<div class="margin-bottom-small padding-small bg-success text-light">bg-success</div>
-<div class="margin-bottom-small padding-small bg-info text-light">bg-info</div>
-<div class="margin-bottom-small padding-small bg-warning text-light">bg-warning</div>
-<div class="margin-bottom-small padding-small bg-danger text-light">bg-danger</div>
-<div class="margin-bottom-small padding-small bg-light text-dark">bg-light</div>
-<div class="margin-bottom-small padding-small bg-dark text-light">bg-dark</div>
+```html
+<div class="bg-primary">Primary</div>
+<div class="bg-secondary">Secondary</div>
+<div class="bg-success">Success</div>
+<div class="bg-info">Info</div>
+<div class="bg-warning">Warning</div>
+<div class="bg-danger">Danger</div>
+<div class="bg-light">Light</div>
+<div class="bg-dark">Dark</div>
+```
+
+<div class="margin-bottom-small padding-small bg-primary text-light">Primary</div>
+<div class="margin-bottom-small padding-small bg-secondary text-light">Secondary</div>
+<div class="margin-bottom-small padding-small bg-success text-light">Success</div>
+<div class="margin-bottom-small padding-small bg-info text-light">Info</div>
+<div class="margin-bottom-small padding-small bg-warning text-light">Warning</div>
+<div class="margin-bottom-small padding-small bg-danger text-light">Danger</div>
+<div class="margin-bottom-small padding-small bg-light text-dark">Light</div>
+<div class="margin-bottom-small padding-small bg-dark text-light">Dark</div>
 
 ### Float Utilities