Merge branch 'master' into fix-13386

Conflicts:
	js/carousel.js

14 files changed, 89 insertions, 50 deletions

diff --git a/docs/_includes/components/alerts.html b/docs/_includes/components/alerts.html
index f0895b0ed..749ecc2b4 100644
--- a/docs/_includes/components/alerts.html
+++ b/docs/_includes/components/alerts.html
@@ -32,16 +32,16 @@
 <div class="alert alert-danger" role="alert">...</div>
 {% endhighlight %}
 
-  <h2 id="alerts-dismissable">Dismissable alerts</h2>
-  <p>Build on any alert by adding an optional <code>.alert-dismissable</code> and close button.</p>
+  <h2 id="alerts-dismissible">Dismissible alerts</h2>
+  <p>Build on any alert by adding an optional <code>.alert-dismissible</code> and close button.</p>
   <div class="bs-example">
-    <div class="alert alert-warning alert-dismissable" role="alert">
+    <div class="alert alert-warning alert-dismissible" role="alert">
       <button type="button" class="close" data-dismiss="alert"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
       <strong>Warning!</strong> Better check yourself, you're not looking too good.
     </div>
   </div>
 {% highlight html %}
-<div class="alert alert-warning alert-dismissable" role="alert">
+<div class="alert alert-warning alert-dismissible" role="alert">
   <button type="button" class="close" data-dismiss="alert"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
   <strong>Warning!</strong> Better check yourself, you're not looking too good.
 </div>
diff --git a/docs/_includes/components/panels.html b/docs/_includes/components/panels.html
index b00cd0f72..acf32c51c 100644
--- a/docs/_includes/components/panels.html
+++ b/docs/_includes/components/panels.html
@@ -22,6 +22,7 @@
 
   <h3 id="panels-heading">Panel with heading</h3>
   <p>Easily add a heading container to your panel with <code>.panel-heading</code>. You may also include any <code>&lt;h1&gt;</code>-<code>&lt;h6&gt;</code> with a <code>.panel-title</code> class to add a pre-styled heading.</p>
+  <p>For proper link coloring, be sure to place links in headings within <code>.panel-title</code>.</p>
   <div class="bs-example">
     <div class="panel panel-default">
       <div class="panel-heading">Panel heading without title</div>
diff --git a/docs/_includes/components/progress-bars.html b/docs/_includes/components/progress-bars.html
index a78e2c881..d57c3fa7d 100644
--- a/docs/_includes/components/progress-bars.html
+++ b/docs/_includes/components/progress-bars.html
@@ -120,60 +120,60 @@
   <h3 id="progress-striped">Striped</h3>
   <p>Uses a gradient to create a striped effect. Not available in IE8.</p>
   <div class="bs-example">
-    <div class="progress progress-striped" >
-      <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
+    <div class="progress">
+      <div class="progress-bar progress-bar-success progress-bar-striped" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
         <span class="sr-only">40% Complete (success)</span>
       </div>
     </div>
-    <div class="progress progress-striped">
-      <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%">
+    <div class="progress">
+      <div class="progress-bar progress-bar-info progress-bar-striped" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%">
         <span class="sr-only">20% Complete</span>
       </div>
     </div>
-    <div class="progress progress-striped">
-      <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%">
+    <div class="progress">
+      <div class="progress-bar progress-bar-warning progress-bar-striped" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%">
         <span class="sr-only">60% Complete (warning)</span>
       </div>
     </div>
-    <div class="progress progress-striped">
-      <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%">
+    <div class="progress">
+      <div class="progress-bar progress-bar-danger progress-bar-striped" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%">
         <span class="sr-only">80% Complete (danger)</span>
       </div>
     </div>
   </div>
 {% highlight html %}
-<div class="progress progress-striped">
-  <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
+<div class="progress">
+  <div class="progress-bar progress-bar-success progress-bar-striped" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
     <span class="sr-only">40% Complete (success)</span>
   </div>
 </div>
-<div class="progress progress-striped">
-  <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%">
+<div class="progress">
+  <div class="progress-bar progress-bar-info progress-bar-striped" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%">
     <span class="sr-only">20% Complete</span>
   </div>
 </div>
-<div class="progress progress-striped">
-  <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%">
+<div class="progress">
+  <div class="progress-bar progress-bar-warning progress-bar-striped" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%">
     <span class="sr-only">60% Complete (warning)</span>
   </div>
 </div>
