diff --git a/docs/components.html b/docs/components.html
index 2040029a3c..eeb104168c 100644
--- a/docs/components.html
+++ b/docs/components.html
@@ -1340,29 +1340,13 @@
             <h1>Counters</h1>
           </div>
 
-          <table class="table table-bordered table-striped">
-            <thead>
-              <tr>
-                <th>Name</th>
-                <th>Example</th>
-                <th>Markup</th>
-              </tr>
-            </thead>
-            <tbody>
-              <tr>
-                <td>
-                  Default
-                </td>
-                <td>
-                  <strong>Inbox</strong> <span class="counter">42</span>
-                </td>
-                <td>
-                  <code>&lt;span class="counter"&gt;42&lt;/span&gt;</code>
-                </td>
-              </tr>
-            </tbody>
-          </table>
+          <div class="bs-docs-example">
+            <a href="#">Inbox</a> <span class="counter">42</span>
+          </div>
 
+<pre class="prettyprint linenums">
+&lt;a href="#"&gt;Inbox&lt;/a&gt; &lt;span class="counter"&gt;42&lt;/span&gt;
+</pre>
           <h3>Easily collapsible</h3>
           <p>For easy implementation, counters will simply collapse (via CSS's <code>:empty</code> selector) when no content exists within.</p>
 
diff --git a/docs/templates/pages/components.mustache b/docs/templates/pages/components.mustache
index 0d326d02d5..8bc15d88b6 100644
--- a/docs/templates/pages/components.mustache
+++ b/docs/templates/pages/components.mustache
@@ -1271,29 +1271,13 @@
             <h1>Counters</h1>
           </div>
 
-          <table class="table table-bordered table-striped">
-            <thead>
-              <tr>
-                <th>Name</th>
-                <th>Example</th>
-                <th>Markup</th>
-              </tr>
-            </thead>
-            <tbody>
-              <tr>
-                <td>
-                  Default
-                </td>
-                <td>
-                  <strong>Inbox</strong> <span class="counter">42</span>
-                </td>
-                <td>
-                  <code>&lt;span class="counter"&gt;42&lt;/span&gt;</code>
-                </td>
-              </tr>
-            </tbody>
-          </table>
+          <div class="bs-docs-example">
+            <a href="#">Inbox</a> <span class="counter">42</span>
+          </div>
 
+<pre class="prettyprint linenums">
+&lt;a href="#"&gt;Inbox&lt;/a&gt; &lt;span class="counter"&gt;42&lt;/span&gt;
+</pre>
           <h3>Easily collapsible</h3>
           <p>For easy implementation, counters will simply collapse (via CSS's <code>:empty</code> selector) when no content exists within.</p>