getting tests updated, tweaking list items again

css/font-awesome.css

@@ -70,9 +70,12 @@
   position: absolute;
   left: -2.142857142857143em;
   width: 2.142857142857143em;
-  line-height: inherit;
+  top: 0.14285714285714285em;
   text-align: center;
 }
+.fa-li.fa-lg {
+  left: -1.8571428571428572em;
+}
 .fa.hide {
   display: none;
 }

css/font-awesome.min.css

@@ -2,7 +2,7 @@
 .fa-lg{font-size:1.3333333333333333em;vertical-align:-10%;line-height:0.75em;}
 .fa.fa-fixed-width{display:inline-block;width:1.1428571428571428em;padding-right:0.2857142857142857em;text-align:right;}.fa.fa-fixed-width.fa-lg{width:1.4285714285714286em;}
 .fa-ul{padding-left:0;margin-left:2.142857142857143em;list-style-type:none;}.fa-ul>li{position:relative;}
-.fa-li{position:absolute;left:-2.142857142857143em;width:2.142857142857143em;line-height:inherit;text-align:center;}
+.fa-li{position:absolute;left:-2.142857142857143em;width:2.142857142857143em;top:0.14285714285714285em;text-align:center;}.fa-li.fa-lg{left:-1.8571428571428572em;}
 .fa.hide{display:none;}
 .fa-muted{color:#eeeeee;}
 .fa-light{color:#ffffff;}

less/core.less

@@ -40,8 +40,11 @@
   position: absolute;
   left: -@icons-li-width;
   width: @icons-li-width;
-  line-height: inherit;
+  top: (2em / 14);
   text-align: center;
+  &.fa-lg {
+    left: -@icons-li-width + (4em / 14);
+  }
 }
 
 // allows usage of the hide class directly on font awesome icons

src/_includes/tests/rotated-flipped-inside-btn.html

@@ -1,6 +1,6 @@
-<a class="btn" href="#"><i class="fa fa-flag"></i>&nbsp; normal</a><br>
-<a class="btn" href="#"><i class="fa fa-flag fa-rotate-90"></i>&nbsp; fa-rotate-90</a><br>
-<a class="btn" href="#"><i class="fa fa-flag fa-rotate-180"></i>&nbsp; fa-rotate-180</a><br>
-<a class="btn" href="#"><i class="fa fa-flag fa-rotate-270"></i>&nbsp; fa-rotate-270</a><br>
-<a class="btn" href="#"><i class="fa fa-flag fa-flip-horizontal"></i>&nbsp; fa-flip-horizontal</a><br>
-<a class="btn" href="#"><i class="fa fa-flag fa-flip-vertical"></i>&nbsp; fa-flip-vertical</a>
+<a class="btn btn-default" href="#"><i class="fa fa-flag"></i>&nbsp; normal</a><br>
+<a class="btn btn-default" href="#"><i class="fa fa-flag fa-rotate-90"></i>&nbsp; fa-rotate-90</a><br>
+<a class="btn btn-default" href="#"><i class="fa fa-flag fa-rotate-180"></i>&nbsp; fa-rotate-180</a><br>
+<a class="btn btn-default" href="#"><i class="fa fa-flag fa-rotate-270"></i>&nbsp; fa-rotate-270</a><br>
+<a class="btn btn-default" href="#"><i class="fa fa-flag fa-flip-horizontal"></i>&nbsp; fa-flip-horizontal</a><br>
+<a class="btn btn-default" href="#"><i class="fa fa-flag fa-flip-vertical"></i>&nbsp; fa-flip-vertical</a>

src/assets/font-awesome/less/core.less

@@ -42,8 +42,12 @@
   position: absolute;
   left: -@icons-li-width;
   width: @icons-li-width;
-  line-height: inherit;
+  top: (2em / 14);
   text-align: center;
+  &.{{ site.fontawesome.css_prefix }}-lg {
+    top: (1em / 14);
+    left: -@icons-li-width + (4em / 14);
+  }
 }
 
 // allows usage of the hide class directly on font awesome icons

src/assets/less/site-3.0.0.less

@@ -15,3 +15,4 @@
 @import "site/feature-list";
 @import "site/example-rating";
 @import "site/footer";
+@import "site/lazy";

src/assets/less/site/lazy.less

@@ -0,0 +1,86 @@
+@size-none: 0px;
+@size-sm:   5px;
+@size-md:   10px;
+@size-lg:   22px;
+
+.padding-none         { padding: @size-none !important; }
+.padding              { padding: @size-md !important; }
+.padding-sm           { padding: @size-sm !important; }
+.padding-lg           { padding: @size-lg !important; }
+
+.padding-top-none     { padding-top: @size-none !important; }
+.padding-top          { padding-top: @size-md !important; }
+.padding-top-sm       { padding-top: @size-sm !important; }
+.padding-top-lg       { padding-top: @size-lg !important; }
+
+.padding-right-none   { padding-right: @size-none !important; }
+.padding-right        { padding-right: @size-md !important; }
+.padding-right-sm     { padding-right: @size-sm !important; }
+.padding-right-lg     { padding-right: @size-lg !important; }
+
+.padding-bottom-none  { padding-bottom: @size-none !important; }
+.padding-bottom       { padding-bottom: @size-md !important; }
+.padding-bottom-sm    { padding-bottom: @size-sm !important; }
+.padding-bottom-lg    { padding-bottom: @size-lg !important; }
+
+.padding-left-none    { padding-left: @size-none !important; }
+.padding-left         { padding-left: @size-md !important; }
+.padding-left-sm      { padding-left: @size-sm !important; }
+.padding-left-lg      { padding-left: @size-lg !important; }
+
+.margin-none          { margin: @size-none !important; }
+.margin               { margin: @size-md !important; }
+.margin-sm            { margin: @size-sm !important; }
+.margin-lg            { margin: @size-lg !important; }
+
+.margin-top-none      { margin-top: @size-none !important; }
+.margin-top           { margin-top: @size-md !important; }
+.margin-top-lg        { margin-top: @size-lg !important; }
+.margin-top-sm        { margin-top: @size-sm !important; }
+
+.margin-right-none    { margin-right: @size-none !important; }
+.margin-right         { margin-right: @size-md !important; }
+.margin-right-lg      { margin-right: @size-lg !important; }
+.margin-right-sm      { margin-right: @size-sm !important; }
+
+.margin-bottom-none   { margin-bottom: @size-none !important; }
+.margin-bottom        { margin-bottom: @size-md !important; }
+.margin-bottom-lg     { margin-bottom: @size-lg !important; }
+.margin-bottom-sm     { margin-bottom: @size-sm !important; }
+
+.margin-left-none     { margin-left: @size-none !important; }
+.margin-left          { margin-left: @size-md !important; }
+.margin-left-lg       { margin-left: @size-lg !important; }
+.margin-left-sm       { margin-left: @size-sm !important; }
+
+.border-left-none     { border-left: none !important; }
+.border-right-none    { border-right: none !important; }
+.border-bottom-none   { border-bottom: none !important; }
+.border-top-none      { border-top: none !important; }
+
+.display-block { display: block; } // use to swap an anchor tag to span a whole row to make click target larger
+.no-underline:hover { text-decoration: none; }
+.clickable { cursor: pointer; }
+.strong { font-weight: bold; }
+.em { font-style: italic; }
+.small { font-size: 85%; } // Ex: 14px base font * 85% = about 12px
+.no-link { color: @gray-dark; }
+
+.text-sans-serif { font-family: @font-family-sans-serif; }
+.text-ellipsis { .text-overflow(); } // truncates text to a single line with an ellipsis at the end
+.text-default {
+  font-family: @font-family-base;
+  font-size: @font-size-base;
+  line-height: @line-height-base;
+  font-weight: normal;
+}
+.text-hilite {
+  color: @link-color;
+  &:hover {
+    color: @link-hover-color;
+    text-decoration: underline;
+  }
+}
+.text-strike { text-decoration: line-through; }
+.text-upper { text-transform: uppercase; }
+.text-lower { text-transform: lowercase; }