-<div class="progress progress-striped">
-  <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%">
+<div class="progress">
+  <div class="progress-bar progress-bar-danger progress-bar-striped" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%">
     <span class="sr-only">80% Complete (danger)</span>
   </div>
 </div>
 {% endhighlight %}
 
   <h3 id="progress-animated">Animated</h3>
-  <p>Add <code>.active</code> to <code>.progress-striped</code> to animate the stripes right to left. Not available in IE9 and below.</p>
+  <p>Add <code>.active</code> to <code>.progress-bar-striped</code> to animate the stripes right to left. Not available in IE9 and below.</p>
   <div class="bs-example">
-    <div class="progress progress-striped active">
-      <div class="progress-bar" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width: 45%"><span class="sr-only">45% Complete</span></div>
+    <div class="progress">
+      <div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width: 45%"><span class="sr-only">45% Complete</span></div>
     </div>
   </div>
 {% highlight html %}
-<div class="progress progress-striped active">
-  <div class="progress-bar"  role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width: 45%">
+<div class="progress">
+  <div class="progress-bar progress-bar-striped active"  role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width: 45%">
     <span class="sr-only">45% Complete</span>
   </div>
 </div>
@@ -186,7 +186,7 @@
       <div class="progress-bar progress-bar-success" style="width: 35%">
         <span class="sr-only">35% Complete (success)</span>
       </div>
-      <div class="progress-bar progress-bar-warning" style="width: 20%">
+      <div class="progress-bar progress-bar-warning progress-bar-striped" style="width: 20%">
         <span class="sr-only">20% Complete (warning)</span>
       </div>
       <div class="progress-bar progress-bar-danger" style="width: 10%">
@@ -199,7 +199,7 @@
   <div class="progress-bar progress-bar-success" style="width: 35%">
     <span class="sr-only">35% Complete (success)</span>
   </div>
-  <div class="progress-bar progress-bar-warning" style="width: 20%">
+  <div class="progress-bar progress-bar-warning progress-bar-striped" style="width: 20%">
     <span class="sr-only">20% Complete (warning)</span>
   </div>
   <div class="progress-bar progress-bar-danger" style="width: 10%">
diff --git a/docs/_includes/css/buttons.html b/docs/_includes/css/buttons.html
index 15b0f5ed2..bfc5ded80 100644
--- a/docs/_includes/css/buttons.html
+++ b/docs/_includes/css/buttons.html
@@ -88,7 +88,7 @@
 
 
   <h2 id="buttons-active">Active state</h2>
-  <p>Buttons will appear pressed (with a darker background, darker border, and inset shadow) when active. For <code>&lt;button&gt;</code> elements, this is done via <code>:active</code>. For <code>&lt;a&gt;</code> elements, it's done with <code>.active</code>. However, you may use <code>.active</code> on <code>&lt;button&gt;</code>s should you need to replicate the active state progammatically.</p>
+  <p>Buttons will appear pressed (with a darker background, darker border, and inset shadow) when active. For <code>&lt;button&gt;</code> elements, this is done via <code>:active</code>. For <code>&lt;a&gt;</code> elements, it's done with <code>.active</code>. However, you may use <code>.active</code> on <code>&lt;button&gt;</code>s should you need to replicate the active state programmatically.</p>
 
   <h3>Button element</h3>
   <p>No need to add <code>:active</code> as it's a pseudo-class, but if you need to force the same appearance, go ahead and add <code>.active</code>.</p>
diff --git a/docs/_includes/css/forms.html b/docs/_includes/css/forms.html
index 95bb29c59..2a1848e50 100644
--- a/docs/_includes/css/forms.html
+++ b/docs/_includes/css/forms.html
@@ -670,6 +670,42 @@
 <select class="form-control input-sm">...</select>
 {% endhighlight %}
 
