Merge branch 'master' into docs_derp

.travis.yml

 language: node_js
 node_js:
-  - 0.10
+  - "0.10"
 before_install:
   - time sudo pip install --use-mirrors -r test-infra/requirements.txt
   - rvm use 1.9.3 --fuzzy

_config.yml

@@ -16,6 +16,7 @@ url:              http://localhost:9001
 # Custom vars
 current_version:  3.0.3
 repo:             https://github.com/twbs/bootstrap
+sass_repo:        https://github.com/twbs/bootstrap-sass
 
 download:
   source:         https://github.com/twbs/bootstrap/archive/v3.0.3.zip
@@ -24,7 +25,6 @@ download:
 
 blog:             http://blog.getbootstrap.com
 expo:             http://expo.getbootstrap.com
-sass_repo:        https://github.com/twbs/bootstrap-sass
 
 cdn:
   css:            //netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css

docs/about.html

@@ -174,7 +174,7 @@ lead: "Learn about the history of Bootstrap, meet the core team, and check out t
   <div class="page-header">
     <h1 id="translations">Translations</h1>
   </div>
-  <p class="lead">Community members have translated Bootstrap's documentation into various langauges. None are officially supported and may not always be up to date.</p>
+  <p class="lead">Community members have translated Bootstrap's documentation into various languages. None are officially supported and may not always be up to date.</p>
   <ul>
     <li><a href="http://v3.bootcss.com/">Bootstrap 中文文档 (Chinese)</a></li>
     <li><a href="http://www.oneskyapp.com/docs/bootstrap/ru">Bootstrap по-русски (Russian)</a></li>

docs/assets/js/application.js

@@ -24,7 +24,7 @@
           '@-ms-viewport{width:auto!important}'
         )
       );
-      document.getElementsByTagName('head')[0].
+      document.querySelector('head').
         appendChild(msViewportStyle);
     }
 

docs/css.html

@@ -2552,7 +2552,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
 
 
     <h3 id="helper-classes-screen-readers">Screen reader content</h3>
-    <p>Hide an element to all devices <strong>except screen readers</strong> with <code>.sr-only</code>. Necessary for following <a href="{{ site.baseurl }}getting-started#accessibility">accessibility best practices</a>. Can also be used as a mixin.</p>
+    <p>Hide an element to all devices <strong>except screen readers</strong> with <code>.sr-only</code>. Necessary for following <a href="../getting-started/#accessibility">accessibility best practices</a>. Can also be used as a mixin.</p>
 {% highlight html %}
 <a class="sr-only" href="#content">Skip to main content</a>
 {% endhighlight %}
@@ -2820,7 +2820,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
     </div>
     <p class="lead">Bootstrap's CSS is built on Less, a preprocessor with additional functionality like variables, mixins, and functions for compiling CSS. Those looking to use the source Less files instead of our compiled CSS files can make use of the numerous variables and mixins we use throughout the framework.</p>
 
-    <p>Grid variables and mixins are covered <a href="{{ site.baseurl }}css/#grid-less">within the Grid system section</a>.</p>
+    <p>Grid variables and mixins are covered <a href="#grid-less">within the Grid system section</a>.</p>
 
 
     <h2 id="less-bootstrap">Compiling Bootstrap</h2>
@@ -2828,7 +2828,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
     <p>Third party compilation tools may work with Bootstrap, but they are not supported by our core team.</p>
 
     <h2 id="less-variables">Variables</h2>
-    <p>Variables are used throughout the entire project as a way to centralize and share commonly used values like colors, spacing, or font stacks. For a complete breakdown, please see <a href="{{ site.baseurl }}customize/#less-variables-section">the Customizer</a>.</p>
+    <p>Variables are used throughout the entire project as a way to centralize and share commonly used values like colors, spacing, or font stacks. For a complete breakdown, please see <a href="../customize/#less-variables-section">the Customizer</a>.</p>
 
     <h3 id="less-variables-colors">Colors</h3>
     <p>Easily make use of two color schemes: grayscale and semantic. Grayscale colors provide quick access to commonly used shades of black while semantic include various colors assigned to meaningful contextual values.</p>