src/test.html

@@ -9,139 +9,137 @@ relative_path: ../
 
   <h3>Icons <small>Icons should have proper alignment and not be clipped</small></h3>
   <div class="row">
-    <div class="span3">
+    <div class="col-md-3">
       <div class="well">
         <i class="fa fa-building"></i> Building
       </div>
     </div>
-    <div class="span3">
+    <div class="col-md-3">
       <div class="well">
         <i class="fa fa-building fa-lg"></i> Building Large
       </div>
     </div>
-    <div class="span3">
+    <div class="col-md-3">
       <i class="fa fa-building"></i> Building
     </div>
-    <div class="span3">
+    <div class="col-md-3">
       <i class="fa fa-building fa-lg"></i> Building Large
     </div>
   </div>
   <div class="row" style="font-size: 24px; line-height: 1.5em;">
-    <div class="span4">
+    <div class="col-md-4">
       <div class="well">
         <i class="fa fa-building"></i> Building
       </div>
     </div>
-    <div class="span4">
+    <div class="col-md-4">
       <div class="well">
         <i class="fa fa-building fa-lg"></i> Building Large
       </div>
     </div>
-    <div class="span4">
+    <div class="col-md-4">
       <i class="fa fa-building fa-lg"></i> Building Large
     </div>
   </div>
   <div class="row">
-    <div class="span3">
+    <div class="col-md-3">
       <div class="well">
         <i class="fa fa-circle"></i> Circle
       </div>
     </div>
-    <div class="span3">
+    <div class="col-md-3">
       <div class="well">
         <i class="fa fa-circle fa-lg"></i> Circle Large
       </div>
     </div>
-    <div class="span3">
+    <div class="col-md-3">
       <i class="fa fa-circle"></i> Circle
     </div>
-    <div class="span3">
+    <div class="col-md-3">
       <i class="fa fa-circle fa-lg"></i> Circle Large
     </div>
   </div>
   <div class="row" style="font-size: 24px; line-height: 1.5em;">
-    <div class="span4">
+    <div class="col-md-4">
       <div class="well">
         <i class="fa fa-circle"></i> Circle
       </div>
     </div>
-    <div class="span4">
+    <div class="col-md-4">
       <div class="well">
         <i class="fa fa-circle fa-lg"></i> Circle Large
       </div>
     </div>
-    <div class="span4">
+    <div class="col-md-4">
       <i class="fa fa-circle fa-lg"></i> Circle Large
     </div>
   </div>
 
 
-  <h3>Links with Icons <small>icon should activate link & underline</small></h3>
+  <h3>Links with Icons <small>icon should activate link & NOT underline</small></h3>
   <div class="row lead">
-    <div class="span2">
-      <a href="#"><i class="fa fa-building"></i> Link Here</a>
+    <div class="col-md-2">
+      <a href="#"><i class="fa fa-building padding-right"></i>Link Here</a>
     </div>
-    <div class="span2">
-      <a href="#"><i class="fa fa-building fa-lg"></i> Link Here</a>
+    <div class="col-md-2">
+      <a href="#"><i class="fa fa-building fa-lg padding-right"></i>Link Here</a>
     </div>
-    <div class="span2">
-      <a href="#"><i class="fa fa-caret-down"></i> Link Here</a>
+    <div class="col-md-2">
+      <a href="#"><i class="fa fa-caret-down padding-right"></i>Link Here</a>
     </div>
-    <div class="span2">
-      <a href="#">Link Here <i class="fa fa-double-angle-right"></i></a>
+    <div class="col-md-2">
+      <a href="#">Link Here<i class="fa fa-double-angle-right padding-left"></i></a>
     </div>
-    <div class="span2">
-      <a href="#">Link Here <i class="fa fa-double-angle-right fa-lg"></i></a>
+    <div class="col-md-2">
+      <a href="#">Link Here<i class="fa fa-double-angle-right fa-lg padding-left"></i></a>
     </div>
-    <div class="span2">
-      <a href="#">Link Here <i class="fa fa-caret-down"></i></a>
+    <div class="col-md-2">
+      <a href="#">Link Here<i class="fa fa-caret-down padding-left"></i></a>
     </div>
   </div>
   <div class="row">
-    <div class="span2">
-      <a href="#"><i class="fa fa-building"></i> Link Here</a>
+    <div class="col-md-2">
+      <a href="#"><i class="fa fa-building padding-right-sm"></i>Link Here</a>
     </div>
-    <div class="span2">
-      <a href="#"><i class="fa fa-building fa-lg"></i> Link Here</a>
+    <div class="col-md-2">
+      <a href="#"><i class="fa fa-building fa-lg padding-right-sm"></i>Link Here</a>
     </div>
