Merge branch 'master' into v4

Conflicts:
	Gruntfile.js
	_config.yml
	dist/css/bootstrap-theme.css
	dist/css/bootstrap-theme.min.css
	dist/css/bootstrap.css
	dist/css/bootstrap.css.map
	dist/css/bootstrap.min.css
	dist/fonts/glyphicons-halflings-regular.eot
	dist/fonts/glyphicons-halflings-regular.svg
	dist/fonts/glyphicons-halflings-regular.ttf
	dist/fonts/glyphicons-halflings-regular.woff
	docs/_data/glyphicons.yml
	docs/_includes/components/alerts.html
	docs/_includes/components/badges.html
	docs/_includes/components/button-dropdowns.html
	docs/_includes/components/button-groups.html
	docs/_includes/components/dropdowns.html
	docs/_includes/components/glyphicons.html
	docs/_includes/components/input-groups.html
	docs/_includes/components/labels.html
	docs/_includes/components/media.html
	docs/_includes/components/navbar.html
	docs/_includes/components/navs.html
	docs/_includes/components/pagination.html
	docs/_includes/components/panels.html
	docs/_includes/components/progress-bars.html
	docs/_includes/css/buttons.html
	docs/_includes/css/forms.html
	docs/_includes/css/grid.html
	docs/_includes/css/helpers.html
	docs/_includes/css/images.html
	docs/_includes/css/less.html
	docs/_includes/css/responsive-utilities.html
	docs/_includes/css/sass.html
	docs/_includes/css/tables.html
	docs/_includes/css/type.html
	docs/_includes/getting-started/accessibility.html
	docs/_includes/getting-started/browser-device-support.html
	docs/_includes/getting-started/community.html
	docs/_includes/getting-started/download.html
	docs/_includes/getting-started/examples.html
	docs/_includes/getting-started/whats-included.html
	docs/_includes/js/affix.html
	docs/_includes/js/alerts.html
	docs/_includes/js/buttons.html
	docs/_includes/js/carousel.html
	docs/_includes/js/collapse.html
	docs/_includes/js/dropdowns.html
	docs/_includes/js/modal.html
	docs/_includes/js/overview.html
	docs/_includes/js/tabs.html
	docs/_includes/nav/components.html
	docs/_includes/nav/css.html
	docs/_includes/nav/javascript.html
	docs/_includes/nav/main.html
	docs/about.html
	docs/assets/css/docs.min.css
	docs/assets/js/customize.min.js
	docs/assets/js/raw-files.min.js
	docs/dist/css/bootstrap-theme.css
	docs/dist/css/bootstrap-theme.min.css
	docs/dist/css/bootstrap.css
	docs/dist/css/bootstrap.css.map
	docs/dist/css/bootstrap.min.css
	docs/dist/fonts/glyphicons-halflings-regular.eot
	docs/dist/fonts/glyphicons-halflings-regular.svg
	docs/dist/fonts/glyphicons-halflings-regular.ttf
	docs/dist/fonts/glyphicons-halflings-regular.woff
	docs/examples/carousel/index.html
	docs/examples/navbar-fixed-top/index.html
	docs/examples/navbar-static-top/index.html
	docs/examples/navbar/index.html
	docs/examples/non-responsive/index.html
	docs/examples/non-responsive/non-responsive.css
	docs/examples/sticky-footer-navbar/index.html
	docs/examples/theme/index.html
	fonts/glyphicons-halflings-regular.eot
	fonts/glyphicons-halflings-regular.svg
	fonts/glyphicons-halflings-regular.ttf
	fonts/glyphicons-halflings-regular.woff
	less/_carousel.less
	less/_forms.less
	less/glyphicons.less

7 files changed, 75 insertions, 21 deletions

diff --git a/docs/javascript/alerts.md b/docs/javascript/alerts.md
index 4ab4abb80..bbe2eeab4 100644
--- a/docs/javascript/alerts.md
+++ b/docs/javascript/alerts.md
@@ -17,6 +17,8 @@ Add dismiss functionality to all alert messages with this plugin.
 </div>
 {% endexample %}
 
