Merge branch 'master' into docs-theme-toggler

Conflicts:
	docs/assets/css/docs.min.css

18 files changed, 143 insertions, 134 deletions

diff --git a/docs/_includes/components/navs.html b/docs/_includes/components/navs.html
index 9cad335d0..d9c45fa2d 100644
--- a/docs/_includes/components/navs.html
+++ b/docs/_includes/components/navs.html
@@ -6,14 +6,14 @@
   <h2 id="nav-tabs">Tabs</h2>
   <p>Note the <code>.nav-tabs</code> class requires the <code>.nav</code> base class.</p>
   <div class="bs-example">
-    <ul class="nav nav-tabs">
+    <ul class="nav nav-tabs" role="tablist">
       <li class="active"><a href="#">Home</a></li>
       <li><a href="#">Profile</a></li>
       <li><a href="#">Messages</a></li>
     </ul>
   </div>
 {% highlight html %}
-<ul class="nav nav-tabs">
+<ul class="nav nav-tabs" role="tablist">
   <li class="active"><a href="#">Home</a></li>
   <li><a href="#">Profile</a></li>
   <li><a href="#">Messages</a></li>
@@ -62,7 +62,7 @@
     <p>As of v7.0.1, Safari exhibits a bug in which resizing your browser horizontally causes rendering errors in the justified nav that are cleared upon refreshing. This bug is also shown in the <a href="../examples/justified-nav/">justified nav example</a>.</p>
   </div>
   <div class="bs-example">
-    <ul class="nav nav-tabs nav-justified">
+    <ul class="nav nav-tabs nav-justified" role="tablist">
       <li class="active"><a href="#">Home</a></li>
       <li><a href="#">Profile</a></li>
       <li><a href="#">Messages</a></li>
@@ -75,7 +75,7 @@
     </ul>
   </div>
 {% highlight html %}
-<ul class="nav nav-tabs nav-justified">
+<ul class="nav nav-tabs nav-justified" role="tablist">
   ...
 </ul>
 <ul class="nav nav-pills nav-justified">
@@ -113,7 +113,7 @@
 
   <h3>Tabs with dropdowns</h3>
   <div class="bs-example">
-    <ul class="nav nav-tabs">
+    <ul class="nav nav-tabs" role="tablist">
       <li class="active"><a href="#">Home</a></li>
       <li><a href="#">Help</a></li>
       <li class="dropdown">
@@ -131,7 +131,7 @@
     </ul>
   </div>
 {% highlight html %}
-<ul class="nav nav-tabs">
+<ul class="nav nav-tabs" role="tablist">
   ...
   <li class="dropdown">
     <a class="dropdown-toggle" data-toggle="dropdown" href="#">
diff --git a/docs/_includes/css/code.html b/docs/_includes/css/code.html
index 0d1396145..6e15b4c56 100644
--- a/docs/_includes/css/code.html
+++ b/docs/_includes/css/code.html
@@ -16,7 +16,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
   To switch directories, type <kbd>cd</kbd> followed by the name of the directory.
 </div>
 {% highlight html %}
-  To switch directories, type <kbd>cd</kbd> followed by the name of the directory.
+To switch directories, type <kbd>cd</kbd> followed by the name of the directory.
 {% endhighlight %}
 
   <h2 id="code-block">Basic block</h2>
diff --git a/docs/_includes/footer.html b/docs/_includes/footer.html
index 6d626a198..0bb3eafd3 100644
--- a/docs/_includes/footer.html
+++ b/docs/_includes/footer.html
@@ -32,7 +32,7 @@
 <!-- Bootstrap core JavaScript
 ================================================== -->
 <!-- Placed at the end of the document so the pages load faster -->
-<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
+<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
 <script src="../dist/js/bootstrap.min.js"></script>
 <script src="../assets/js/docs.min.js"></script>
 {% if page.slug == "customize" %}