-    <div class="span2">
-      <a href="#"><i class="fa fa-caret-down"></i> Link Here</a>
+    <div class="col-md-2">
+      <a href="#"><i class="fa fa-caret-down padding-right-sm"></i>Link Here</a>
     </div>
-    <div class="span2">
-      <a href="#">Link Here <i class="fa fa-double-angle-right"></i></a>
+    <div class="col-md-2">
+      <a href="#">Link Here<i class="fa fa-double-angle-right padding-left-sm"></i></a>
     </div>
-    <div class="span2">
-      <a href="#">Link Here <i class="fa fa-double-angle-right fa-lg"></i></a>
+    <div class="col-md-2">
+      <a href="#">Link Here<i class="fa fa-double-angle-right fa-lg padding-left-sm"></i></a>
     </div>
-    <div class="span2">
-      <a href="#">Link Here <i class="fa fa-caret-down"></i></a>
+    <div class="col-md-2">
+      <a href="#">Link Here<i class="fa fa-caret-down padding-left-sm"></i></a>
     </div>
   </div>
 
 
   <h3>Navbar  <small>should stay same height </small></h3>
   <div class="navbar navbar-inverse navbar-static-top">
-    <div class="navbar-inner">
-      <div class="container">
-        <a class="brand" href="#"><i class="fa fa-flag"></i> Font Awesome</a>
-        <ul class="nav">
-          <li style="border: solid 1px white;"><a href="#">Nav Item 1</a></li>
-          <li class="dropdown" style="border: solid 1px white;">
-            <a href="#" role="button" class="dropdown-toggle" data-toggle="dropdown">
-              Nav Item 2
-              <i class="fa fa-caret-down"></i>
-            </a>
-            <ul class="dropdown-menu" role="menu">
-              <li><a href="#"><i class="fa fa-building"></i> Menu Item 1</a></li>
-              <li><a href="#"><i class="fa fa-building fa-lg"></i> Menu Item 2</a></li>
-            </ul>
-          </li>
-          <li style="border: solid 1px white;"><a href="#examples"><i class="fa fa-building fa-lg"></i> Nav Item 3</a></li>
-          <li style="border: solid 1px white;"><a href="#examples"><i class="fa fa-envelope"></i> Nav Item 4</a></li>
-          <li style="border: solid 1px white;"><a href="#examples"><i class="fa fa-circle fa-lg"></i> Nav Item 5</a></li>
-          <li style="border: solid 1px white;"><a href="#examples"><i class="fa fa-circle"></i> Nav Item 6</a></li>
-        </ul>
-      </div>
+    <div class="container">
+      <a class="navbar-brand" href="#"><i class="fa fa-flag"></i> Font Awesome</a>
+      <ul class="nav navbar-nav">
+        <li style="border: solid 1px white;"><a href="#">Nav Item 1</a></li>
+        <li class="dropdown" style="border: solid 1px white;">
+          <a href="#" role="button" class="dropdown-toggle" data-toggle="dropdown">
+            Nav Item 2
+            <i class="fa fa-caret-down"></i>
+          </a>
+          <ul class="dropdown-menu" role="menu">
+            <li><a href="#"><i class="fa fa-building"></i> Menu Item 1</a></li>
+            <li><a href="#"><i class="fa fa-building fa-lg"></i> Menu Item 2</a></li>
+          </ul>
+        </li>
+        <li style="border: solid 1px white;"><a href="#examples"><i class="fa fa-building fa-lg"></i> Nav Item 3</a></li>
+        <li style="border: solid 1px white;"><a href="#examples"><i class="fa fa-envelope"></i> Nav Item 4</a></li>
+        <li style="border: solid 1px white;"><a href="#examples"><i class="fa fa-circle fa-lg"></i> Nav Item 5</a></li>
+        <li style="border: solid 1px white;"><a href="#examples"><i class="fa fa-circle"></i> Nav Item 6</a></li>
+      </ul>
     </div>
   </div>
 
@@ -149,101 +147,101 @@ relative_path: ../
   <h3>Plain buttons next to buttons w/icons <small>should be same height, icons not clipped</small></h3>
   <h4>Buttons</h4>
   <div class="row">
-    <div class="span6">
+    <div class="col-md-6">
       <div style="border: solid 1px #d3d3d3; text-align: center;">
         <div>
-          <button class="btn btn-mini">Button</button>
-          <button class="btn btn-mini"><i class="fa fa-building"></i> Button</button>
-          <button class="btn btn-mini"><i class="fa fa-building"></i></button>
+          <button class="btn btn-default btn-xs">Button</button>
+          <button class="btn btn-default btn-xs"><i class="fa fa-building"></i> Button</button>
+          <button class="btn btn-default btn-xs"><i class="fa fa-building"></i></button>
         </div>
         <div>
-          <button class="btn btn-small">Button</button>
-          <button class="btn btn-small"><i class="fa fa-building"></i> Button</button>
-          <button class="btn btn-small"><i class="fa fa-building"></i></button>
+          <button class="btn btn-default btn-sm">Button</button>
+          <button class="btn btn-default btn-sm"><i class="fa fa-building"></i> Button</button>
+          <button class="btn btn-default btn-sm"><i class="fa fa-building"></i></button>
         </div>
         <div>
-          <button class="btn">Button</button>
-          <button class="btn"><i class="fa fa-building"></i> Button</button>
-          <button class="btn"><i class="fa fa-building"></i></button>
+          <button class="btn btn-default">Button</button>
+          <button class="btn btn-default"><i class="fa fa-building"></i> Button</button>
+          <button class="btn btn-default"><i class="fa fa-building"></i></button>
         </div>
         <div>
-          <button class="btn btn-large">Button</button>
-          <button class="btn btn-large"><i class="fa fa-building"></i> Button</button>
-          <button class="btn btn-large"><i class="fa fa-building"></i></button>
+          <button class="btn btn-default btn-lg">Button</button>
+          <button class="btn btn-default btn-lg"><i class="fa fa-building"></i> Button</button>
+          <button class="btn btn-default btn-lg"><i class="fa fa-building"></i></button>
         </div>
       </div>
     </div>
-    <div class="span6">
+    <div class="col-md-6">
       <div style="border: solid 1px #d3d3d3; text-align: center;">
         <div>
-          <button class="btn btn-mini">Button</button>
-          <button class="btn btn-mini"><i class="fa fa-building fa-lg"></i> Button</button>
-          <button class="btn btn-mini"><i class="fa fa-building fa-lg"></i></button>
+          <button class="btn btn-default btn-xs">Button</button>
+          <button class="btn btn-default btn-xs"><i class="fa fa-building fa-lg"></i> Button</button>
+          <button class="btn btn-default btn-xs"><i class="fa fa-building fa-lg"></i></button>
         </div>
         <div>
