no need to use divs to wrap labels

components.html

@@ -202,23 +202,23 @@ base_url: "../"
         <nav class="bar bar-tab">
           <a class="tab-item active" href="#">
             <span class="icon icon-share"></span>
-            <div class="tab-label">Label</div>
+            <span class="tab-label">Label</span>
           </a>
           <a class="tab-item" href="#">
             <span class="icon icon-share"></span>
-            <div class="tab-label">Label</div>
+            <span class="tab-label">Label</span>
           </a>
           <a class="tab-item" href="#">
             <span class="icon icon-share"></span>
-            <div class="tab-label">Label</div>
+            <span class="tab-label">Label</span>
           </a>
           <a class="tab-item" href="#">
             <span class="icon icon-share"></span>
-            <div class="tab-label">Label</div>
+            <span class="tab-label">Label</span>
           </a>
           <a class="tab-item" href="#">
             <span class="icon icon-share"></span>
-            <div class="tab-label">Label</div>
+            <span class="tab-label">Label</span>
           </a>
         </nav>
       </div>
@@ -227,23 +227,23 @@ base_url: "../"
 <nav class="bar bar-tab">
   <a class="tab-item active" href="#">
     <span class="icon icon-share"></span>
-    <div class="tab-label">Label</div>
+    <span class="tab-label">Label</span>
   </a>
   <a class="tab-item" href="#">
     <span class="icon icon-share"></span>
-    <div class="tab-label">Label</div>
+    <span class="tab-label">Label</span>
   </a>
   <a class="tab-item" href="#">
     <span class="icon icon-share"></span>
-    <div class="tab-label">Label</div>
+    <span class="tab-label">Label</span>
   </a>
   <a class="tab-item" href="#">
     <span class="icon icon-share"></span>
-    <div class="tab-label">Label</div>
+    <span class="tab-label">Label</span>
   </a>
   <a class="tab-item" href="#">
     <span class="icon icon-share"></span>
-    <div class="tab-label">Label</div>
+    <span class="tab-label">Label</span>
   </a>
 </nav>
 {% endhighlight %}

dist/android-theme.css

@@ -175,12 +175,12 @@ a:active {
   height: 50px;
   border-top: 0;
 }
-.bar-tab .tab-item .icon {
-  margin-top: 5px;
-}
 .bar-tab .tab-item.active, .bar-tab .tab-item:active {
   color: #33b5e5;
 }
+.bar-tab .tab-item .icon {
+  margin-top: 5px;
+}
 
 .title {
   position: static;

dist/ratchet.css

@@ -528,18 +528,19 @@ input[type="button"] {
   color: #929292;
   text-align: center;
 }
+.bar-tab .tab-item.active, .bar-tab .tab-item:active {
+  color: #428bca;
+}
 .bar-tab .tab-item .icon {
   width: 24px;
   height: 24px;
   margin-top: 5px;
 }
 .bar-tab .tab-item .icon ~ .tab-label {
+  display: block;
   margin-top: -2px;
   font-size: 11px;
 }
-.bar-tab .tab-item.active, .bar-tab .tab-item:active {
-  color: #428bca;
-}
 
 .bar-nav .btn {
   position: relative;

docs-assets/css/docs.css

@@ -1345,12 +1345,12 @@ hr {
   height: 50px;
   border-top: 0;
 }
-.platform-android .bar-tab .tab-item .icon {
-  margin-top: 5px;
-}
 .platform-android .bar-tab .tab-item.active, .platform-android .bar-tab .tab-item:active {
   color: #33b5e5;
 }
+.platform-android .bar-tab .tab-item .icon {
+  margin-top: 5px;
+}
 .platform-android .title {
   position: static;
   padding-left: 15px;

lib/sass/bars.scss

@@ -108,6 +108,7 @@
 
       // Make the label smaller if it's used with an icon
       ~ .tab-label {
+        display: block;
         margin-top: -2px;
         font-size: 11px;
       }