+  <h3>Horizontal form group sizes</h3>
+  <p>Quickly size labels and form controls within <code>.form-horizontal</code> by adding <code>.form-group-lg</code> or <code>.form-group-sm</code>.</p>
+  <div class="bs-example">
+    <form class="form-horizontal" role="form">
+      <div class="form-group form-group-lg">
+        <label class="col-sm-2 control-label" for="formGroupInputLarge">Large label</label>
+        <div class="col-sm-10">
+          <input class="form-control" type="text" id="formGroupInputLarge" placeholder="Large input">
+        </div>
+      </div>
+      <div class="form-group form-group-sm">
+        <label class="col-sm-2 control-label" for="formGroupInputSmall">Small label</label>
+        <div class="col-sm-10">
+          <input class="form-control" type="text" id="formGroupInputSmall" placeholder="Small input">
+        </div>
+      </div>
+    </form>
+  </div><!-- /.bs-example -->
+{% highlight html %}
+<form class="form-horizontal" role="form">
+  <div class="form-group form-group-lg">
+    <label class="col-sm-2 control-label" for="formGroupInputLarge">Large label</label>
+    <div class="col-sm-10">
+      <input class="form-control" type="text" id="formGroupInputLarge" placeholder="Large input">
+    </div>
+  </div>
+  <div class="form-group form-group-sm">
+    <label class="col-sm-2 control-label" for="formGroupInputSmall">Small label</label>
+    <div class="col-sm-10">
+      <input class="form-control" type="text" id="formGroupInputSmall" placeholder="Small input">
+    </div>
+  </div>
+</form>
+{% endhighlight %}
+
+
   <h3>Column sizing</h3>
   <p>Wrap inputs in grid columns, or any custom parent element, to easily enforce desired widths.</p>
   <div class="bs-example">
diff --git a/docs/_includes/css/grid.html b/docs/_includes/css/grid.html
index 8ff53dd71..429ef90f9 100644
--- a/docs/_includes/css/grid.html
+++ b/docs/_includes/css/grid.html
@@ -347,16 +347,16 @@
 
 
   <h3 id="grid-nesting">Nesting columns</h3>
-  <p>To nest your content with the default grid, add a new <code>.row</code> and set of <code>.col-md-*</code> columns within an existing <code>.col-md-*</code> column. Nested rows should include a set of columns that add up to 12 or less (it is not required that you use all 12 available columns).</p>
+  <p>To nest your content with the default grid, add a new <code>.row</code> and set of <code>.col-sm-*</code> columns within an existing <code>.col-sm-*</code> column. Nested rows should include a set of columns that add up to 12 or less (it is not required that you use all 12 available columns).</p>
   <div class="row show-grid">
     <div class="col-sm-9">
-      Level 1: .col-md-9
+      Level 1: .col-sm-9
       <div class="row show-grid">
         <div class="col-xs-8 col-sm-6">
-          Level 2: .col-xs-8 .col-md-6
+          Level 2: .col-xs-8 .col-sm-6
         </div>
         <div class="col-xs-4 col-sm-6">
-          Level 2: .col-xs-4 .col-md-6
+          Level 2: .col-xs-4 .col-sm-6
         </div>
       </div>
     </div>
@@ -364,13 +364,13 @@
 {% highlight html %}
 <div class="row">
   <div class="col-sm-9">
-    Level 1: .col-md-9
+    Level 1: .col-sm-9
     <div class="row">
       <div class="col-xs-8 col-sm-6">
-        Level 2: .col-xs-8 .col-md-6
+        Level 2: .col-xs-8 .col-sm-6
       </div>
       <div class="col-xs-4 col-sm-6">
-        Level 2: .col-xs-4 .col-md-6
+        Level 2: .col-xs-4 .col-sm-6
       </div>
     </div>
   </div>