-          <button class="btn btn-small">Button</button>
-          <button class="btn btn-small"><i class="fa fa-building fa-lg"></i> Button</button>
-          <button class="btn btn-small"><i class="fa fa-building fa-lg"></i></button>
+          <button class="btn btn-default btn-sm">Button</button>
+          <button class="btn btn-default btn-sm"><i class="fa fa-building fa-lg"></i> Button</button>
+          <button class="btn btn-default btn-sm"><i class="fa fa-building fa-lg"></i></button>
         </div>
         <div>
-          <button class="btn">Button</button>
-          <button class="btn"><i class="fa fa-building fa-lg"></i> Button</button>
-          <button class="btn"><i class="fa fa-building fa-lg"></i></button>
+          <button class="btn btn-default">Button</button>
+          <button class="btn btn-default"><i class="fa fa-building fa-lg"></i> Button</button>
+          <button class="btn btn-default"><i class="fa fa-building fa-lg"></i></button>
         </div>
         <div>
-          <button class="btn btn-large">Button</button>
-          <button class="btn btn-large"><i class="fa fa-building fa-lg"></i> Button</button>
-          <button class="btn btn-large"><i class="fa fa-building fa-lg"></i></button>
+          <button class="btn btn-default btn-lg">Button</button>
+          <button class="btn btn-default btn-lg"><i class="fa fa-building fa-lg"></i> Button</button>
+          <button class="btn btn-default btn-lg"><i class="fa fa-building fa-lg"></i></button>
         </div>
       </div>
     </div>
   </div>
   <div class="row">
-    <div class="span6">
+    <div class="col-md-6">
       <div style="border: solid 1px #d3d3d3; text-align: center;">
         <div>
-          <button class="btn btn-mini">Button</button>
-          <button class="btn btn-mini"><i class="fa fa-circle"></i> Button</button>
-          <button class="btn btn-mini"><i class="fa fa-circle"></i></button>
+          <button class="btn btn-default btn-xs">Button</button>
+          <button class="btn btn-default btn-xs"><i class="fa fa-circle"></i> Button</button>
+          <button class="btn btn-default btn-xs"><i class="fa fa-circle"></i></button>
         </div>
         <div>
-          <button class="btn btn-small">Button</button>
-          <button class="btn btn-small"><i class="fa fa-circle"></i> Button</button>
-          <button class="btn btn-small"><i class="fa fa-circle"></i></button>
+          <button class="btn btn-default btn-sm">Button</button>
+          <button class="btn btn-default btn-sm"><i class="fa fa-circle"></i> Button</button>
+          <button class="btn btn-default btn-sm"><i class="fa fa-circle"></i></button>
         </div>
         <div>
-          <button class="btn">Button</button>
-          <button class="btn"><i class="fa fa-circle"></i> Button</button>
-          <button class="btn"><i class="fa fa-circle"></i></button>
+          <button class="btn btn-default">Button</button>
+          <button class="btn btn-default"><i class="fa fa-circle"></i> Button</button>
+          <button class="btn btn-default"><i class="fa fa-circle"></i></button>
         </div>
         <div>
-          <button class="btn btn-large">Button</button>
-          <button class="btn btn-large"><i class="fa fa-circle"></i> Button</button>
-          <button class="btn btn-large"><i class="fa fa-circle"></i></button>
+          <button class="btn btn-default btn-lg">Button</button>
+          <button class="btn btn-default btn-lg"><i class="fa fa-circle"></i> Button</button>
+          <button class="btn btn-default btn-lg"><i class="fa fa-circle"></i></button>
         </div>
       </div>
     </div>
-    <div class="span6">
+    <div class="col-md-6">
       <div style="border: solid 1px #d3d3d3; text-align: center;">
         <div>
-          <button class="btn btn-mini">Button</button>
-          <button class="btn btn-mini"><i class="fa fa-circle fa-lg"></i> Button</button>
-          <button class="btn btn-mini"><i class="fa fa-circle fa-lg"></i></button>
+          <button class="btn btn-default btn-xs">Button</button>
+          <button class="btn btn-default btn-xs"><i class="fa fa-circle fa-lg"></i> Button</button>
+          <button class="btn btn-default btn-xs"><i class="fa fa-circle fa-lg"></i></button>
         </div>
         <div>
-          <button class="btn btn-small">Button</button>
-          <button class="btn btn-small"><i class="fa fa-circle fa-lg"></i> Button</button>
-          <button class="btn btn-small"><i class="fa fa-circle fa-lg"></i></button>
+          <button class="btn btn-default btn-sm">Button</button>
+          <button class="btn btn-default btn-sm"><i class="fa fa-circle fa-lg"></i> Button</button>
+          <button class="btn btn-default btn-sm"><i class="fa fa-circle fa-lg"></i></button>
         </div>
         <div>
-          <button class="btn">Button</button>
-          <button class="btn"><i class="fa fa-circle fa-lg"></i> Button</button>
-          <button class="btn"><i class="fa fa-circle fa-lg"></i></button>
+          <button class="btn btn-default">Button</button>
+          <button class="btn btn-default"><i class="fa fa-circle fa-lg"></i> Button</button>
+          <button class="btn btn-default"><i class="fa fa-circle fa-lg"></i></button>
         </div>
         <div>
-          <button class="btn btn-large">Button</button>
-          <button class="btn btn-large"><i class="fa fa-circle fa-lg"></i> Button</button>
-          <button class="btn btn-large"><i class="fa fa-circle fa-lg"></i></button>
+          <button class="btn btn-default btn-lg">Button</button>
+          <button class="btn btn-default btn-lg"><i class="fa fa-circle fa-lg"></i> Button</button>
+          <button class="btn btn-default btn-lg"><i class="fa fa-circle fa-lg"></i></button>
         </div>
       </div>
     </div>
@@ -252,101 +250,101 @@ relative_path: ../
 
   <h4>Anchors</h4>
   <div class="row">
-    <div class="span6">
+    <div class="col-md-6">
       <div style="border: solid 1px #d3d3d3; text-align: center;">
         <div>