+When using a `.close` button, it must be the first child of the `.alert-dismissible` and no text content may come before it in the markup.
+
 {% example html %}
 <div class="alert alert-danger alert-dismissible fade in" role="alert">
   <button type="button" class="close" data-dismiss="alert"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
diff --git a/docs/javascript/carousel.md b/docs/javascript/carousel.md
index 2b4386eba..ee96f5924 100644
--- a/docs/javascript/carousel.md
+++ b/docs/javascript/carousel.md
@@ -26,11 +26,11 @@ A slideshow component for cycling through elements—images or slides of text—
     </div>
   </div>
   <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
-    <span class="glyphicon glyphicon-chevron-left"></span>
+    <span class="icon-prev" aria-hidden="true"></span>
     <span class="sr-only">Previous</span>
   </a>
   <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
-    <span class="glyphicon glyphicon-chevron-right"></span>
+    <span class="icon-next" aria-hidden="true"></span>
     <span class="sr-only">Next</span>
   </a>
 </div>
@@ -41,6 +41,11 @@ A slideshow component for cycling through elements—images or slides of text—
   <p>Bootstrap exclusively uses CSS3 for its animations, but Internet Explorer 8 &amp; 9 don't support the necessary CSS properties. Thus, there are no slide transition animations when using these browsers. We have intentionally decided not to include jQuery-based fallbacks for the transitions.</p>
 </div>
 
+<div class="bs-callout bs-callout-warning" id="callout-carousel-active">
+  <h4>Initial active element required</h4>
+  <p>The <code>.active</code> class needs to be added to one of the slides. Otherwise, the carousel will not be visible.</p>
+</div>
+
 ### Optional captions
 
 Add captions to your slides easily with the `.carousel-caption` element within any `.item`. Place just about any optional HTML within there and it will be automatically aligned and formatted.
@@ -76,11 +81,11 @@ Add captions to your slides easily with the `.carousel-caption` element within a
       </div>
     </div>
     <a class="left carousel-control" href="#carousel-example-captions" role="button" data-slide="prev">
-      <span class="glyphicon glyphicon-chevron-left"></span>
+      <span class="icon-prev" aria-hidden="true"></span>
       <span class="sr-only">Previous</span>
     </a>
     <a class="right carousel-control" href="#carousel-example-captions" role="button" data-slide="next">
-      <span class="glyphicon glyphicon-chevron-right"></span>
+      <span class="icon-next" aria-hidden="true"></span>
       <span class="sr-only">Next</span>
     </a>
   </div>
diff --git a/docs/javascript/collapse.md b/docs/javascript/collapse.md
index cf764b017..3a25b6b94 100644
--- a/docs/javascript/collapse.md
+++ b/docs/javascript/collapse.md
@@ -3,16 +3,42 @@ layout: page
 title: Collapse
 ---
 
-Get base styles and flexible support for collapsible components like accordions and navigation.
+Flexible plugin that utilizes a handful of classes for easy toggle behavior.
 
 <div class="bs-callout bs-callout-danger">
   <h4>Plugin dependency</h4>
   <p>Collapse requires the <a href="#transitions">transitions plugin</a> to be included in your version of Bootstrap.</p>
 </div>
 
-## Example accordion
+## Example
 
-Using the collapse plugin, we built a simple accordion by extending the panel component.
+Click the buttons below to show and hide another element via class changes:
+
+- `.collapse` hides content
+- `.collapsing` is applied during transitions
+- `.collapse.in` shows content
+
+You can use a link with the `href` attribute, or a button with the `data-target` attribute. In both cases, the `data-toggle="collapse"` is required.
+
+{% example html %}
+  <p>
+    <a class="btn btn-primary" data-toggle="collapse" href="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
+      Link with href
+    </a>
+    <button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
+      Button with data-target
+    </button>
+  </p>
+  <div class="collapse" id="collapseExample">
+    <div class="well">
+      Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
+    </div>
+  </div>
+{% endexample %}
+
+## Accoridion example
+
+Extend the default collapse behavior to create an accordion with the panel component.
 
 {% example html %}
 <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
