Merge branch 'v4' of https://github.com/twbs/derpstrap into v4

16 files changed, 57 insertions, 40 deletions

diff --git a/docs/_includes/js/popovers.html b/docs/_includes/js/popovers.html
index ab33baccb..4557a44a4 100644
--- a/docs/_includes/js/popovers.html
+++ b/docs/_includes/js/popovers.html
@@ -39,24 +39,24 @@ $(function () {
   <h3>Static popover</h3>
   <p>Four options are available: top, right, bottom, and left aligned.</p>
   <div class="bs-example bs-example-popover">
-    <div class="popover top">
-      <div class="arrow"></div>
+    <div class="popover popover-top">
+      <div class="popover-arrow"></div>
       <h3 class="popover-title">Popover top</h3>
       <div class="popover-content">
         <p>Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</p>
       </div>
     </div>
 
-    <div class="popover right">
-      <div class="arrow"></div>
+    <div class="popover popover-right">
+      <div class="popover-arrow"></div>
       <h3 class="popover-title">Popover right</h3>
       <div class="popover-content">
         <p>Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</p>
       </div>
     </div>
 
-    <div class="popover bottom">
-      <div class="arrow"></div>
+    <div class="popover popover-bottom">
+      <div class="popover-arrow"></div>
       <h3 class="popover-title">Popover bottom</h3>
 
       <div class="popover-content">
@@ -64,8 +64,8 @@ $(function () {
       </div>
     </div>
 
-    <div class="popover left">
-      <div class="arrow"></div>
+    <div class="popover popover-left">
+      <div class="popover-arrow"></div>
       <h3 class="popover-title">Popover left</h3>
       <div class="popover-content">
         <p>Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</p>
@@ -207,12 +207,12 @@ sagittis lacus vel augue laoreet rutrum faucibus.">
         <tr>
           <td>template</td>
           <td>string</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><code>'&lt;div class="popover" role="tooltip"&gt;&lt;div class="popover-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>
             <p>The popover's <code>content</code> will be injected into the <code>.popover-content</code>.</p>
-            <p><code>.arrow</code> will become the popover's arrow.</p>
+            <p><code>.popover-arrow</code> will become the popover's arrow.</p>
             <p>The outermost wrapper element should have the <code>.popover</code> class.</p>
           </td>
         </tr>
diff --git a/docs/_includes/js/tooltips.html b/docs/_includes/js/tooltips.html
index ae553e0df..b8293c9f5 100644
--- a/docs/_includes/js/tooltips.html
+++ b/docs/_includes/js/tooltips.html
@@ -12,25 +12,25 @@
   <h3>Static tooltip</h3>
   <p>Four options are available: top, right, bottom, and left aligned.</p>
   <div class="bs-example bs-example-tooltip">
-    <div class="tooltip left" role="tooltip">
+    <div class="tooltip tooltip-left" role="tooltip">
       <div class="tooltip-arrow"></div>
       <div class="tooltip-inner">
         Tooltip on the left
       </div>
     </div>
-    <div class="tooltip top" role="tooltip">
+    <div class="tooltip tooltip-top" role="tooltip">
       <div class="tooltip-arrow"></div>
       <div class="tooltip-inner">
         Tooltip on the top
       </div>
     </div>
-    <div class="tooltip bottom" role="tooltip">
+    <div class="tooltip tooltip-bottom" role="tooltip">
       <div class="tooltip-arrow"></div>
       <div class="tooltip-inner">
         Tooltip on the bottom
       </div>
     </div>
-    <div class="tooltip right" role="tooltip">
+    <div class="tooltip tooltip-right" role="tooltip">
       <div class="tooltip-arrow"></div>
       <div class="tooltip-inner">
         Tooltip on the right
diff --git a/docs/assets/js/src/application.js b/docs/assets/js/src/application.js
index 9c1ec22c4..8dfb82651 100644
--- a/docs/assets/js/src/application.js
+++ b/docs/assets/js/src/application.js
@@ -10,6 +10,7 @@
  */
 
 /* global ZeroClipboard */
+/* global SimpleJekyllSearch */
 
 !function ($) {
   'use strict';
diff --git a/docs/components/card.md b/docs/components/card.md
index 237588c55..7e7b4d8ee 100644
--- a/docs/components/card.md
+++ b/docs/components/card.md
@@ -21,7 +21,7 @@ Cards require very little markup, but do require some additional classes to give
 
 ### Text alignment
 
-You can quickly change the text alignment of any card—in it's entirety or specific parts—with our [text align classes]().
+You can quickly change the text alignment of any card—in its entirety or specific parts—with our [text align classes]().
 
 {% example html %}
 <div class="card">
diff --git a/docs/content/tables.md b/docs/content/tables.md
index 23e25a215..e4f69b068 100644
--- a/docs/content/tables.md
+++ b/docs/content/tables.md
@@ -3,7 +3,7 @@ layout: page
 title: Tables
 ---
 
-Due to the widespread use of tables across plugins like calendars and date pickers, we've designed our tables to be **opt-in**. Just add the base class `.table` to any `<table>`.
+Due to the widespread use of tables across third-party widgets like calendars and date pickers, we've designed our tables to be **opt-in**. Just add the base class `.table` to any `<table>`.
 
 ## Basic example
 
diff --git a/docs/examples/album/index.html b/docs/examples/album/index.html
index 6a3c085a8..ac456377b 100644
--- a/docs/examples/album/index.html
+++ b/docs/examples/album/index.html
@@ -50,7 +50,7 @@
     <section class="jumbotron text-center">
       <div class="container">
         <h1 class="jumbotron-heading">Album example</h1>
-        <p class="lead text-muted">Something short and leading about the collection below—it's contents, the creator, etc. Make it short and sweet, but not too short so folks don't simply skip over it entirely.</p>
+        <p class="lead text-muted">Something short and leading about the collection below—its contents, the creator, etc. Make it short and sweet, but not too short so folks don't simply skip over it entirely.</p>
         <p>
           <a href="#" class="btn btn-primary">Main call to action</a>
           <a href="#" class="btn btn-secondary">Secondary action</a>
diff --git a/docs/examples/navbar-top/index.html b/docs/examples/navbar-top/index.html
index 334b8430a..f54f5eafd 100644
--- a/docs/examples/navbar-top/index.html
+++ b/docs/examples/navbar-top/index.html
@@ -37,7 +37,7 @@
     <div class="container">
       <div class="jumbotron">
         <h1>Navbar example</h1>
-        <p class="lead">This example is a quick exercise to illustrate how the top-aligned navbar works. As you scroll, this navbar remains in it's original position and moves with the rest of the page.</p>
+        <p class="lead">This example is a quick exercise to illustrate how the top-aligned navbar works. As you scroll, this navbar remains in its original position and moves with the rest of the page.</p>
         <a class="btn btn-lg btn-primary" href="../../components/#navbar" role="button">View navbar docs &raquo;</a>
       </div>
     </div>
diff --git a/docs/examples/navbar/index.html b/docs/examples/navbar/index.html
index d6084e663..fde91fa8f 100644
--- a/docs/examples/navbar/index.html
+++ b/docs/examples/navbar/index.html
@@ -39,7 +39,7 @@
       <!-- Main component for a primary marketing message or call to action -->
       <div class="jumbotron">
         <h1>Navbar example</h1>
-        <p>This example is a quick exercise to illustrate how the default navbar works. It's placed within a <code>.container</code> to limit it's width and will scroll with the rest of the page's content.</p>
+        <p>This example is a quick exercise to illustrate how the default navbar works. It's placed within a <code>.container</code> to limit its width and will scroll with the rest of the page's content.</p>
         <p>
           <a class="btn btn-lg btn-primary" href="../../components/#navbar" role="button">View navbar docs &raquo;</a>
         </p>
diff --git a/docs/getting-started/compiling.md b/docs/getting-started/compiling.md
index 7a12becf7..38aa249d5 100644
--- a/docs/getting-started/compiling.md
+++ b/docs/getting-started/compiling.md
@@ -13,11 +13,15 @@ From the command line:
 
 1. Install `grunt-cli` globally with `npm install -g grunt-cli`.
 2. Navigate to the root `/bootstrap` directory, then run `npm install`. npm will look at [package.json](https://github.com/twbs/bootstrap/blob/master/package.json) and automatically install the necessary local dependencies listed there.
+3. [Install Ruby][install-ruby], install [Bundler][gembundler] with `gem install bundler`, and finally run `bundle`. This will install all Ruby dependencies, such as Jekyll and Sass linter.
 
 When completed, you'll be able to run the various Grunt commands provided from the command line.
 
 **Unfamiliar with npm? Don't have node installed?** That's a-okay. npm stands for [node packaged modules](http://npmjs.org/) and is a way to manage development dependencies through node.js. [Download and install node.js](http://nodejs.org/download/) before proceeding.
 
+[install-ruby]: https://www.ruby-lang.org/en/documentation/installation/
+[gembundler]: http://bundler.io/
+
 ### Available Grunt commands
 
 #### Build - `grunt`
@@ -35,6 +39,20 @@ Builds and tests CSS, JavaScript, and other assets which are used when running t
 #### Watch - `grunt watch`
 This is a convenience method for watching just Sass files and automatically building them whenever you save.
 
+### Use another Sass compiler
+Bootstrap is compiled with [libsass][libsass] by default.
+Use another compiler by setting the `TWBS_SASS` environment variable to:
+
+* `sass` to use [Ruby Sass][ruby-sass] via [grunt-contrib-sass][grunt-contrib-sass].
+* `libsass` (default) to use [libsass][libsass] via [grunt-sass][grunt-sass].
+
+For example, run `TWBS_SASS=sass grunt` to test and build Bootstrap with Ruby Sass.
+
+[ruby-sass]: https://github.com/sass/sass
+[grunt-contrib-sass]: https://github.com/gruntjs/grunt-contrib-sass
+[libsass]: https://github.com/sass/libsass
+[grunt-sass]: https://github.com/sindresorhus/grunt-sass
+
 ### Troubleshooting dependencies
 
 Should you encounter problems with installing dependencies or running Grunt commands, uninstall all previous dependency versions (global and local). Then, rerun `npm install`.
diff --git a/docs/getting-started/quick-start.md b/docs/getting-started/quick-start.md
index 6b1e68220..8e2f6814d 100644
--- a/docs/getting-started/quick-start.md
+++ b/docs/getting-started/quick-start.md
@@ -22,7 +22,7 @@ Then, add the Bootstrap JavaScript—and jQuery—near the end of your pages. It
 Be sure to have your pages set up with the latest design and development standards. That means:
 
 * Using an HTML5 doctype
-* Forcing Internet Explorer to use it's latest rendering mode ([read more]())
+* Forcing Internet Explorer to use its latest rendering mode ([read more]())
 * And, utilizing the viewport meta tag.
 
 Put it all together and your pages should look like this:
diff --git a/docs/getting-started/third-party-support.md b/docs/getting-started/third-party-support.md
index c469b644e..ea22cf589 100644
--- a/docs/getting-started/third-party-support.md
+++ b/docs/getting-started/third-party-support.md
@@ -16,7 +16,7 @@ Depending on the context, you may override as-needed (Option 1) or reset the box
  *
  * Reset individual elements or override regions to avoid conflicts due to
  * global box model settings of Bootstrap. Two options, individual overrides and
- * region resets, are available as plain CSS and uncompiled Less formats.
+ * region resets, are available as plain CSS and uncompiled Sass formats.
  */
 
 /* Option 1A: Override a single element's box model via CSS */
@@ -26,7 +26,7 @@ Depending on the context, you may override as-needed (Option 1) or reset the box
           box-sizing: content-box;
 }
 
-/* Option 1B: Override a single element's box model by using a Bootstrap Less mixin */
+/* Option 1B: Override a single element's box model by using a Bootstrap Sass mixin */
 .element {
   .box-sizing(content-box);
 }
@@ -41,7 +41,7 @@ Depending on the context, you may override as-needed (Option 1) or reset the box
           box-sizing: content-box;
 }
 
-/* Option 2B: Reset an entire region with a custom Less mixin */
+/* Option 2B: Reset an entire region with a custom Sass mixin */
 .reset-box-sizing {
   &,
   *,
diff --git a/docs/index.html b/docs/index.html
index 2ebeb3ff9..d0ae59d72 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -25,9 +25,9 @@ title: Bootstrap &middot; The world's most popular mobile-first and responsive f
 
     <div class="row">
       <div class="col-sm-4">
-        <img src="assets/img/sass-less.png" alt="Sass and Less support" class="img-responsive">
+        <img src="assets/img/sass-less.png" alt="Sass support" class="img-responsive">
         <h3>Preprocessors</h3>
-        <p>Bootstrap ships with vanilla CSS, but its source code utilizes the two most popular CSS preprocessors, <a href="../css/#less">Less</a> and <a href="../css/#sass">Sass</a>. Quickly get started with precompiled CSS or build on the source.</p>
+        <p>Bootstrap ships with vanilla CSS, but its source code utilizes <a href="../css/#sass">Sass</a>, a popular CSS preprocessor. Quickly get started with precompiled CSS or build on the source.</p>
       </div>
       <div class="col-sm-4">
         <img src="assets/img/devices.png" alt="Responsive across devices" class="img-responsive">
diff --git a/docs/javascript/alerts.md b/docs/javascript/alerts.md
index bbe2eeab4..8d3df5d2f 100644
--- a/docs/javascript/alerts.md
+++ b/docs/javascript/alerts.md
@@ -22,7 +22,7 @@ When using a `.close` button, it must be the first child of the `.alert-dismissi
 {% 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>
-  <h4>Oh snap! You got an error!</h4>
+  <h4 class="alert-heading">Oh snap! You got an error!</h4>
   <p>Change this and that and try again. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.</p>
   <p>
     <button type="button" class="btn btn-danger">Take this action</button>
diff --git a/docs/javascript/carousel.md b/docs/javascript/carousel.md
index dac8d00d1..d69725a59 100644
--- a/docs/javascript/carousel.md
+++ b/docs/javascript/carousel.md
@@ -37,8 +37,8 @@ A slideshow component for cycling through elements—images or slides of text—
 {% endexample %}
 
 <div class="bs-callout bs-callout-warning" id="callout-carousel-transitions">
-  <h4>Transition animations not supported in Internet Explorer 8 &amp; 9</h4>
-  <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>
+  <h4>Transition animations not supported in Internet Explorer 9</h4>
+  <p>Bootstrap exclusively uses CSS3 for its animations, but Internet Explorer 9 doesn't support the necessary CSS properties. Thus, there are no slide transition animations when using that browser. 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">
diff --git a/docs/javascript/overview.md b/docs/javascript/overview.md
index 8d22d4020..631ea519c 100644
--- a/docs/javascript/overview.md
+++ b/docs/javascript/overview.md
@@ -81,8 +81,6 @@ $.fn.bootstrapBtn = bootstrapButton            // give $().bootstrapBtn the Boot
 
 Bootstrap provides custom events for most plugins' unique actions. Generally, these come in an infinitive and past participle form - where the infinitive (ex. `show`) is triggered at the start of an event, and its past participle form (ex. `shown`) is triggered on the completion of an action.
 
-As of 3.0.0, all Bootstrap events are namespaced.
-
 All infinitive events provide `preventDefault` functionality. This provides the ability to stop the execution of an action before it starts.
 
 {% highlight js %}
diff --git a/docs/javascript/popovers.md b/docs/javascript/popovers.md
index 0844621ba..28cafb1b0 100644
--- a/docs/javascript/popovers.md
+++ b/docs/javascript/popovers.md
@@ -43,24 +43,24 @@ $(function () {
 Four options are available: top, right, bottom, and left aligned.
 
 <div class="bs-example bs-example-popover">
-  <div class="popover top">
-    <div class="arrow"></div>
+  <div class="popover popover-top">
+    <div class="popover-arrow"></div>
     <h3 class="popover-title">Popover top</h3>
     <div class="popover-content">
       <p>Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</p>
     </div>
   </div>
 
-  <div class="popover right">
-    <div class="arrow"></div>
+  <div class="popover popover-right">
+    <div class="popover-arrow"></div>
     <h3 class="popover-title">Popover right</h3>
     <div class="popover-content">
       <p>Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</p>
     </div>
   </div>
 
-  <div class="popover bottom">
-    <div class="arrow"></div>
+  <div class="popover popover-bottom">
+    <div class="popover-arrow"></div>
     <h3 class="popover-title">Popover bottom</h3>
 
     <div class="popover-content">
@@ -68,8 +68,8 @@ Four options are available: top, right, bottom, and left aligned.
     </div>
   </div>
 
-  <div class="popover left">
-    <div class="arrow"></div>
+  <div class="popover popover-left">
+    <div class="popover-arrow"></div>
     <h3 class="popover-title">Popover left</h3>
     <div class="popover-content">
       <p>Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</p>
@@ -222,12 +222,12 @@ Options can be passed via data attributes or JavaScript. For data attributes, ap
       <tr>
         <td>template</td>
         <td>string</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><code>'&lt;div class="popover" role="tooltip"&gt;&lt;div class="popover-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>
           <p>The popover's <code>content</code> will be injected into the <code>.popover-content</code>.</p>
-          <p><code>.arrow</code> will become the popover's arrow.</p>
+          <p><code>.popover-arrow</code> will become the popover's arrow.</p>
           <p>The outermost wrapper element should have the <code>.popover</code> class.</p>
         </td>
       </tr>