-          <a class="btn btn-mini">Button</a>
-          <a class="btn btn-mini"><i class="fa fa-building"></i> Button</a>
-          <a class="btn btn-mini"><i class="fa fa-building"></i></a>
+          <a class="btn btn-default btn-xs">Button</a>
+          <a class="btn btn-default btn-xs"><i class="fa fa-building"></i> Button</a>
+          <a class="btn btn-default btn-xs"><i class="fa fa-building"></i></a>
         </div>
         <div>
-          <a class="btn btn-small">Button</a>
-          <a class="btn btn-small"><i class="fa fa-building"></i> Button</a>
-          <a class="btn btn-small"><i class="fa fa-building"></i></a>
+          <a class="btn btn-default btn-sm">Button</a>
+          <a class="btn btn-default btn-sm"><i class="fa fa-building"></i> Button</a>
+          <a class="btn btn-default btn-sm"><i class="fa fa-building"></i></a>
         </div>
         <div>
-          <a class="btn">Button</a>
-          <a class="btn"><i class="fa fa-building"></i> Button</a>
-          <a class="btn"><i class="fa fa-building"></i></a>
+          <a class="btn btn-default">Button</a>
+          <a class="btn btn-default"><i class="fa fa-building"></i> Button</a>
+          <a class="btn btn-default"><i class="fa fa-building"></i></a>
         </div>
         <div>
-          <a class="btn btn-large">Button</a>
-          <a class="btn btn-large"><i class="fa fa-building"></i> Button</a>
-          <a class="btn btn-large"><i class="fa fa-building"></i></a>
+          <a class="btn btn-default btn-lg">Button</a>
+          <a class="btn btn-default btn-lg"><i class="fa fa-building"></i> Button</a>
+          <a class="btn btn-default btn-lg"><i class="fa fa-building"></i></a>
         </div>
       </div>
     </div>
-    <div class="span6">
+    <div class="col-md-6">
       <div style="border: solid 1px #d3d3d3; text-align: center;">
         <div>
-          <a class="btn btn-mini">Button</a>
-          <a class="btn btn-mini"><i class="fa fa-building fa-lg"></i> Button</a>
-          <a class="btn btn-mini"><i class="fa fa-building fa-lg"></i></a>
+          <a class="btn btn-default btn-xs">Button</a>
+          <a class="btn btn-default btn-xs"><i class="fa fa-building fa-lg"></i> Button</a>
+          <a class="btn btn-default btn-xs"><i class="fa fa-building fa-lg"></i></a>
         </div>
         <div>
-          <a class="btn btn-small">Button</a>
-          <a class="btn btn-small"><i class="fa fa-building fa-lg"></i> Button</a>
-          <a class="btn btn-small"><i class="fa fa-building fa-lg"></i></a>
+          <a class="btn btn-default btn-sm">Button</a>
+          <a class="btn btn-default btn-sm"><i class="fa fa-building fa-lg"></i> Button</a>
+          <a class="btn btn-default btn-sm"><i class="fa fa-building fa-lg"></i></a>
         </div>
         <div>
-          <a class="btn">Button</a>
-          <a class="btn"><i class="fa fa-building fa-lg"></i> Button</a>
-          <a class="btn"><i class="fa fa-building fa-lg"></i></a>
+          <a class="btn btn-default">Button</a>
+          <a class="btn btn-default"><i class="fa fa-building fa-lg"></i> Button</a>
+          <a class="btn btn-default"><i class="fa fa-building fa-lg"></i></a>
         </div>
         <div>
-          <a class="btn btn-large">Button</a>
-          <a class="btn btn-large"><i class="fa fa-building fa-lg"></i> Button</a>
-          <a class="btn btn-large"><i class="fa fa-building fa-lg"></i></a>
+          <a class="btn btn-default btn-lg">Button</a>
+          <a class="btn btn-default btn-lg"><i class="fa fa-building fa-lg"></i> Button</a>
+          <a class="btn btn-default btn-lg"><i class="fa fa-building fa-lg"></i></a>
         </div>
       </div>
     </div>
   </div>
   <div class="row">
-    <div class="span6">
+    <div class="col-md-6">
       <div style="border: solid 1px #d3d3d3; text-align: center;">
         <div>
-          <a class="btn btn-mini">Button</a>
-          <a class="btn btn-mini"><i class="fa fa-circle"></i> Button</a>
-          <a class="btn btn-mini"><i class="fa fa-circle"></i></a>
+          <a class="btn btn-default btn-xs">Button</a>
+          <a class="btn btn-default btn-xs"><i class="fa fa-circle"></i> Button</a>
+          <a class="btn btn-default btn-xs"><i class="fa fa-circle"></i></a>
         </div>
         <div>
-          <a class="btn btn-small">Button</a>
-          <a class="btn btn-small"><i class="fa fa-circle"></i> Button</a>
-          <a class="btn btn-small"><i class="fa fa-circle"></i></a>
+          <a class="btn btn-default btn-sm">Button</a>
+          <a class="btn btn-default btn-sm"><i class="fa fa-circle"></i> Button</a>
+          <a class="btn btn-default btn-sm"><i class="fa fa-circle"></i></a>
         </div>
         <div>
-          <a class="btn">Button</a>
-          <a class="btn"><i class="fa fa-circle"></i> Button</a>
-          <a class="btn"><i class="fa fa-circle"></i></a>
+          <a class="btn btn-default">Button</a>
+          <a class="btn btn-default"><i class="fa fa-circle"></i> Button</a>
+          <a class="btn btn-default"><i class="fa fa-circle"></i></a>
         </div>
         <div>
-          <a class="btn btn-large">Button</a>
-          <a class="btn btn-large"><i class="fa fa-circle"></i> Button</a>
-          <a class="btn btn-large"><i class="fa fa-circle"></i></a>
+          <a class="btn btn-default btn-lg">Button</a>
+          <a class="btn btn-default btn-lg"><i class="fa fa-circle"></i> Button</a>
+          <a class="btn btn-default btn-lg"><i class="fa fa-circle"></i></a>
         </div>
       </div>
     </div>
-    <div class="span6">
+    <div class="col-md-6">
       <div style="border: solid 1px #d3d3d3; text-align: center;">
         <div>
-          <a class="btn btn-mini">Button</a>
-          <a class="btn btn-mini"><i class="fa fa-circle fa-lg"></i> Button</a>
-          <a class="btn btn-mini"><i class="fa fa-circle fa-lg"></i></a>
+          <a class="btn btn-default btn-xs">Button</a>
+          <a class="btn btn-default btn-xs"><i class="fa fa-circle fa-lg"></i> Button</a>
+          <a class="btn btn-default btn-xs"><i class="fa fa-circle fa-lg"></i></a>
         </div>
         <div>