@@ -3466,7 +3466,7 @@ Bootstrap.javascripts_path
 @import "bootstrap/theme";
 {% endhighlight %}
 
-    <p>The full list of Bootstrap variables can be found <a href="{{ page.url }}customize/#less-variables">in the Customizer</a>. You can override these by simply redefining the variable before the <code>@import</code> directive, e.g.:</p>
+    <p>The full list of Bootstrap variables can be found <a href="../customize/#less-variables">in the Customizer</a>. You can override these by simply redefining the variable before the <code>@import</code> directive, e.g.:</p>
 
 {% highlight sass %}
 $navbar-default-bg: #312312;

docs/examples/dashboard/index.html

@@ -55,7 +55,7 @@
 
     <div class="container-fluid">
       <div class="row">
-        <div class="col-sm-3 sidebar">
+        <div class="col-sm-3 col-md-2 sidebar">
           <ul class="nav nav-sidebar">
             <li class="active"><a href="#">Overview</a></li>
             <li><a href="#">Reports</a></li>
@@ -75,7 +75,7 @@
             <li><a href="">Another nav item</a></li>
           </ul>
         </div>
-        <div class="col-sm-9 col-sm-offset-3 main">
+        <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
           <h1 class="page-header">Dashboard</h1>
 
           <div class="row placeholders">

docs/examples/navbar/index.html

@@ -32,39 +32,41 @@
 
       <!-- Static navbar -->
       <div class="navbar navbar-default" role="navigation">
-        <div class="navbar-header">
-          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
-            <span class="sr-only">Toggle navigation</span>
-            <span class="icon-bar"></span>
-            <span class="icon-bar"></span>
-            <span class="icon-bar"></span>
-          </button>
-          <a class="navbar-brand" href="#">Project name</a>
-        </div>
-        <div class="navbar-collapse collapse">
-          <ul class="nav navbar-nav">
-            <li class="active"><a href="#">Link</a></li>
-            <li><a href="#">Link</a></li>
-            <li><a href="#">Link</a></li>
-            <li class="dropdown">
-              <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
-              <ul class="dropdown-menu">
-                <li><a href="#">Action</a></li>
-                <li><a href="#">Another action</a></li>
-                <li><a href="#">Something else here</a></li>
-                <li class="divider"></li>
-                <li class="dropdown-header">Nav header</li>
-                <li><a href="#">Separated link</a></li>
-                <li><a href="#">One more separated link</a></li>
-              </ul>
-            </li>
-          </ul>
-          <ul class="nav navbar-nav navbar-right">
-            <li class="active"><a href="./">Default</a></li>
-            <li><a href="../navbar-static-top/">Static top</a></li>
-            <li><a href="../navbar-fixed-top/">Fixed top</a></li>
-          </ul>
-        </div><!--/.nav-collapse -->
+        <div class="container-fluid">
+          <div class="navbar-header">
+            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
+              <span class="sr-only">Toggle navigation</span>
+              <span class="icon-bar"></span>
+              <span class="icon-bar"></span>
+              <span class="icon-bar"></span>
+            </button>
+            <a class="navbar-brand" href="#">Project name</a>
+          </div>
+          <div class="navbar-collapse collapse">
+            <ul class="nav navbar-nav">
+              <li class="active"><a href="#">Link</a></li>
+              <li><a href="#">Link</a></li>
+              <li><a href="#">Link</a></li>
+              <li class="dropdown">
+                <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
+                <ul class="dropdown-menu">
+                  <li><a href="#">Action</a></li>
+                  <li><a href="#">Another action</a></li>
+                  <li><a href="#">Something else here</a></li>
+                  <li class="divider"></li>
+                  <li class="dropdown-header">Nav header</li>
+                  <li><a href="#">Separated link</a></li>
+                  <li><a href="#">One more separated link</a></li>
+                </ul>
+              </li>
+            </ul>
+            <ul class="nav navbar-nav navbar-right">
+              <li class="active"><a href="./">Default</a></li>
+              <li><a href="../navbar-static-top/">Static top</a></li>
+              <li><a href="../navbar-fixed-top/">Fixed top</a></li>
+            </ul>
+          </div><!--/.nav-collapse -->
+        </div><!--/.container-fluid -->
       </div>
 
       <!-- Main component for a primary marketing message or call to action -->