diff --git a/docs/_includes/getting-started/browser-device-support.html b/docs/_includes/getting-started/browser-device-support.html
index a799bbb96..1a1236440 100644
--- a/docs/_includes/getting-started/browser-device-support.html
+++ b/docs/_includes/getting-started/browser-device-support.html
@@ -173,7 +173,7 @@ if (navigator.userAgent.match(/IEMobile\/10\.0/)) {
   <h3 id="support-android-stock-browser">Android stock browser</h3>
   <p>Out of the box, Android 4.1 (and even some newer releases apparently) ship with the Browser app as the default web browser of choice (as opposed to Chrome). Unfortunately, the Browser app has lots of bugs and inconsistencies with CSS in general.</p>
   <h4>Select menus</h4>
-  <p>On <code>&lt;select&gt;</code> elements, the Android stock browser will not display the side controls if there is a <code>border-radius</code> and/or <code>border</code> applied. Use the snippet of code below to remove the offending CSS and render the <code>&lt;select&gt;</code> as an unstyled element on the Android stock browser. The user agent sniffing avoids interference with Chrome, Safari, and Mozilla browsers.</p>
+  <p>On <code>&lt;select&gt;</code> elements, the Android stock browser will not display the side controls if there is a <code>border-radius</code> and/or <code>border</code> applied. (See <a href="http://stackoverflow.com/questions/14744437/html-select-box-not-showing-drop-down-arrow-on-android-version-4-0-when-set-with">this StackOverflow question</a> for details.) Use the snippet of code below to remove the offending CSS and render the <code>&lt;select&gt;</code> as an unstyled element on the Android stock browser. The user agent sniffing avoids interference with Chrome, Safari, and Mozilla browsers.</p>
 {% highlight html %}
 <script>
 $(function () {
diff --git a/docs/_includes/getting-started/download.html b/docs/_includes/getting-started/download.html
index b457d038e..bb0537796 100644
--- a/docs/_includes/getting-started/download.html
+++ b/docs/_includes/getting-started/download.html
@@ -13,7 +13,7 @@
     </div>
     <div class="col-sm-4">
       <h3 id="download-source">Source code</h3>
-      <p>Source Less, JavaScript, and font files, along with our docs. <strong>Requires a Less compiler and <a href="{{ site.repo }}#compiling-css-and-javascript">some setup.</a></strong></p>
+      <p>Source Less, JavaScript, and font files, along with our docs. <strong>Requires a Less compiler and <a href="#grunt">some setup.</a></strong></p>
       <p>
         <a href="{{ site.download.source }}" class="btn btn-lg btn-outline" role="button" onclick="ga('send', 'event', 'Getting started', 'Download', 'Download source');">Download source</a>
       </p>
@@ -33,9 +33,6 @@
 <!-- Latest compiled and minified CSS -->
 <link rel="stylesheet" href="{{ site.cdn.css }}">
 
-<!-- RTL (right-to-left) version of CSS -->
-<link rel="stylesheet" href="{{ site.cdn.css_rtl }}">
-
 <!-- Optional theme -->
 <link rel="stylesheet" href="{{ site.cdn.css_theme }}">
 
diff --git a/docs/_includes/getting-started/grunt.html b/docs/_includes/getting-started/grunt.html
new file mode 100644
index 000000000..93fa44a70
--- /dev/null
+++ b/docs/_includes/getting-started/grunt.html
@@ -0,0 +1,32 @@
+<div class="bs-docs-section">
+  <h1 id="grunt" class="page-header">Compiling CSS and JavaScript</h1>
+
+  <p class="lead">Bootstrap uses <a href="http://gruntjs.com">Grunt</a> for its build system, with convenient methods for working with the framework. It's how we compile our code, run tests, and more.</p>
+
+  <h2 id="grunt-installing">Installing Grunt</h2>
+  <p>To install Grunt, you must <strong>first <a href="http://nodejs.org/download/">download and install node.js</a></strong> (which includes npm). npm stands for <a href="http://npmjs.org/">node packaged modules</a> and is a way to manage development dependencies through node.js.</p>
+
+  Then, from the command line:
+  <ol>
+    <li>Install <code>grunt-cli</code> globally with <code>npm install -g grunt-cli</code>.</li>
+    <li>Navigate to the root <code>/bootstrap/</code> directory, then run <code>npm install</code>. npm will look at the <a href="https://github.com/twbs/bootstrap/blob/master/package.json"><code>package.json</code></a> file and automatically install the necessary local dependencies listed there.</li>
+  </ol>
+
+  <p>When completed, you'll be able to run the various Grunt commands provided from the command line.</p>
+
+  <h2 id="grunt-commands">Available Grunt commands</h2>
+  <h3><code>grunt dist</code> (Just compile CSS and JavaScript)</h3>
+  <p>Regenerates the <code>/dist/</code> directory with compiled and minified CSS and JavaScript files. As a Bootstrap user, this is normally the command you want.</p>
+
+  <h3><code>grunt watch</code> (Watch)</h3>
+  <p>Watches the Less source files and automatically recompiles them to CSS whenever you save a change.</p>
+
+  <h3><code>grunt test</code> (Run tests)</h3>
+  <p>Runs <a href="http://jshint.com">JSHint</a> and runs the <a href="http://qunitjs.com">QUnit</a> tests headlessly in <a href="http://phantomjs.org">PhantomJS</a>.</p>
+
+  <h3><code>grunt</code> (Build absolutely everything and run tests)</h3>
+  <p>Compiles and minifies CSS and JavaScript, builds the documentation website, runs the HTML5 validator against the docs, regenerates the Customizer assets, and more. Usually only necessary if you're hacking on Bootstrap itself.</p>
+
+  <h2 id="grunt-troubleshooting">Troubleshooting</h2>
+  <p>Should you encounter problems with installing dependencies or running Grunt commands, first delete the <code>/node_modules/</code> directory generated by npm. Then, rerun <code>npm install</code>.</p>
+</div>
diff --git a/docs/_includes/getting-started/rtl.html b/docs/_includes/getting-started/rtl.html
deleted file mode 100644
index 55568ccd6..000000000
--- a/docs/_includes/getting-started/rtl.html
+++ /dev/null
@@ -1,25 +0,0 @@
-<div class="bs-docs-section">
-  <h1 id="rtl" class="page-header">RTL</h1>
-  <p class="lead">As of Bootstrap 3.2, a right-to-left version of Bootstrap ships as part of the repository. It's powered by Twitter's <a href="https://github.com/twitter/css-flip">CSS Flip project</a> and is generated via our Gruntfile.</p>
-
-  <h2 id="rtl-how-to">How to use</h2>
-  <p>Bootstrap is by default a left-to-right project. For right-to-left projects, you'll need to set your language and replace the default Bootstrap CSS with an RTL version. First, set your language and text direction:</p>
-{% highlight html %}
-<!-- Example: Arabic language with direction set to RTL -->
-<html lang="ar" dir="rtl">
-{% endhighlight %}
-  <p>Then, include the right-to-left CSS file <strong>instead of</strong> the default Bootstrap CSS:</p>
-{% highlight html %}
-<!-- Bootstrap RTL -->
-<link rel="stylesheet" href="bootstrap-rtl.css">
-{% endhighlight %}
-  <p>Alternatively, you may use the minified RTL file, <code>bootstrap-rtl.min.css</code>.</p>
-
-  <div class="bs-callout bs-callout-danger">
-    <h4>Do not use in combination with <code>bootstrap.css</code></h4>
-    <p><code>bootstrap-rtl.css</code> must not be used together with <code>bootstrap.css</code>. Use either one or the other, but not both. <code>bootstrap-rtl.css</code> includes all of Bootstrap's styles, including those not affected by writing direction.</p>
-  </div>
-
-  <h2 id="rtl-css-flip">CSS Flip</h2>
-  <p><a href="https://github.com/twitter/css-flip">CSS Flip</a> is a project for converting left-to-right CSS files into right-to-left CSS files. We use it in our Gruntfile to automate the generation of Bootstrap's RTL CSS files.</p>
-</div>
diff --git a/docs/_includes/getting-started/template.html b/docs/_includes/getting-started/template.html
index de0515342..3952621a6 100644
--- a/docs/_includes/getting-started/template.html
+++ b/docs/_includes/getting-started/template.html
@@ -19,7 +19,7 @@
     <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
     <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
     <!--[if lt IE 9]>
-      <script src="https://oss.maxcdn.com/html5shiv/3.7.1/html5shiv.min.js"></script>
+      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
       <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
     <![endif]-->
   </head>
@@ -27,7 +27,7 @@
     <h1>Hello, world!</h1>
 
     <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
-    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
     <!-- Include all compiled plugins (below), or include individual files as needed -->
     <script src="js/bootstrap.min.js"></script>
   </body>
diff --git a/docs/_includes/getting-started/whats-included.html b/docs/_includes/getting-started/whats-included.html
index 278ebac60..8500e573c 100644
--- a/docs/_includes/getting-started/whats-included.html
+++ b/docs/_includes/getting-started/whats-included.html
@@ -17,8 +17,6 @@ bootstrap/
 ├── css/
 │   ├── bootstrap.css
 │   ├── bootstrap.min.css
-│   ├── bootstrap-rtl.css
-│   ├── bootstrap-rtl.min.css
 │   ├── bootstrap-theme.css
 │   └── bootstrap-theme.min.css
 ├── js/
diff --git a/docs/_includes/header.html b/docs/_includes/header.html
index c9e38e25c..a498f56a2 100644
--- a/docs/_includes/header.html
+++ b/docs/_includes/header.html
@@ -29,21 +29,19 @@
 
 <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
 <!--[if lt IE 9]>
-  <script src="https://oss.maxcdn.com/html5shiv/3.7.1/html5shiv.min.js"></script>
+  <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
   <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
 <![endif]-->
 
 <!-- Favicons -->
 <link rel="apple-touch-icon-precomposed" sizes="144x144" href="../assets/ico/apple-touch-icon-144-precomposed.png">
-                               <link rel="icon" href="../assets/ico/favicon.ico">
+<link rel="icon" href="../assets/ico/favicon.ico">
 
 <script>
   (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
   (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
   m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
   })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
-
   ga('create', 'UA-146052-10', 'getbootstrap.com');
   ga('send', 'pageview');
-
 </script>
diff --git a/docs/_includes/js/affix.html b/docs/_includes/js/affix.html
index cfd32ec35..5b6fec0bb 100644
--- a/docs/_includes/js/affix.html
+++ b/docs/_includes/js/affix.html
@@ -62,6 +62,13 @@
          <td>10</td>
          <td>Pixels to offset from screen when calculating position of scroll. If a single number is provided, the offset will be applied in both top and bottom directions. To provide a unique, bottom and top offset just provide an object <code>offset: { top: 10 }</code> or <code>offset: { top: 10, bottom: 5 }</code>. Use a function when you need to dynamically calculate an offset.</td>
        </tr>
+       <tr>
+         <td>target</td>
+         <td>selector | node | jQuery element</td>
+         <td>the <code>window</code> object</td>
+         <td>Specifies the target element of the affix.</td>
+       </tr>
+
       </tbody>
     </table>
   </div><!-- /.table-responsive -->
diff --git a/docs/_includes/js/carousel.html b/docs/_includes/js/carousel.html
index fa7476b68..b8a0d1e4b 100644
--- a/docs/_includes/js/carousel.html
+++ b/docs/_includes/js/carousel.html
@@ -21,10 +21,10 @@
           <img data-src="holder.js/900x500/auto/#555:#333/text:Third slide" alt="Third slide">
         </div>
       </div>
-      <a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
+      <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
         <span class="glyphicon glyphicon-chevron-left"></span>
       </a>
-      <a class="right carousel-control" href="#carousel-example-generic" data-slide="next">
+      <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
         <span class="glyphicon glyphicon-chevron-right"></span>
       </a>
     </div>
@@ -56,10 +56,10 @@
   </div>
 
   <!-- Controls -->
-  <a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
+  <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
     <span class="glyphicon glyphicon-chevron-left"></span>
   </a>
-  <a class="right carousel-control" href="#carousel-example-generic" data-slide="next">
+  <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
     <span class="glyphicon glyphicon-chevron-right"></span>
   </a>
 </div>
@@ -102,10 +102,10 @@
           </div>
         </div>
       </div>
-      <a class="left carousel-control" href="#carousel-example-captions" data-slide="prev">
+      <a class="left carousel-control" href="#carousel-example-captions" role="button" data-slide="prev">
         <span class="glyphicon glyphicon-chevron-left"></span>
       </a>
-      <a class="right carousel-control" href="#carousel-example-captions" data-slide="next">
+      <a class="right carousel-control" href="#carousel-example-captions" role="button" data-slide="next">
         <span class="glyphicon glyphicon-chevron-right"></span>
       </a>
     </div>
diff --git a/docs/_includes/js/popovers.html b/docs/_includes/js/popovers.html
index b2f58fbc4..2ee670741 100644
--- a/docs/_includes/js/popovers.html
+++ b/docs/_includes/js/popovers.html
@@ -152,6 +152,33 @@ $('.popover-dismiss').popover({
           <td>Apply a CSS fade transition to the popover</td>
         </tr>
         <tr>
+          <td>container</td>
+          <td>string | false</td>
+          <td>false</td>
+          <td>
+           <p>Appends the popover to a specific element. Example: <code>container: 'body'</code>. This option is particularly useful in that it allows you to position the popover in the flow of the document near the triggering element - which will prevent the popover from floating away from the triggering element during a window resize.</p>
+          </td>
+        </tr>
+        <tr>
+          <td>content</td>
+          <td>string | function</td>
+          <td>''</td>
+          <td>
+            <p>Default content value if <code>data-content</code> attribute isn't present.</p>
+            <p>If a function is given, it will be called with 1 argument, which is the element that the popover is attached to.</p>
+          </td>
+        </tr>
+        <tr>
+          <td>delay</td>
+          <td>number | object</td>
+          <td>0</td>
+          <td>
+           <p>Delay showing and hiding the popover (ms) - does not apply to manual trigger type</p>
+           <p>If a number is supplied, delay is applied to both hide/show</p>
+           <p>Object structure is: <code>delay: { show: 500, hide: 100 }</code></p>
+          </td>
+        </tr>
+        <tr>
           <td>html</td>
           <td>boolean</td>
           <td>false</td>
@@ -170,21 +197,9 @@ $('.popover-dismiss').popover({
           <td>If a selector is provided, popover objects will be delegated to the specified targets. In practice, this is used to enable dynamic HTML content to have popovers added. See <a href="https://github.com/twbs/bootstrap/issues/4215">this</a> and <a href="http://jsfiddle.net/fScua/">an informative example</a>.</td>
         </tr>
         <tr>
-          <td>trigger</td>
-          <td>string</td>
-          <td>'click'</td>
-          <td>How popover is triggered - click | hover | focus | manual</td>
-        </tr>
-        <tr>
-          <td>title</td>
-          <td>string | function</td>
-          <td>''</td>
-          <td>Default title value if <code>title</code> attribute isn't present</td>
-        </tr>
-        <tr>
           <td>template</td>
           <td>string</td>
-          <td><code>'&lt;div class="popover"&gt;&lt;div class="arrow"&gt;&lt;/div&gt;&lt;h3 class="popover-title"&gt;&lt;/h3&gt;&lt;div class="popover-content"&gt;&lt;/div&gt;&lt;/div&gt;'</code></td>
+          <td><code>'&lt;div class="popover" role="tooltip"&gt;&lt;div class="arrow"&gt;&lt;/div&gt;&lt;h3 class="popover-title"&gt;&lt;/h3&gt;&lt;div class="popover-content"&gt;&lt;/div&gt;&lt;/div&gt;'</code></td>
           <td>
            <p>Base HTML to use when creating the popover.</p>
            <p>The popover's <code>title</code> will be injected into the <code>.popover-title</code>.</p>
@@ -194,32 +209,25 @@ $('.popover-dismiss').popover({
           </td>
         </tr>
         <tr>
-          <td>content</td>
+          <td>title</td>
           <td>string | function</td>
           <td>''</td>
-          <td>
-            <p>Default content value if <code>data-content</code> attribute isn't present.</p>
-            <p>If a function is given, it will be called with 1 argument, which is the element that the popover is attached to.</p>
-          </td>
+          <td>Default title value if <code>title</code> attribute isn't present</td>
         </tr>
         <tr>
-          <td>delay</td>
-          <td>number | object</td>
-          <td>0</td>
-          <td>
-           <p>Delay showing and hiding the popover (ms) - does not apply to manual trigger type</p>
-           <p>If a number is supplied, delay is applied to both hide/show</p>
-           <p>Object structure is: <code>delay: { show: 500, hide: 100 }</code></p>
-          </td>
+          <td>trigger</td>
+          <td>string</td>
+          <td>'click'</td>
+          <td>How popover is triggered - click | hover | focus | manual. You may pass multiple triggers; separate them with a space.</td>
         </tr>
         <tr>
-          <td>container</td>
-          <td>string | false</td>
-          <td>false</td>
-          <td>
-           <p>Appends the popover to a specific element. Example: <code>container: 'body'</code>. This option is particularly useful in that it allows you to position the popover in the flow of the document near the triggering element - which will prevent the popover from floating away from the triggering element during a window resize.</p>
-          </td>
-        </tr>
+         <td>viewport</td>
+         <td>string | object</td>
+         <td>{ selector: 'body', padding: 0 }</td>
+         <td>
+          <p>Keeps the popover within the bounds of this element. Example: <code>viewport: '#viewport'</code> or <code>{ selector: '#viewport', padding: 0 }</code></p>
+         </td>
+       </tr>
       </tbody>
     </table>
   </div><!-- /.table-responsive -->
diff --git a/docs/_includes/js/scrollspy.html b/docs/_includes/js/scrollspy.html
index 9767254e0..2ceedb0ca 100644
--- a/docs/_includes/js/scrollspy.html
+++ b/docs/_includes/js/scrollspy.html
@@ -65,7 +65,7 @@ body {
 <body data-spy="scroll" data-target=".navbar-example">
   ...
   <div class="navbar-example">
-    <ul class="nav nav-tabs">
+    <ul class="nav nav-tabs" role="tablist">
       ...
     </ul>
   </div>
diff --git a/docs/_includes/js/tabs.html b/docs/_includes/js/tabs.html
index c6c3e0df6..38518f0b1 100644
--- a/docs/_includes/js/tabs.html
+++ b/docs/_includes/js/tabs.html
@@ -4,14 +4,14 @@
   <h2 id="tabs-examples">Example tabs</h2>
   <p>Add quick, dynamic tab functionality to transition through panes of local content, even via dropdown menus.</p>
   <div class="bs-example bs-example-tabs">
-    <ul id="myTab" class="nav nav-tabs">
-      <li class="active"><a href="#home" data-toggle="tab">Home</a></li>
-      <li><a href="#profile" data-toggle="tab">Profile</a></li>
+    <ul id="myTab" class="nav nav-tabs" role="tablist">
+      <li class="active"><a href="#home" role="tab" data-toggle="tab">Home</a></li>
+      <li><a href="#profile" role="tab" data-toggle="tab">Profile</a></li>
       <li class="dropdown">
         <a href="#" id="myTabDrop1" class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></a>
         <ul class="dropdown-menu" role="menu" aria-labelledby="myTabDrop1">
-          <li><a href="#dropdown1" tabindex="-1" data-toggle="tab">@fat</a></li>
-          <li><a href="#dropdown2" tabindex="-1" data-toggle="tab">@mdo</a></li>
+          <li><a href="#dropdown1" tabindex="-1" role="tab" data-toggle="tab">@fat</a></li>
+          <li><a href="#dropdown2" tabindex="-1" role="tab" data-toggle="tab">@mdo</a></li>
         </ul>
       </li>
     </ul>
@@ -60,11 +60,11 @@ $('#myTab li:eq(2) a').tab('show') // Select third tab (0-indexed)
   <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">
-  <li class="active"><a href="#home" data-toggle="tab">Home</a></li>
-  <li><a href="#profile" data-toggle="tab">Profile</a></li>
-  <li><a href="#messages" data-toggle="tab">Messages</a></li>
-  <li><a href="#settings" data-toggle="tab">Settings</a></li>
+<ul class="nav nav-tabs" role="tablist">
+  <li class="active"><a href="#home" role="tab" data-toggle="tab">Home</a></li>
+  <li><a href="#profile" role="tab" data-toggle="tab">Profile</a></li>
+  <li><a href="#messages" role="tab" data-toggle="tab">Messages</a></li>
+  <li><a href="#settings" role="tab" data-toggle="tab">Settings</a></li>
 </ul>
 
 <!-- Tab panes -->
@@ -93,11 +93,11 @@ $('#myTab li:eq(2) a').tab('show') // Select third tab (0-indexed)
     Activates a tab element and content container. Tab should have either a <code>data-target</code> or an <code>href</code> targeting a container node in the DOM.
   </p>
 {% highlight html %}
-<ul class="nav nav-tabs" id="myTab">
-  <li class="active"><a href="#home" data-toggle="tab">Home</a></li>
-  <li><a href="#profile" data-toggle="tab">Profile</a></li>
-  <li><a href="#messages" data-toggle="tab">Messages</a></li>
-  <li><a href="#settings" data-toggle="tab">Settings</a></li>
+<ul class="nav nav-tabs" role="tablist" id="myTab">
+  <li class="active"><a href="#home" role="tab" data-toggle="tab">Home</a></li>
+  <li><a href="#profile" role="tab" data-toggle="tab">Profile</a></li>
+  <li><a href="#messages" role="tab" data-toggle="tab">Messages</a></li>
+  <li><a href="#settings" role="tab" data-toggle="tab">Settings</a></li>
 </ul>
 
 <div class="tab-content">
diff --git a/docs/_includes/js/tooltips.html b/docs/_includes/js/tooltips.html
index 64ea06e85..e967878f8 100644
--- a/docs/_includes/js/tooltips.html
+++ b/docs/_includes/js/tooltips.html
@@ -91,6 +91,24 @@ $('#example').tooltip(options)
          <td>Apply a CSS fade transition to the tooltip</td>
        </tr>
        <tr>
+         <td>container</td>
+         <td>string | false</td>
+         <td>false</td>
+         <td>
+          <p>Appends the tooltip to a specific element. Example: <code>container: 'body'</code>. This option is particularly useful in that it allows you to position the tooltip in the flow of the document near the triggering element - which will prevent the tooltip from floating away from the triggering element during a window resize.</p>
+         </td>
+       </tr>
+       <tr>
+         <td>delay</td>
+         <td>number | object</td>
+         <td>0</td>
+         <td>
+          <p>Delay showing and hiding the tooltip (ms) - does not apply to manual trigger type</p>
+          <p>If a number is supplied, delay is applied to both hide/show</p>
+          <p>Object structure is: <code>delay: { show: 500, hide: 100 }</code></p>
+         </td>
+       </tr>
+       <tr>
          <td>html</td>
          <td>boolean</td>
          <td>false</td>
@@ -106,7 +124,7 @@ $('#example').tooltip(options)
          <td>selector</td>
          <td>string</td>
          <td>false</td>
-         <td>If a selector is provided, tooltip objects will be delegated to the specified targets.</td>
+         <td>If a selector is provided, tooltip objects will be delegated to the specified targets. In practice, this is used to enable dynamic HTML content to have tooltips added. See <a href="https://github.com/twbs/bootstrap/issues/4215">this</a> and <a href="http://jsfiddle.net/fScua/">an informative example</a>.</td>
        </tr>
        <tr>
          <td>template</td>
@@ -132,24 +150,6 @@ $('#example').tooltip(options)
          <td>How tooltip is triggered - click | hover | focus | manual. You may pass multiple triggers; separate them with a space.</td>
        </tr>
        <tr>
-         <td>delay</td>
-         <td>number | object</td>
-         <td>0</td>
-         <td>
-          <p>Delay showing and hiding the tooltip (ms) - does not apply to manual trigger type</p>
-          <p>If a number is supplied, delay is applied to both hide/show</p>
-          <p>Object structure is: <code>delay: { show: 500, hide: 100 }</code></p>
-         </td>
-       </tr>
-       <tr>
-         <td>container</td>
-         <td>string | false</td>
-         <td>false</td>
-         <td>
-          <p>Appends the tooltip to a specific element. Example: <code>container: 'body'</code></p>
-         </td>
-       </tr>
-       <tr>
          <td>viewport</td>
          <td>string | object</td>
          <td>{ selector: 'body', padding: 0 }</td>
diff --git a/docs/_includes/nav/css.html b/docs/_includes/nav/css.html
index f2b1b5420..5a8d86368 100644
--- a/docs/_includes/nav/css.html
+++ b/docs/_includes/nav/css.html
@@ -133,10 +133,3 @@
     <li><a href="#sass-installation">Rails install</a></li>
   </ul>
 </li>
-<li>
-  <a href="#rtl">RTL version</a>
-  <ul class="nav">
-    <li><a href="#rtl-how-to">How to use</a></li>
-    <li><a href="#rtl-css-flip">CSS Flip</a></li>
-  </ul>
-</li>
diff --git a/docs/_includes/nav/getting-started.html b/docs/_includes/nav/getting-started.html
index 494a2950f..fae906920 100644
--- a/docs/_includes/nav/getting-started.html
+++ b/docs/_includes/nav/getting-started.html
@@ -9,6 +9,14 @@
   </ul>
 </li>
 <li>
+  <a href="#grunt">Compiling CSS and JavaScript</a>
+  <ul class="nav">
+    <li><a href="#grunt-installing">Installing Grunt</a></li>
+    <li><a href="#grunt-commands">Available Grunt commands</a></li>
+    <li><a href="#grunt-troubleshooting">Troubleshooting</a></li>
+  </ul>
+</li>
+<li>
   <a href="#template">Basic template</a>
 </li>
 <li>
@@ -21,13 +29,6 @@
   </ul>
 </li>
 <li>
-  <a href="#rtl">RTL version</a>
-  <ul class="nav">
-    <li><a href="#rtl-how-to">How to use</a></li>
-    <li><a href="#rtl-css-flip">CSS Flip</a></li>
-  </ul>
-</li>
-<li>
   <a href="#community">Community</a>
 </li>
 <li>