-          <a class="btn btn-small">Button</a>
-          <a class="btn btn-small"><i class="fa fa-circle fa-lg"></i> Button</a>
-          <a class="btn btn-small"><i class="fa fa-circle fa-lg"></i></a>
+          <a class="btn btn-default btn-sm">Button</a>
+          <a class="btn btn-default btn-sm"><i class="fa fa-circle fa-lg"></i> Button</a>
+          <a class="btn btn-default btn-sm"><i class="fa fa-circle fa-lg"></i></a>
         </div>
         <div>
-          <a class="btn">Button</a>
-          <a class="btn"><i class="fa fa-circle fa-lg"></i> Button</a>
-          <a class="btn"><i class="fa fa-circle fa-lg"></i></a>
+          <a class="btn btn-default">Button</a>
+          <a class="btn btn-default"><i class="fa fa-circle fa-lg"></i> Button</a>
+          <a class="btn btn-default"><i class="fa fa-circle fa-lg"></i></a>
         </div>
         <div>
-          <a class="btn btn-large">Button</a>
-          <a class="btn btn-large"><i class="fa fa-circle fa-lg"></i> Button</a>
-          <a class="btn btn-large"><i class="fa fa-circle fa-lg"></i></a>
+          <a class="btn btn-default btn-lg">Button</a>
+          <a class="btn btn-default btn-lg"><i class="fa fa-circle fa-lg"></i> Button</a>
+          <a class="btn btn-default btn-lg"><i class="fa fa-circle fa-lg"></i></a>
         </div>
       </div>
     </div>
@@ -354,37 +352,37 @@ relative_path: ../
 
   <h3>Button groups <small>should be same height</small></h3>
   <div class="row">
-    <div class="span4">
+    <div class="col-md-4">
       <div style="border: solid 1px #d3d3d3;">
         <div class="btn-group">
-            <button class="btn btn-large">
+            <button class="btn btn-default btn-lg">
                 <i class="fa fa-adjust"></i>
             </button>
-            <button class="btn btn-large">
+            <button class="btn btn-default btn-lg">
                 Text
             </button>
         </div>
       </div>
     </div>
-    <div class="span4">
+    <div class="col-md-4">
       <div style="border: solid 1px #d3d3d3;">
         <div class="btn-group">
-            <button class="btn">
+            <button class="btn btn-default">
                 <i class="fa fa-adjust"></i>
             </button>
-            <button class="btn">
+            <button class="btn btn-default">
                 Text
             </button>
         </div>
       </div>
     </div>
-    <div class="span4">
+    <div class="col-md-4">
       <div style="border: solid 1px #d3d3d3;">
         <div class="btn-group">
-            <button class="btn btn-small">
+            <button class="btn btn-default btn-sm">
                 <i class="fa fa-adjust"></i>
             </button>
-            <button class="btn btn-small">
+            <button class="btn btn-default btn-sm">
                 Text
             </button>
         </div>
@@ -394,30 +392,30 @@ relative_path: ../
 
   <h3>Buttons with pulled 2x, 3x, 4x <small>should be same height, have correct line height</small></h3>
   <div class="row">
-    <div class="span4">
+    <div class="col-md-4">
       <div style="border: solid 1px #d3d3d3;">
-        <a class="btn btn-large" href="#">
+        <a class="btn btn-default btn-lg" href="#">
           <i class="fa fa-github fa-2x pull-left"></i>
           Longer<br>Button</a>
-        <a class="btn btn-large" href="#">
+        <a class="btn btn-default btn-lg" href="#">
           Longer<br>Button</a>
       </div>
     </div>
-    <div class="span4">
+    <div class="col-md-4">
       <div style="border: solid 1px #d3d3d3;">
-        <a class="btn" href="#">
+        <a class="btn btn-default" href="#">
           <i class="fa fa-github fa-2x pull-left"></i>
           Longer<br>Button</a>
-        <a class="btn" href="#">
+        <a class="btn btn-default" href="#">
           Longer<br>Button</a>
       </div>
     </div>
-    <div class="span4">
+    <div class="col-md-4">
       <div style="border: solid 1px #d3d3d3;">
-        <a class="btn btn-small" href="#">
+        <a class="btn btn-default btn-sm" href="#">
           <i class="fa fa-github fa-2x pull-left"></i>
           Longer<br>Button</a>
-        <a class="btn btn-small" href="#">
+        <a class="btn btn-default btn-sm" href="#">
           Longer<br>Button</a>
       </div>
     </div>
@@ -426,7 +424,7 @@ relative_path: ../
 
   <h3>Nav pills & nav tabs <small>should be same height and properly vertically aligned</small></h3>
   <div class="row">
-    <div class="span9">
+    <div class="col-md-9">
       <ul class="nav nav-pills" style="border: solid 1px #d3d3d3;">
         <li class="active"><a href="#">Nav Item 1</a></li>
         <li class="dropdown active">
@@ -482,7 +480,7 @@ relative_path: ../
         <li class="active"><a href="#examples"><i class="fa fa-circle"></i> Nav Item 7</a></li>
       </ul>
     </div>
-    <div class="span3">
+    <div class="col-md-3">
       <ul class="nav nav-list">
         <li>
           <a href="#c1">
@@ -501,12 +499,12 @@ relative_path: ../
 
   <h3>Hide class directly on icons</h3>
   <div class="row">
-    <div class="span6">
+    <div class="col-md-6">
       <div class="well">
         <i class="hide fa fa-circle"></i> Icon should be hidden
       </div>
     </div>
-    <div class="span6">
+    <div class="col-md-6">
       <i class="hide fa fa-circle"></i> Icon should be hidden
     </div>
   </div>
@@ -514,13 +512,13 @@ relative_path: ../
 
   <h3>2x, 3x, 4x icons in text <small>should have margins next to and below text</small></h3>
   <div class="row">
-    <div class="span6">
+    <div class="col-md-6">
       <p class="lead">
         <i class="fa fa-stethoscope fa-3x pull-left fa-border"></i>
         Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam et lectus id nisl hendrerit varius. Aliquam erat volutpat. Suspendisse potenti. Aliquam erat volutpat. Aliquam ut dolor lectus.
       </p>
     </div>