docs/getting-started.html

@@ -111,7 +111,7 @@ bootstrap/
     <div class="page-header">
       <h1 id="template">Basic template</h1>
     </div>
-    <p class="lead">Start with this basic HTML template, or modify <a href="../getting-started#examples">these examples</a>. We hope you'll customize our templates and examples, adapting them to suit your needs.</p>
+    <p class="lead">Start with this basic HTML template, or modify <a href="#examples">these examples</a>. We hope you'll customize our templates and examples, adapting them to suit your needs.</p>
 
     <p>Copy the HTML below to begin working with a minimal Bootstrap document.</p>
 {% highlight html %}
@@ -294,7 +294,7 @@ bootstrap/
           <img src="../examples/screenshots/non-responsive.jpg" alt="">
         </a>
         <h4>Non-responsive Bootstrap</h4>
-        <p>Easily disable the responsiveness of Bootstrap <a href="../getting-started/#disable-responsive">per our docs</a>.</p>
+        <p>Easily disable the responsiveness of Bootstrap <a href="#disable-responsive">per our docs</a>.</p>
       </div>
       <div class="col-xs-6 col-md-4">
         <a class="thumbnail" href="../examples/offcanvas/">
@@ -857,7 +857,7 @@ if (navigator.userAgent.match(/IEMobile\/10\.0/)) {
       "@-ms-viewport{width:auto!important}"
     )
   )
-  document.getElementsByTagName("head")[0].appendChild(msViewportStyle)
+  document.querySelector("head").appendChild(msViewportStyle)
 }
 {% endhighlight %}
     <p>For more information and usage guidelines, read <a href="http://timkadlec.com/2013/01/windows-phone-8-and-device-width/">Windows Phone 8 and Device-Width</a>.</p>