diff --git a/docs/javascript/dropdowns.md b/docs/javascript/dropdowns.md
index 3e389e2c9..b1bda334a 100644
--- a/docs/javascript/dropdowns.md
+++ b/docs/javascript/dropdowns.md
@@ -8,7 +8,7 @@ Add dropdown menus to nearly anything with this simple plugin, including the nav
 ### Within navbars
 
 <div class="bs-example">
-  <nav id="navbar-example" class="navbar navbar-default navbar-static" role="navigation">
+  <nav id="navbar-example" class="navbar navbar-default navbar-static">
     <div class="container-fluid">
       <div class="navbar-header">
         <button class="navbar-toggle collapsed" type="button" data-toggle="collapse" data-target=".bs-example-js-navbar-collapse">
@@ -173,7 +173,7 @@ Toggles the dropdown menu of a given navbar or tabbed navigation.
 
 ### Events
 
-All dropdown events are fired at the `.dropdown-menu`'s parent element.
+All dropdown events are fired at the `.dropdown-menu`'s parent element and have a `relatedTarget` property, whose value is the toggling anchor element.
 
 <div class="table-responsive">
   <table class="table table-bordered table-striped">
@@ -186,19 +186,19 @@ All dropdown events are fired at the `.dropdown-menu`'s parent element.
     <tbody>
       <tr>
         <td>show.bs.dropdown</td>
-        <td>This event fires immediately when the show instance method is called. The toggling anchor element is available as the <code>relatedTarget</code> property of the event.</td>
+        <td>This event fires immediately when the show instance method is called.</td>
       </tr>
       <tr>
         <td>shown.bs.dropdown</td>
-        <td>This event is fired when the dropdown has been made visible to the user (will wait for CSS transitions, to complete).  The toggling anchor element is available as the <code>relatedTarget</code> property of the event.</td>
+        <td>This event is fired when the dropdown has been made visible to the user (will wait for CSS transitions, to complete).</td>
       </tr>
       <tr>
         <td>hide.bs.dropdown</td>
-        <td>This event is fired immediately when the hide instance method has been called. The toggling anchor element is available as the <code>relatedTarget</code> property of the event.</td>
+        <td>This event is fired immediately when the hide instance method has been called.</td>
       </tr>
       <tr>
         <td>hidden.bs.dropdown</td>
-        <td>This event is fired when the dropdown has finished being hidden from the user (will wait for CSS transitions, to complete). The toggling anchor element is available as the <code>relatedTarget</code> property of the event.</td>
+        <td>This event is fired when the dropdown has finished being hidden from the user (will wait for CSS transitions, to complete).</td>
       </tr>
     </tbody>
   </table>
diff --git a/docs/javascript/modal.md b/docs/javascript/modal.md
index 1d018c80c..6cc34fdab 100644
--- a/docs/javascript/modal.md
+++ b/docs/javascript/modal.md
@@ -5,7 +5,13 @@ title: Modal
 
 Modals are streamlined, but flexible, dialog prompts with the minimum required functionality and smart defaults.
 
-**Due to how HTML5 defines its semantics, the `autofocus` HTML attribute has no effect in Bootstrap modals.**
+**Due to how HTML5 defines its semantics, the `autofocus` HTML attribute has no effect in Bootstrap modals.** To achieve the same effect, use some custom JavaScript:
+
+{% highlight js %}
+$('#myModal').on('shown.bs.modal', function () {
+  $('#myInput').focus()
+})
+{% endhighlight %}
 
 <div class="bs-callout bs-callout-warning" id="callout-stacked-modals">
   <h4>Overlapping modals not supported</h4>
@@ -241,7 +247,7 @@ Have a bunch of buttons that all trigger the same modal, just with slightly diff
           <h4 class="modal-title" id="exampleModalLabel">New message</h4>
         </div>
         <div class="modal-body">
-          <form role="form">
+          <form>
             <div class="form-group">
               <label for="recipient-name" class="control-label">Recipient:</label>
               <input type="text" class="form-control" id="recipient-name">
@@ -274,7 +280,7 @@ Have a bunch of buttons that all trigger the same modal, just with slightly diff
         <h4 class="modal-title" id="exampleModalLabel">New message</h4>
       </div>
       <div class="modal-body">
