remove .dividers from breadcrumbs, instead use :after and content

4 files changed, 16 insertions, 12 deletions

diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css
index 5e74a1c07..357b7a410 100644
--- a/docs/assets/css/bootstrap.css
+++ b/docs/assets/css/bootstrap.css
@@ -4591,9 +4591,11 @@ input[type="submit"].btn::-moz-focus-inner {
   text-shadow: 0 1px 0 #ffffff;
 }
 
-.breadcrumb .divider {
+.breadcrumb li:after {
+  display: inline-block;
   padding: 0 5px;
   color: #ccc;
+  content: "\00a0 /";
 }
 
 .breadcrumb .active {
diff --git a/docs/components.html b/docs/components.html
index 53c416d55..7808d0477 100644
--- a/docs/components.html
+++ b/docs/components.html
@@ -1388,19 +1388,19 @@
               <li class="active">Home</li>
             </ul>
             <ul class="breadcrumb">
-              <li><a href="#">Home</a> <span class="divider">/</span></li>
+              <li><a href="#">Home</a></li>
               <li class="active">Library</li>
             </ul>
             <ul class="breadcrumb" style="margin-bottom: 5px;">
-              <li><a href="#">Home</a> <span class="divider">/</span></li>
-              <li><a href="#">Library</a> <span class="divider">/</span></li>
+              <li><a href="#">Home</a></li>
+              <li><a href="#">Library</a></li>
               <li class="active">Data</li>
             </ul>
           </div>
 <pre class="prettyprint linenums">
 &lt;ul class="breadcrumb"&gt;
-  &lt;li&gt;&lt;a href="#"&gt;Home&lt;/a&gt; &lt;span class="divider"&gt;/&lt;/span&gt;&lt;/li&gt;
-  &lt;li&gt;&lt;a href="#"&gt;Library&lt;/a&gt; &lt;span class="divider"&gt;/&lt;/span&gt;&lt;/li&gt;
+  &lt;li&gt;&lt;a href="#"&gt;Home&lt;/a&gt;&lt;/li&gt;
+  &lt;li&gt;&lt;a href="#"&gt;Library&lt;/a&gt;&lt;/li&gt;
   &lt;li class="active"&gt;Data&lt;/li&gt;
 &lt;/ul&gt;
 </pre>
diff --git a/docs/templates/pages/components.mustache b/docs/templates/pages/components.mustache
index 7389f7985..2ea87c16f 100644
--- a/docs/templates/pages/components.mustache
+++ b/docs/templates/pages/components.mustache
@@ -1319,19 +1319,19 @@
               <li class="active">{{_i}}Home{{/i}}</li>
             </ul>
             <ul class="breadcrumb">
-              <li><a href="#">{{_i}}Home{{/i}}</a> <span class="divider">/</span></li>
+              <li><a href="#">{{_i}}Home{{/i}}</a></li>
               <li class="active">{{_i}}Library{{/i}}</li>
             </ul>
             <ul class="breadcrumb" style="margin-bottom: 5px;">
-              <li><a href="#">{{_i}}Home{{/i}}</a> <span class="divider">/</span></li>
-              <li><a href="#">{{_i}}Library{{/i}}</a> <span class="divider">/</span></li>
+              <li><a href="#">{{_i}}Home{{/i}}</a></li>
+              <li><a href="#">{{_i}}Library{{/i}}</a></li>
               <li class="active">{{_i}}Data{{/i}}</li>
             </ul>
           </div>
 <pre class="prettyprint linenums">
 &lt;ul class="breadcrumb"&gt;
-  &lt;li&gt;&lt;a href="#"&gt;{{_i}}Home{{/i}}&lt;/a&gt; &lt;span class="divider"&gt;/&lt;/span&gt;&lt;/li&gt;
-  &lt;li&gt;&lt;a href="#"&gt;{{_i}}Library{{/i}}&lt;/a&gt; &lt;span class="divider"&gt;/&lt;/span&gt;&lt;/li&gt;
+  &lt;li&gt;&lt;a href="#"&gt;{{_i}}Home{{/i}}&lt;/a&gt;&lt;/li&gt;
+  &lt;li&gt;&lt;a href="#"&gt;{{_i}}Library{{/i}}&lt;/a&gt;&lt;/li&gt;
   &lt;li class="active"&gt;{{_i}}Data{{/i}}&lt;/li&gt;
 &lt;/ul&gt;
 </pre>
diff --git a/less/breadcrumbs.less b/less/breadcrumbs.less
index 221493b4a..2819704d3 100644
--- a/less/breadcrumbs.less
+++ b/less/breadcrumbs.less
@@ -13,7 +13,9 @@
     display: inline-block;
     text-shadow: 0 1px 0 @white;
   }
-  .divider {
+  li:after {
+    display: inline-block;
+    content: "\00a0 /"; // Unicode space added since inline-block means non-collapsing white-space
     padding: 0 5px;
     color: #ccc;
   }