-    <div class="span6">
+    <div class="col-md-6">
       <p class="lead">
         <i class="fa fa-ambulance fa-4x pull-right fa-border"></i>
         Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam et lectus id nisl hendrerit varius. Aliquam erat volutpat. Suspendisse potenti. Aliquam erat volutpat. Aliquam ut dolor lectus.
@@ -528,15 +526,15 @@ relative_path: ../
     </div>
   </div>
   <div class="row">
-    <div class="span4">
+    <div class="col-md-4">
       <i class="fa fa-building fa-2x pull-left fa-border"></i>
       Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam et lectus id nisl hendrerit varius. Aliquam erat volutpat. Suspendisse potenti. Aliquam erat volutpat. Aliquam ut dolor lectus.
     </div>
-    <div class="span4">
+    <div class="col-md-4">
       <i class="fa fa-stethoscope fa-3x pull-right fa-border"></i>
       Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam et lectus id nisl hendrerit varius. Aliquam erat volutpat. Suspendisse potenti. Aliquam erat volutpat. Aliquam ut dolor lectus.
     </div>
-    <div class="span4">
+    <div class="col-md-4">
       <i class="fa fa-ambulance fa-4x pull-left"></i>
       Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam et lectus id nisl hendrerit varius. Aliquam erat volutpat. Suspendisse potenti. Aliquam erat volutpat. Aliquam ut dolor lectus.
     </div>
@@ -545,20 +543,20 @@ relative_path: ../
 
   <h3>Bullets <small>should wrap appropriately, have proper spacing</small></h3>
   <div class="row">
-    <div class="span6">
+    <div class="col-md-6">
       <div style="border: solid 1px #d3d3d3;">
         <ul class="fa-ul">
           <li><i class="fa-li fa fa-double-angle-right"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
           <li><i class="fa-li fa fa-arrow-right"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam et lectus id nisl hendrerit varius. Aliquam erat volutpat. Suspendisse potenti. Aliquam erat volutpat. Aliquam ut dolor lectus.</li>
           <li><i class="fa-li fa fa-building"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
             <i class="fa fa-building"></i>
-            <span class="label">foo</span>
-            <a class="btn btn-mini">foo</a>
+            <span class="label label-default">foo</span>
+            <a class="btn btn-default btn-xs">foo</a>
           </li>
         </ul>
       </div>
     </div>
-    <div class="span6">
+    <div class="col-md-6">
       <div style="border: solid 1px #d3d3d3;">
         <ul class="fa-ul">
           <li><i class="fa-li fa fa-double-angle-right fa-lg"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
@@ -569,7 +567,7 @@ relative_path: ../
     </div>
   </div>
   <div class="row">
-    <div class="span6">
+    <div class="col-md-6">
       <div style="border: solid 1px #d3d3d3;">
         <ul class="fa-ul lead">
           <li><i class="fa-li fa fa-double-angle-right"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
@@ -578,7 +576,7 @@ relative_path: ../
         </ul>
       </div>
     </div>
-    <div class="span6">
+    <div class="col-md-6">
       <div style="border: solid 1px #d3d3d3;">
         <ul class="fa-ul lead">
           <li><i class="fa-li fa fa-double-angle-right fa-lg"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
@@ -589,7 +587,7 @@ relative_path: ../
     </div>
   </div>
   <div class="row">
-    <div class="span6">
+    <div class="col-md-6">
       <div style="border: solid 1px #d3d3d3;">
         <ul class="fa-ul">
           <li><a href="#"><i class="fa-li fa fa-double-angle-right"></i></a>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
@@ -598,7 +596,7 @@ relative_path: ../
         </ul>
       </div>
     </div>
-    <div class="span6">
+    <div class="col-md-6">
       <div style="border: solid 1px #d3d3d3;">
         <ul class="fa-ul">
           <li><a href="#"><i class="fa-li fa fa-double-angle-right fa-lg"></i></a>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
@@ -609,28 +607,28 @@ relative_path: ../
     </div>
   </div>
   <div class="row">
-    <div class="span6">
+    <div class="col-md-6">
       <div style="border: solid 1px #d3d3d3;">
         <ul class="fa-ul">
           <li><i class="fa-li fa fa-refresh fa-spin"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
           <li><i class="fa-li fa fa-spinner fa-spin"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam et lectus id nisl hendrerit varius. Aliquam erat volutpat. Suspendisse potenti. Aliquam erat volutpat. Aliquam ut dolor lectus.</li>
           <li><i class="fa-li fa fa-spinner fa-spin"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
             <i class="fa fa-building"></i>
-            <span class="label">foo</span>
-            <a class="btn btn-mini">foo</a>
+            <span class="label label-default">foo</span>
+            <a class="btn btn-default btn-xs">foo</a>
           </li>
         </ul>
       </div>
     </div>
-    <div class="span6">
+    <div class="col-md-6">
       <div style="border: solid 1px #d3d3d3;">
         <ul class="fa-ul">
           <li><i class="fa-li fa fa-refresh fa-spin fa-lg"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
           <li><i class="fa-li fa fa-spinner fa-spin fa-lg"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam et lectus id nisl hendrerit varius. Aliquam erat volutpat. Suspendisse potenti. Aliquam erat volutpat. Aliquam ut dolor lectus.</li>
           <li><i class="fa-li fa fa-spinner fa-spin fa-lg"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
             <i class="fa fa-building"></i>
-            <span class="label">foo</span>
-            <a class="btn btn-mini">foo</a>
+            <span class="label label-default">foo</span>
+            <a class="btn btn-default btn-xs">foo</a>
           </li>
         </ul>
       </div>
@@ -639,7 +637,7 @@ relative_path: ../
 
 
   <div class="row">
-    <div class="span6">
+    <div class="col-md-6">
       <div style="border: solid 1px #d3d3d3;">
         <ul>
           <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
@@ -648,7 +646,7 @@ relative_path: ../
         </ul>
       </div>
     </div>
-    <div class="span6">
+    <div class="col-md-6">
       <div style="border: solid 1px #d3d3d3;">
         <ul>
           <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
@@ -663,60 +661,60 @@ relative_path: ../
   <h3>Spinning icons <small>icons should be aligned well and on center, buttons should be same height, won't work in ie7</small></h3>
   <div style="border: solid 1px #d3d3d3;">
     <i class="fa fa-refresh fa-spin"></i> Loading...