-        <form role="form">
+        <form>
           <div class="form-group">
             <label for="recipient-name" class="control-label">Recipient:</label>
             <input type="text" class="form-control" id="recipient-name">
diff --git a/docs/javascript/overview.md b/docs/javascript/overview.md
index e7a137ddd..8d22d4020 100644
--- a/docs/javascript/overview.md
+++ b/docs/javascript/overview.md
@@ -38,6 +38,11 @@ Alternatively, to target a specific plugin, just include the plugin's name as a
 $(document).off('.alert.data-api')
 {% endhighlight %}
 
+<div class="bs-callout bs-callout-danger">
+  <h4>Only one plugin per element via data attributes</h4>
+  <p>Don't use data attributes from multiple plugins on the same element. For example, a button cannot both have a tooltip and toggle a modal. To accomplish this, use a wrapping element.</p>
+</div>
+
 ### Programmatic API
 
 We also believe you should be able to use all Bootstrap plugins purely through the JavaScript API. All public APIs are single, chainable methods, and return the collection acted upon.
diff --git a/docs/javascript/tabs.md b/docs/javascript/tabs.md
index 476346d95..c5c2a012e 100644
--- a/docs/javascript/tabs.md
+++ b/docs/javascript/tabs.md
@@ -8,7 +8,7 @@ title: Tabs
 Add quick, dynamic tab functionality to transition through panes of local content, even via dropdown menus.
 
 <div class="bs-example bs-example-tabs">
-  <ul id="myTab" class="nav nav-tabs" role="tablist">
+  <ul id="myTab" class="nav nav-tabs" role="tabpanel">
     <li role="presentation" class="active">
       <a href="#home" id="home-tab" role="tab" data-toggle="tab" aria-controls="home" aria-expanded="true">Home</a>
     </li>
@@ -71,6 +71,7 @@ $('#myTab li:eq(2) a').tab('show') // Select third tab (0-indexed)
 
 You can activate a tab or pill navigation without writing any JavaScript by simply specifying `data-toggle="tab"` or `data-toggle="pill"` on an element. Adding the `.nav` and `.nav-tabs` classes to the tab `<ul>` will apply the Bootstrap <a href="../components/#nav-tabs">tab styling</a>, while adding the `.nav` and `.nav-pills` classes will apply <a href="../components/#nav-pills">pill styling</a>.
 
+<div role="tabpanel">
 {% highlight html %}
 <!-- Nav tabs -->
 <ul class="nav nav-tabs" role="tablist">
@@ -88,6 +89,7 @@ You can activate a tab or pill navigation without writing any JavaScript by simp
   <div role="tabpanel" class="tab-pane" id="settings">...</div>
 </div>
 {% endhighlight %}
+</div>
 
 ### Fade effect
 
@@ -110,10 +112,18 @@ Activates a tab element and content container. Tab should have either a `data-ta
 
 {% highlight html %}
 <ul class="nav nav-tabs" role="tablist" id="myTab">
-  <li role="presentation" class="active"><a href="#home" role="tab" data-toggle="tab">Home</a></li>
-  <li role="presentation"><a href="#profile" role="tab" data-toggle="tab">Profile</a></li>
-  <li role="presentation"><a href="#messages" role="tab" data-toggle="tab">Messages</a></li>
-  <li role="presentation"><a href="#settings" role="tab" data-toggle="tab">Settings</a></li>
+  <li role="presentation" class="active">
+    <a href="#home" role="tab" data-toggle="tab" aria-controls="home">Home</a>
+  </li>
+  <li role="presentation">
+    <a href="#profile" role="tab" data-toggle="tab" aria-controls="profile">Profile</a>
+  </li>
+  <li role="presentation">
+    <a href="#messages" role="tab" data-toggle="tab" aria-controls="messages">Messages</a>
+  </li>
+  <li role="presentation">
+    <a href="#settings" role="tab" data-toggle="tab" aria-controls="settings">Settings</a>
+  </li>
 </ul>
 
 <div class="tab-content">