diff --git a/docs/assets/css/docs.css b/docs/assets/css/docs.css
index 0700ddd596..c61a4a4f88 100644
--- a/docs/assets/css/docs.css
+++ b/docs/assets/css/docs.css
@@ -217,7 +217,6 @@ section > ul li {
 /* Nav: second level (shown on .active) */
 .bs-docs-sidebar .nav .nav {
   display: none;
-  margin-left: 15px;
   margin-bottom: 5px;
 }
 .bs-docs-sidebar .nav > .active > ul {
@@ -226,6 +225,7 @@ section > ul li {
 .bs-docs-sidebar .nav .nav > li > a {
   padding-top: 2px;
   padding-bottom: 2px;
+  padding-left: 40px;
   font-size: 90%;
 }
 
diff --git a/docs/docs.html b/docs/docs.html
index a53dfd2c0f..f243c39de9 100644
--- a/docs/docs.html
+++ b/docs/docs.html
@@ -567,13 +567,13 @@ title: Bootstrap Documentation
           <h3>Emphasis classes</h3>
           <p>Convey meaning through color with a handful of emphasis utility classes.</p>
           <div class="bs-docs-example">
-            <p class="muted">Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.</p>
+            <p class="text-muted">Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.</p>
             <p class="text-warning">Etiam porta sem malesuada magna mollis euismod.</p>
             <p class="text-error">Donec ullamcorper nulla non metus auctor fringilla.</p>
             <p class="text-success">Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</p>
           </div>
 {% highlight html linenos %}
-<p class="muted">...</p>
+<p class="text-muted">...</p>
 <p class="text-warning">...</p>
 <p class="text-error">...</p>
 <p class="text-success">...</p>
@@ -2561,7 +2561,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
           <div class="bs-docs-example bs-docs-example-submenu">
 
             <div class="pull-left">
-              <p class="muted">Default</p>
+              <p class="text-muted">Default</p>
               <div class="dropdown clearfix">
                 <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu">
                   <li><a tabindex="-1" href="#">Action</a></li>
@@ -2583,7 +2583,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
             </div>
 
             <div class="pull-left">
-              <p class="muted">Dropup</p>
+              <p class="text-muted">Dropup</p>
               <div class="dropup">
                 <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu">
                   <li><a tabindex="-1" href="#">Action</a></li>
@@ -2605,7 +2605,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
             </div>
 
             <div class="pull-left">
-              <p class="muted">Left submenu</p>
+              <p class="text-muted">Left submenu</p>
               <div class="dropdown">
                 <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu">
                   <li><a tabindex="-1" href="#">Action</a></li>
@@ -4389,18 +4389,6 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
 }
 {% endhighlight %}
 
-          <h4>.muted</h4>
-          <p>Change an element's color to <code>#999</code></p>
-{% highlight html linenos %}
-<p class="muted">...</p>
-{% endhighlight %}
-{% highlight css linenos %}
-.muted {
-  color: #999;
-}
-{% endhighlight %}
-
-
           <h4>.clearfix</h4>
           <p>Clear the <code>float</code> on any element. Utilizes <a href="http://nicolasgallagher.com/micro-clearfix-hack/">the micro clearfix</a> as popularized by Nicolas Gallagher.</p>
 {% highlight html linenos %}
diff --git a/docs/examples/carousel.html b/docs/examples/carousel.html
index 598a6334b7..dd0c3ca1f0 100644
--- a/docs/examples/carousel.html
+++ b/docs/examples/carousel.html
@@ -369,7 +369,7 @@ body {
 
   <div class="featurette">
     <img class="featurette-image pull-right" src="../assets/img/examples/browser-icon-chrome.png">
-    <h2 class="featurette-heading">First featurette headling. <span class="muted">It'll blow your mind.</span></h2>
+    <h2 class="featurette-heading">First featurette headling. <span class="text-muted">It'll blow your mind.</span></h2>
     <p class="lead">Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod semper. Praesent commodo cursus magna, vel scelerisque nisl consectetur. Fusce dapibus, tellus ac cursus commodo.</p>
   </div>
 
@@ -377,7 +377,7 @@ body {
 
   <div class="featurette">
     <img class="featurette-image pull-left" src="../assets/img/examples/browser-icon-firefox.png">
-    <h2 class="featurette-heading">Oh yeah, it's that good. <span class="muted">See for yourself.</span></h2>
+    <h2 class="featurette-heading">Oh yeah, it's that good. <span class="text-muted">See for yourself.</span></h2>
     <p class="lead">Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod semper. Praesent commodo cursus magna, vel scelerisque nisl consectetur. Fusce dapibus, tellus ac cursus commodo.</p>
   </div>
 
@@ -385,7 +385,7 @@ body {
 
   <div class="featurette">
     <img class="featurette-image pull-right" src="../assets/img/examples/browser-icon-safari.png">
-    <h2 class="featurette-heading">And lastly, this one. <span class="muted">Checkmate.</span></h2>
+    <h2 class="featurette-heading">And lastly, this one. <span class="text-muted">Checkmate.</span></h2>
     <p class="lead">Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod semper. Praesent commodo cursus magna, vel scelerisque nisl consectetur. Fusce dapibus, tellus ac cursus commodo.</p>
   </div>
 
diff --git a/docs/examples/jumbotron-narrow.html b/docs/examples/jumbotron-narrow.html
index abf07dc722..84a9180645 100644
--- a/docs/examples/jumbotron-narrow.html
+++ b/docs/examples/jumbotron-narrow.html
@@ -94,7 +94,7 @@ title: Narrow page template
       <li><a href="#">About</a></li>
       <li><a href="#">Contact</a></li>
     </ul>
-    <h3 class="muted">Project name</h3>
+    <h3 class="text-muted">Project name</h3>
   </div>
 
   <div class="jumbotron">
diff --git a/docs/examples/justified-nav.html b/docs/examples/justified-nav.html
index 7013b150ee..f136ee92ae 100644
--- a/docs/examples/justified-nav.html
+++ b/docs/examples/justified-nav.html
@@ -96,7 +96,7 @@ title: Justified nav template
 <div class="container">
 
   <div class="masthead">
-    <h3 class="muted">Project name</h3>
+    <h3 class="text-muted">Project name</h3>
     <ul class="nav nav-justified">
       <li class="active"><a href="#">Home</a></li>
       <li><a href="#">Projects</a></li>
diff --git a/docs/examples/sticky-footer-navbar.html b/docs/examples/sticky-footer-navbar.html
index b00bfd5aba..9187b78820 100644
--- a/docs/examples/sticky-footer-navbar.html
+++ b/docs/examples/sticky-footer-navbar.html
@@ -112,6 +112,6 @@ title: Sticky footer with navbar template
 
 <div id="footer">
   <div class="container">
-    <p class="muted credit">Example courtesy <a href="http://martinbean.co.uk">Martin Bean</a> and <a href="http://ryanfait.com/sticky-footer/">Ryan Fait</a>.</p>
+    <p class="text-muted credit">Example courtesy <a href="http://martinbean.co.uk">Martin Bean</a> and <a href="http://ryanfait.com/sticky-footer/">Ryan Fait</a>.</p>
   </div>
 </div>
diff --git a/docs/examples/sticky-footer.html b/docs/examples/sticky-footer.html
index 722d3aa19a..6ddd5a1dc1 100644
--- a/docs/examples/sticky-footer.html
+++ b/docs/examples/sticky-footer.html
@@ -76,6 +76,6 @@ title: Sticky footer template
 
 <div id="footer">
   <div class="container">
-    <p class="muted credit">Example courtesy <a href="http://martinbean.co.uk">Martin Bean</a> and <a href="http://ryanfait.com/sticky-footer/">Ryan Fait</a>.</p>
+    <p class="text-muted credit">Example courtesy <a href="http://martinbean.co.uk">Martin Bean</a> and <a href="http://ryanfait.com/sticky-footer/">Ryan Fait</a>.</p>
   </div>
 </div>
diff --git a/less/type.less b/less/type.less
index 60ad793e90..6725f3902a 100644
--- a/less/type.less
+++ b/less/type.less
@@ -28,9 +28,9 @@ em      { font-style: italic; }
 cite    { font-style: normal; }
 
 // Utility classes
-.muted               { color: @grayLight; }
-a.muted:hover,
-a.muted:focus        { color: darken(@grayLight, 10%); }
+.text-muted          { color: @grayLight; }
+a.text-muted:hover,
+a.text-muted:focus   { color: darken(@grayLight, 10%); }
 
 .text-warning        { color: @state-warning-text; }
 a.text-warning:hover,