diff --git a/docs/_includes/css/less.html b/docs/_includes/css/less.html
index eadbda775..a6fbbaa11 100644
--- a/docs/_includes/css/less.html
+++ b/docs/_includes/css/less.html
@@ -28,7 +28,7 @@
 @gray-darker:  lighten(#000, 13.5%); // #222
 @gray-dark:    lighten(#000, 20%);   // #333
 @gray:         lighten(#000, 33.5%); // #555
-@gray-light:   lighten(#000, 60%);   // #999
+@gray-light:   lighten(#000, 46.7%); // #777
 @gray-lighter: lighten(#000, 93.5%); // #eee
 {% endhighlight %}
 
diff --git a/docs/_includes/customizer-variables.html b/docs/_includes/customizer-variables.html
index 11f6e0385..e318dd44d 100644
--- a/docs/_includes/customizer-variables.html
+++ b/docs/_includes/customizer-variables.html
@@ -17,7 +17,7 @@
   </div>
   <div class="bs-customizer-input">
     <label for="input-@gray-light">@gray-light</label>
-    <input id="input-@gray-light" type="text" value="lighten(#000, 60%)" data-var="@gray-light" class="form-control"/>
+    <input id="input-@gray-light" type="text" value="lighten(#000, 46.7%)" data-var="@gray-light" class="form-control"/>
   </div>
   <div class="bs-customizer-input">
     <label for="input-@gray-lighter">@gray-lighter</label>
@@ -1735,6 +1735,11 @@
     <input id="input-@page-header-border-color" type="text" value="@gray-lighter" data-var="@page-header-border-color" class="form-control"/>
     <p class="help-block">Page header border color</p>
   </div>
+  <div class="bs-customizer-input">
+    <label for="input-@dl-horizontal-offset">@dl-horizontal-offset</label>
+    <input id="input-@dl-horizontal-offset" type="text" value="@component-offset-horizontal" data-var="@dl-horizontal-offset" class="form-control"/>
+    <p class="help-block">Width of horizontal description list titles</p>
+  </div>
 </div>
 <h2 id="miscellaneous">Miscellaneous</h2>
 <p></p>
diff --git a/docs/_includes/getting-started/browser-device-support.html b/docs/_includes/getting-started/browser-device-support.html
index 1a1236440..4140a9c22 100644
--- a/docs/_includes/getting-started/browser-device-support.html
+++ b/docs/_includes/getting-started/browser-device-support.html
@@ -106,6 +106,9 @@
   <h3 id="support-ie8-box-sizing">Internet Explorer 8 and box-sizing</h3>
   <p>IE8 does not fully support <code>box-sizing: border-box;</code> when combined with <code>min-width</code>, <code>max-width</code>, <code>min-height</code>, or <code>max-height</code>. For that reason, as of v3.0.1, we no longer use <code>max-width</code> on <code>.container</code>s.</p>
 
+  <h3 id="support-ie8-font-face">Internet Explorer 8 and @font-face</h3>
+  <p>IE8 has some issues with <code>@font-face</code> when combined with <code>:before</code>. Bootstrap uses that combination with its Glyphicons. If a page is cached, and loaded without the mouse over the window (i.e. hit the refresh button or load something in an iframe) then the page gets rendered before the font loads. Hovering over the page (body) will show some of the icons and hovering over the remaining icons will show those as well. <a href="https://github.com/twbs/bootstrap/issues/13863">See issue #13863</a> for details.</p>
+
   <h3 id="support-ie-compatibility-modes">IE Compatibility modes</h3>
   <p>Bootstrap is not supported in the old Internet Explorer compatibility modes. To be sure you're using the latest rendering mode for IE, consider including the appropriate <code>&lt;meta&gt;</code> tag in your pages:</p>
 {% highlight html %}
diff --git a/docs/_includes/getting-started/examples.html b/docs/_includes/getting-started/examples.html
index bf87a2cec..b1739f1d7 100644
--- a/docs/_includes/getting-started/examples.html
+++ b/docs/_includes/getting-started/examples.html
@@ -1,7 +1,7 @@
 <div class="bs-docs-section">
   <h1 id="examples" class="page-header">Examples</h1>
 
-  <p class="lead">Build on the basic template above with Bootstrap's many components. See also <a href="#customizing">Customizing Bootstrap</a> for tips on maintaining your own Bootstrap variants.</p>
+  <p class="lead">Build on the basic template above with Bootstrap's many components. We encourage you to customize and adapt Bootstrap to suit your individual project's needs.</p>
 
   <h3 id="examples-framework">Using the framework</h3>
   <div class="row bs-examples">
@@ -119,7 +119,7 @@
         <img src="../examples/screenshots/justified-nav.jpg" alt="">
       </a>
       <h4>Justified nav</h4>
-      <p>Create a custom navbar with justified links. Heads up! <a href="../components/#nav-justified">Not too WebKit friendly.</a></p>
+      <p>Create a custom navbar with justified links. Heads up! <a href="../components/#nav-justified">Not too Safari friendly.</a></p>
     </div>
     <div class="clearfix visible-xs"></div>
 
@@ -155,12 +155,5 @@
       <h4>Offcanvas</h4>
       <p>Build a toggleable off-canvas navigation menu for use with Bootstrap.</p>
     </div>
-    <div class="col-xs-6 col-md-4">
-      <a class="thumbnail" href="../examples/equal-height-columns/">
-        <img src="../examples/screenshots/equal-height-columns.jpg" alt="">
-      </a>
-      <h4>Equal-height grid columns</h4>
-      <p>Adds automatic equal-height grid columns to Bootstrap's grid system.</p>
-    </div>
   </div>
 </div>
diff --git a/docs/_includes/js/buttons.html b/docs/_includes/js/buttons.html
index 154320e48..ee5b3d71d 100644
--- a/docs/_includes/js/buttons.html
+++ b/docs/_includes/js/buttons.html
@@ -144,7 +144,7 @@ $('.btn').button()
 
   <div class="bs-callout bs-callout-danger">
     <h4>Cross-browser compatibility</h4>
-    <p><a href="https://github.com/twbs/bootstrap/issues/793">Firefox persists the disabled state across page loads</a>. A workaround for this is to use <code>autocomplete="off"</code>.</p>
+    <p><a href="https://github.com/twbs/bootstrap/issues/793">Firefox persists form control states across page loads</a>. A workaround for this is to use <code>autocomplete="off"</code>.</p>
   </div>
 
   <h4>$().button('reset')</h4>
diff --git a/docs/_includes/js/popovers.html b/docs/_includes/js/popovers.html
index 2ee670741..db3cf0e59 100644
--- a/docs/_includes/js/popovers.html
+++ b/docs/_includes/js/popovers.html
@@ -111,10 +111,10 @@ sagittis lacus vel augue laoreet rutrum faucibus.">
   <h4>Dismiss on next click</h4>
   <p>Use the <code>focus</code> trigger to dismiss popovers on their next click.</p>
   <div class="bs-example" style="padding-bottom: 24px;">
-    <button type="button" class="btn btn-lg btn-danger bs-docs-popover-dismiss" data-toggle="popover" title="Dimissmisable popover" data-content="And here's some amazing content. It's very engaging. Right?">Dismissable popover</button>
+    <button type="button" class="btn btn-lg btn-danger bs-docs-popover-dismiss" data-toggle="popover" title="Dismissible popover" data-content="And here's some amazing content. It's very engaging. Right?">Dismissible popover</button>
   </div>
 {% highlight html %}
-<button type="button" class="btn btn-lg btn-danger popover-dismiss" data-toggle="popover" title="Dimissmisable popover" data-content="And here's some amazing content. It's very engaging. Right?">Dismissable popover</button>
+<button type="button" class="btn btn-lg btn-danger popover-dismiss" data-toggle="popover" title="Dismissible popover" data-content="And here's some amazing content. It's very engaging. Right?">Dismissible popover</button>
 {% endhighlight %}
 {% highlight js %}
 $('.popover-dismiss').popover({
diff --git a/docs/_includes/nav/components.html b/docs/_includes/nav/components.html
index e850f3abc..647e1ec81 100644
--- a/docs/_includes/nav/components.html
+++ b/docs/_includes/nav/components.html
@@ -94,7 +94,7 @@
   <a href="#alerts">Alerts</a>
   <ul class="nav">
     <li><a href="#alerts-examples">Examples</a></li>
-    <li><a href="#alerts-dismissable">Dismissable alerts</a></li>
+    <li><a href="#alerts-dismissible">Dismissible alerts</a></li>
     <li><a href="#alerts-links">Links in alerts</a></li>
   </ul>
 </li>
diff --git a/docs/_includes/nav/getting-started.html b/docs/_includes/nav/getting-started.html
index fae906920..54927c22a 100644
--- a/docs/_includes/nav/getting-started.html
+++ b/docs/_includes/nav/getting-started.html
@@ -44,6 +44,7 @@
     <li><a href="#support-ie8-ie9">Internet Explorer 8-9</a></li>
     <li><a href="#support-ie8-respondjs">IE8 and Respond.js</a></li>
     <li><a href="#support-ie8-box-sizing">IE8 and box-sizing</a></li>
+    <li><a href="#support-ie8-font-face">IE8 and @font-face</a></li>
     <li><a href="#support-ie-compatibility-modes">IE Compatibility modes</a></li>
     <li><a href="#support-ie10-width">IE10 and Windows (Phone) 8</a></li>
     <li><a href="#support-safari-percentages">Safari percent rounding</a></li>