-    <button class="btn btn-small"><i class="fa fa-refresh fa-spin"></i> Loading...</button>
-    <button class="btn btn-small">Loading...</button>
+    <button class="btn btn-default btn-sm"><i class="fa fa-refresh fa-spin"></i> Loading...</button>
+    <button class="btn btn-default btn-sm">Loading...</button>
     <i class="fa fa-circle-blank fa-spin"></i> Loading...
-    <button class="btn btn-small"><i class="fa fa-circle-blank fa-spin"></i> Loading...</button>
+    <button class="btn btn-default btn-sm"><i class="fa fa-circle-blank fa-spin"></i> Loading...</button>
     <a href="#"><i class="fa fa-refresh fa-spin"></i> Loading...</a>
   </div>
   <div style="border: solid 1px #d3d3d3;">
     <i class="fa fa-refresh fa-spin"></i> Loading...
-    <button class="btn"><i class="fa fa-refresh fa-spin"></i> Loading...</button>
-    <button class="btn">Loading...</button>
+    <button class="btn btn-default"><i class="fa fa-refresh fa-spin"></i> Loading...</button>
+    <button class="btn btn-default">Loading...</button>
     <i class="fa fa-circle-blank fa-spin"></i> Loading...
-    <button class="btn"><i class="fa fa-circle-blank fa-spin"></i> Loading...</button>
+    <button class="btn btn-default"><i class="fa fa-circle-blank fa-spin"></i> Loading...</button>
   </div>
   <div style="border: solid 1px #d3d3d3;">
     <i class="fa fa-spinner fa-spin"></i> Loading...
-    <button class="btn btn-large"><i class="fa fa-spinner fa-spin"></i> Loading...</button>
-    <button class="btn btn-large">Loading...</button>
+    <button class="btn btn-default btn-lg"><i class="fa fa-spinner fa-spin"></i> Loading...</button>
+    <button class="btn btn-default btn-lg">Loading...</button>
     <i class="fa fa-circle-blank fa-spin"></i> Loading...
-    <button class="btn btn-large"><i class="fa fa-circle-blank fa-spin"></i> Loading...</button>
+    <button class="btn btn-default btn-lg"><i class="fa fa-circle-blank fa-spin"></i> Loading...</button>
   </div>
   <h4>fa-lg</h4>
   <div style="border: solid 1px #d3d3d3;">
     <i class="fa fa-refresh fa-lg fa-spin"></i> Loading...
-    <button class="btn btn-small"><i class="fa fa-refresh fa-lg fa-spin"></i> Loading...</button>
-    <button class="btn btn-small">Loading...</button>
+    <button class="btn btn-default btn-sm"><i class="fa fa-refresh fa-lg fa-spin"></i> Loading...</button>
+    <button class="btn btn-default btn-sm">Loading...</button>
     <i class="fa fa-circle-blank fa-lg fa-spin"></i> Loading...
-    <button class="btn btn-small"><i class="fa fa-circle-blank fa-lg fa-spin"></i> Loading...</button>
+    <button class="btn btn-default btn-sm"><i class="fa fa-circle-blank fa-lg fa-spin"></i> Loading...</button>
   </div>
   <div style="border: solid 1px #d3d3d3;">
     <i class="fa fa-refresh fa-lg fa-spin"></i> Loading...
-    <button class="btn"><i class="fa fa-refresh fa-lg fa-spin"></i> Loading...</button>
-    <button class="btn">Loading...</button>
+    <button class="btn btn-default"><i class="fa fa-refresh fa-lg fa-spin"></i> Loading...</button>
+    <button class="btn btn-default">Loading...</button>
     <i class="fa fa-circle-blank fa-lg fa-spin"></i> Loading...
-    <button class="btn"><i class="fa fa-circle-blank fa-lg fa-spin"></i> Loading...</button>
+    <button class="btn btn-default"><i class="fa fa-circle-blank fa-lg fa-spin"></i> Loading...</button>
   </div>
   <div style="border: solid 1px #d3d3d3;">
     <i class="fa fa-spinner fa-lg fa-spin"></i> Loading...
-    <button class="btn btn-large"><i class="fa fa-spinner fa-lg fa-spin"></i> Loading...</button>
-    <button class="btn btn-large">Loading...</button>
+    <button class="btn btn-default btn-lg"><i class="fa fa-spinner fa-lg fa-spin"></i> Loading...</button>
+    <button class="btn btn-default btn-lg">Loading...</button>
     <i class="fa fa-circle-blank fa-lg fa-spin"></i> Loading...
-    <button class="btn btn-large"><i class="fa fa-circle-blank fa-lg fa-spin"></i> Loading...</button>
+    <button class="btn btn-default btn-lg"><i class="fa fa-circle-blank fa-lg fa-spin"></i> Loading...</button>
   </div>
   <h4>Bootstrap Prepend and Append</h4>
   <div class="row">
-    <div class="span6">
-      <div class="input-prepend">
-        <span class="add-on"><i class="fa fa-spinner fa-spin"></i></span>
-        <input class="span2" id="prependedInput" type="text" placeholder="Username">
+    <div class="col-md-4">
+      <div class="input-group">
+        <span class="input-group-addon"><i class="fa fa-spinner fa-spin"></i></span>
+        <input type="text" class="form-control" placeholder="Username">
       </div>
     </div>
-    <div class="span6">
-      <div class="input-append">
-        <input class="span2" id="appendedInput" type="text">
-        <span class="add-on"><i class="fa fa-spinner fa-spin"></i></span>
+    <div class="col-md-4">
+      <div class="input-group">
+        <input type="text" class="form-control">
+        <span class="input-group-addon"><i class="fa fa-spinner fa-spin"></i></span>
       </div>
     </div>
   </div>
@@ -736,12 +734,12 @@ relative_path: ../
 
   <h3>Mirrored and rotated icons</h3>
   <div class="row">
-    <div class="span6">
+    <div class="col-md-6">
       <div class="well">
         {% include tests/rotated-flipped.html %}
       </div>
     </div>
-    <div class="span6">
+    <div class="col-md-6">
       <div class="well lead">
         {% include tests/rotated-flipped.html %}
       </div>
@@ -749,12 +747,12 @@ relative_path: ../
   </div>
   <h4>Mirrored and rotated icons inside anchors and buttons</h4>
   <div class="row">
-    <div class="span6">
+    <div class="col-md-6">
       <div class="well">
         {% include tests/rotated-flipped-inside-anchor.html %}
       </div>
     </div>
-    <div class="span6">
+    <div class="col-md-6">
       <div class="well">
         {% include tests/rotated-flipped-inside-btn.html %}
       </div>