@@ -1007,12 +1007,12 @@ if (isAndroid) {
       <li>Freely download and use Bootstrap, in whole or in part, for personal, private, company internal, or commercial purposes</li>
       <li>Use Bootstrap in packages or distributions that you create</li>
       <li>Modify the source code</li>
-      <li>Grant a sublicense to modify and distribute Bootstrap to third parties not included in the lincense</li>
+      <li>Grant a sublicense to modify and distribute Bootstrap to third parties not included in the license</li>
     </ul>
 
     <h4>It forbids you to:</h4>
     <ul>
-      <li>Hold the authors and license owners liable for damanges as Bootstrap is provided without warranty</li>
+      <li>Hold the authors and license owners liable for damages as Bootstrap is provided without warranty</li>
       <li>Hold the creators or copyright holders of Bootstrap liable</li>
       <li>Redistribute any piece of Bootstrap without proper attribution</li>
       <li>Use any marks owned by Twitter in any way that might state or imply that Twitter endorses your distribution</li>

docs/javascript.html

@@ -109,7 +109,7 @@ $('#myModal').on('show.bs.modal', function (e) {
     </div>
     <div class="bs-callout bs-callout-warning">
       <h4>Mobile device caveats</h4>
-      <p>There are some caveats regarding using modals on mobile devices. <a href="{{ site.baseurl }}getting-started#fixed-position-keyboards">See our browser support docs</a> for details.</p>
+      <p>There are some caveats regarding using modals on mobile devices. <a href="../getting-started/#support-fixed-position-keyboards">See our browser support docs</a> for details.</p>
     </div>
 
     <h3>Static example</h3>
@@ -431,51 +431,53 @@ $('#myModal').on('hidden.bs.modal', function (e) {
     <h3>Within a navbar</h3>
     <div class="bs-example">
       <nav id="navbar-example" class="navbar navbar-default navbar-static" role="navigation">
-        <div class="navbar-header">
-          <button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".bs-js-navbar-collapse">
-            <span class="sr-only">Toggle navigation</span>
-            <span class="icon-bar"></span>
-            <span class="icon-bar"></span>
-            <span class="icon-bar"></span>
-          </button>
-          <a class="navbar-brand" href="#">Project Name</a>
-        </div>
-        <div class="collapse navbar-collapse bs-js-navbar-collapse">
-          <ul class="nav navbar-nav">
-            <li class="dropdown">
-              <a id="drop1" href="#" role="button" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
-              <ul class="dropdown-menu" role="menu" aria-labelledby="drop1">
-                <li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Action</a></li>
-                <li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Another action</a></li>
-                <li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Something else here</a></li>
-                <li role="presentation" class="divider"></li>
-                <li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Separated link</a></li>
-              </ul>
-            </li>
-            <li class="dropdown">
-              <a href="#" id="drop2" role="button" class="dropdown-toggle" data-toggle="dropdown">Dropdown 2 <b class="caret"></b></a>
-              <ul class="dropdown-menu" role="menu" aria-labelledby="drop2">
-                <li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Action</a></li>
-                <li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Another action</a></li>
-                <li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Something else here</a></li>
-                <li role="presentation" class="divider"></li>
-                <li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Separated link</a></li>
-              </ul>
-            </li>
-          </ul>
-          <ul class="nav navbar-nav navbar-right">
-            <li id="fat-menu" class="dropdown">
-              <a href="#" id="drop3" role="button" class="dropdown-toggle" data-toggle="dropdown">Dropdown 3 <b class="caret"></b></a>
-              <ul class="dropdown-menu" role="menu" aria-labelledby="drop3">
-                <li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Action</a></li>
-                <li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Another action</a></li>
-                <li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Something else here</a></li>
-                <li role="presentation" class="divider"></li>
-                <li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Separated link</a></li>
-              </ul>
-            </li>
-          </ul>
-        </div><!-- /.nav-collapse -->
+        <div class="container-fluid">
+          <div class="navbar-header">
+            <button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".bs-js-navbar-collapse">
+              <span class="sr-only">Toggle navigation</span>
+              <span class="icon-bar"></span>
+              <span class="icon-bar"></span>
+              <span class="icon-bar"></span>
+            </button>
+            <a class="navbar-brand" href="#">Project Name</a>
+          </div>
+          <div class="collapse navbar-collapse bs-js-navbar-collapse">
+            <ul class="nav navbar-nav">
+              <li class="dropdown">
+                <a id="drop1" href="#" role="button" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
+                <ul class="dropdown-menu" role="menu" aria-labelledby="drop1">
+                  <li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Action</a></li>
+                  <li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Another action</a></li>
+                  <li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Something else here</a></li>
+                  <li role="presentation" class="divider"></li>
+                  <li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Separated link</a></li>
+                </ul>
+              </li>
+              <li class="dropdown">
+                <a href="#" id="drop2" role="button" class="dropdown-toggle" data-toggle="dropdown">Dropdown 2 <b class="caret"></b></a>
+                <ul class="dropdown-menu" role="menu" aria-labelledby="drop2">
+                  <li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Action</a></li>
+                  <li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Another action</a></li>
+                  <li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Something else here</a></li>
+                  <li role="presentation" class="divider"></li>
+                  <li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Separated link</a></li>
+                </ul>
+              </li>
+            </ul>
+            <ul class="nav navbar-nav navbar-right">
+              <li id="fat-menu" class="dropdown">
+                <a href="#" id="drop3" role="button" class="dropdown-toggle" data-toggle="dropdown">Dropdown 3 <b class="caret"></b></a>
+                <ul class="dropdown-menu" role="menu" aria-labelledby="drop3">
+                  <li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Action</a></li>
+                  <li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Another action</a></li>
+                  <li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Something else here</a></li>
+                  <li role="presentation" class="divider"></li>
+                  <li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Separated link</a></li>
+                </ul>
+              </li>
+            </ul>
+          </div><!-- /.nav-collapse -->
+        </div><!-- /.container-fluid -->
       </nav> <!-- /navbar-example -->
     </div> <!-- /example -->
 
@@ -606,29 +608,31 @@ $('#myDropdown').on('show.bs.dropdown', function () {
     <p>The ScrollSpy plugin is for automatically updating nav targets based on scroll position. Scroll the area below the navbar and watch the active class change. The dropdown sub items will be highlighted as well.</p>
     <div class="bs-example">
       <nav id="navbar-example2" class="navbar navbar-default navbar-static" role="navigation">
-        <div class="navbar-header">
-          <button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".bs-js-navbar-scrollspy">
-            <span class="sr-only">Toggle navigation</span>
-            <span class="icon-bar"></span>
-            <span class="icon-bar"></span>
-            <span class="icon-bar"></span>
-          </button>
-          <a class="navbar-brand" href="#">Project Name</a>
-        </div>
-        <div class="collapse navbar-collapse bs-js-navbar-scrollspy">
-          <ul class="nav navbar-nav">
-            <li><a href="#fat">@fat</a></li>
-            <li><a href="#mdo">@mdo</a></li>
-            <li class="dropdown">
-              <a href="#" id="navbarDrop1" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
-              <ul class="dropdown-menu" role="menu" aria-labelledby="navbarDrop1">
-                <li><a href="#one" tabindex="-1">one</a></li>
-                <li><a href="#two" tabindex="-1">two</a></li>
-                <li class="divider"></li>
-                <li><a href="#three" tabindex="-1">three</a></li>
-              </ul>
-            </li>
-          </ul>
+        <div class="container-fluid">
+          <div class="navbar-header">
+            <button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".bs-js-navbar-scrollspy">
+              <span class="sr-only">Toggle navigation</span>
+              <span class="icon-bar"></span>
+              <span class="icon-bar"></span>
+              <span class="icon-bar"></span>
+            </button>
+            <a class="navbar-brand" href="#">Project Name</a>
+          </div>
+          <div class="collapse navbar-collapse bs-js-navbar-scrollspy">
+            <ul class="nav navbar-nav">
+              <li><a href="#fat">@fat</a></li>
+              <li><a href="#mdo">@mdo</a></li>
+              <li class="dropdown">
+                <a href="#" id="navbarDrop1" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
+                <ul class="dropdown-menu" role="menu" aria-labelledby="navbarDrop1">
+                  <li><a href="#one" tabindex="-1">one</a></li>
+                  <li><a href="#two" tabindex="-1">two</a></li>
+                  <li class="divider"></li>
+                  <li><a href="#three" tabindex="-1">three</a></li>
+                </ul>
+              </li>
+            </ul>
+          </div>
         </div>
       </nav>
       <div data-spy="scroll" data-target="#navbar-example2" data-offset="0" class="scrollspy-example">
@@ -795,7 +799,7 @@ $('#myTab li:eq(2) a').tab('show') // Select third tab (0-indexed)
 {% endhighlight %}
 
     <h3>Markup</h3>
-    <p>You can activate a tab or pill navigation without writing any JavaScript by simply specifying <code>data-toggle="tab"</code> or <code>data-toggle="pill"</code> on an element. Adding the <code>nav</code> and <code>nav-tabs</code> classes to the tab <code>ul</code> will apply the Bootstrap <a href="{{ site.baseurl }}components#nav-tabs">tab styling</a>, while adding the <code>nav</code> and <code>nav-pills</code> classes will apply <a href="{{ site.baseurl }}components#nav-pills">pill styling</a>.</p>
+    <p>You can activate a tab or pill navigation without writing any JavaScript by simply specifying <code>data-toggle="tab"</code> or <code>data-toggle="pill"</code> on an element. Adding the <code>nav</code> and <code>nav-tabs</code> classes to the tab <code>ul</code> will apply the Bootstrap <a href="../components/#nav-tabs">tab styling</a>, while adding the <code>nav</code> and <code>nav-pills</code> classes will apply <a href="../components/#nav-pills">pill styling</a>.</p>
 {% highlight html %}
 <!-- Nav tabs -->
 <ul class="nav nav-tabs">

less/forms.less

@@ -325,7 +325,7 @@ input[type="checkbox"],
 .form-inline {
 
   // Kick in the inline
-  @media (min-width: @screen-sm) {
+  @media (min-width: @screen-sm-min) {
     // Inline-block all the things for "inline"
     .form-group {
       display: inline-block;