Merge branch 'master' into derp

Conflicts:
	docs/_layouts/default.html
	docs/assets/css/docs.min.css
	docs/assets/css/src/docs.css
	docs/assets/js/docs.min.js
	docs/assets/js/src/application.js

.travis.yml

@@ -2,19 +2,23 @@ language: node_js
 node_js:
   - "0.10"
 before_install:
-  - time sudo pip install --use-mirrors -r test-infra/requirements.txt
+  - time travis_retry sudo pip install -r test-infra/requirements.txt
   - rvm use 1.9.3 --fuzzy
-  - if [ "$TWBS_TEST" = validate-html ]; then echo "ruby=$(basename $(rvm gemdir)) jekyll=$JEKYLL_VERSION" > pseudo_Gemfile.lock; fi
+  - export GEMDIR=$(rvm gemdir)
+  - if [ "$TWBS_TEST" = validate-html ]; then echo "ruby=$(basename $GEMDIR) jekyll=$JEKYLL_VERSION" > pseudo_Gemfile.lock; fi
+  - "export TRAVIS_COMMIT_MSG=\"$(git log --format=%B --no-merges -n 1)\""
+  - echo "$TRAVIS_COMMIT_MSG" | grep '\[skip validator\]'; export TWBS_DO_VALIDATOR=$?; true
+  - echo "$TRAVIS_COMMIT_MSG" | grep '\[skip sauce\]'; export TWBS_DO_SAUCE=$?; true
 install:
   - time npm install -g grunt-cli
-  - time ./test-infra/s3_cache.py download 'npm packages' test-infra/npm-shrinkwrap.canonical.json ./node_modules || time ./test-infra/uncached-npm-install.sh
-  - if [ "$TWBS_TEST" = validate-html ]; then time ./test-infra/s3_cache.py download rubygems pseudo_Gemfile.lock $(rvm gemdir) || gem install -N jekyll -v $JEKYLL_VERSION; fi
+  - ./test-infra/s3_cache.py download npm-modules
+  - if [ "$TWBS_TEST" = validate-html ] && [ $TWBS_DO_VALIDATOR -ne 0 ]; then ./test-infra/s3_cache.py download rubygems; fi
 after_script:
-  - if [ "$TWBS_TEST" = core ]; then time ./test-infra/s3_cache.py upload 'npm packages' test-infra/npm-shrinkwrap.canonical.json ./node_modules; fi
-  - if [ "$TWBS_TEST" = validate-html ]; then time ./test-infra/s3_cache.py upload rubygems pseudo_Gemfile.lock $(rvm gemdir); fi
+  - if [ "$TWBS_TEST" = core ]; then ./test-infra/s3_cache.py upload npm-modules; fi
+  - if [ "$TWBS_TEST" = validate-html ] && [ $TWBS_DO_VALIDATOR -ne 0 ]; then ./test-infra/s3_cache.py upload rubygems; fi
 env:
   global:
-    - JEKYLL_VERSION: 1.4.2
+    - JEKYLL_VERSION: 2.1.0
     - SAUCE_USERNAME: bootstrap
     - secure: "pJkBwnuae9dKU5tEcCqccfS1QQw7/meEcfz63fM7ba7QJNjoA6BaXj08L5Z3Vb5vBmVPwBawxo5Hp0jC0r/Z/O0hGnAmz/Cz09L+cy7dSAZ9x4hvZePSja/UAusaB5ogMoO8l2b773MzgQeSmrLbExr9BWLeqEfjC2hFgdgHLaQ="
     - secure: "gqjqISbxBJK6byFbsmr1AyP1qoWH+rap06A2gI7v72+Tn2PU2nYkIMUkCvhZw6K889jv+LhQ/ybcBxDOXHpNCExCnSgB4dcnmYp+9oeNZb37jSP0rQ+Ib4OTLjzc3/FawE/fUq5kukZTC7porzc/k0qJNLAZRx3YLALmK1GIdUY="
@@ -26,3 +30,5 @@ env:
     - TWBS_TEST=sauce-js-unit
 matrix:
   fast_finish: true
+notifications:
+  slack: heybb:iz4wwosL0N0EdaX1gvgkU0NH

README.md

-# [Bootstrap](http://getbootstrap.com) [![Bower version](https://badge.fury.io/bo/bootstrap.png)](http://badge.fury.io/bo/bootstrap) [![Build Status](https://secure.travis-ci.org/twbs/bootstrap.png)](http://travis-ci.org/twbs/bootstrap) [![devDependency Status](https://david-dm.org/twbs/bootstrap/dev-status.png?theme=shields.io)](https://david-dm.org/twbs/bootstrap#info=devDependencies)
+# [Bootstrap](http://getbootstrap.com)
+[![Bower version](https://badge.fury.io/bo/bootstrap.svg)](http://badge.fury.io/bo/bootstrap)
+[![NPM version](https://badge.fury.io/js/bootstrap.svg)](http://badge.fury.io/js/bootstrap)
+[![Build Status](https://secure.travis-ci.org/twbs/bootstrap.svg?branch=master)](http://travis-ci.org/twbs/bootstrap)
+[![devDependency Status](https://david-dm.org/twbs/bootstrap/dev-status.svg)](https://david-dm.org/twbs/bootstrap#info=devDependencies)
 [![Selenium Test Status](https://saucelabs.com/browser-matrix/bootstrap.svg)](https://saucelabs.com/u/bootstrap)
 
 Bootstrap is a sleek, intuitive, and powerful front-end framework for faster and easier web development, created by [Mark Otto](http://twitter.com/mdo) and [Jacob Thornton](http://twitter.com/fat), and maintained by the [core team](https://github.com/twbs?tab=members) with the massive support and involvement of the community.
@@ -10,18 +14,17 @@ To get started, check out <http://getbootstrap.com>!
  - [Quick start](#quick-start)
  - [Bugs and feature requests](#bugs-and-feature-requests)
  - [Documentation](#documentation)
- - [Compiling CSS and JavaScript](#compiling-css-and-javascript)
  - [Contributing](#contributing)
  - [Community](#community)
  - [Versioning](#versioning)
- - [Authors](#authors)
+ - [Creators](#creators)
  - [Copyright and license](#copyright-and-license)
 
 ## Quick start
 
 Three quick start options are available:
 
-- [Download the latest release](https://github.com/twbs/bootstrap/archive/v3.1.1.zip).
+- [Download the latest release](https://github.com/twbs/bootstrap/archive/v3.2.0.zip).
 - Clone the repo: `git clone https://github.com/twbs/bootstrap.git`.
 - Install with [Bower](http://bower.io): `bower install bootstrap`.
 
@@ -63,10 +66,10 @@ Bootstrap's documentation, included in this repo in the root directory, is built
 
 ### Running documentation locally
 
-1. If necessary, [install Jekyll](http://jekyllrb.com/docs/installation) (requires v1.x).
-  - **Windows users:** Read [this unofficial guide](https://github.com/juthilo/run-jekyll-on-windows/) to get Jekyll up and running without problems. We use Pygments for syntax highlighting, so make sure to read the sections on installing Python and Pygments.
+1. If necessary, [install Jekyll](http://jekyllrb.com/docs/installation) (requires v2.1.x).
+  - **Windows users:** Read [this unofficial guide](https://github.com/juthilo/run-jekyll-on-windows/) to get Jekyll up and running without problems.
+2. Install the Ruby-based syntax highlighter, [Rouge](https://github.com/jneen/rouge), with `gem install rouge`.
 2. From the root `/bootstrap` directory, run `jekyll serve` in the command line.
-  - **Windows users:** While we use Jekyll's `encoding` setting, you might still need to change the command prompt's character encoding ([code page](http://en.wikipedia.org/wiki/Windows_code_page)) to UTF-8 so Jekyll runs without errors. For Ruby 2.0.0, run `chcp 65001` first. For Ruby 1.9.3, you can alternatively do `SET LANG=en_EN.UTF-8`.
 3. Open <http://localhost:9001> in your browser, and voilà.
 
 Learn more about using Jekyll by reading its [documentation](http://jekyllrb.com/docs/home/).
@@ -79,41 +82,6 @@ Documentation for v2.3.2 has been made available for the time being at <http://g
 
 
 
-## Compiling CSS and JavaScript
-
-Bootstrap uses [Grunt](http://gruntjs.com/) with convenient methods for working with the framework. It's how we compile our code, run tests, and more. To use it, install the required dependencies as directed and then run some Grunt commands.
-
-### Install Grunt
-
-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.
-
-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.
-
-### Available Grunt commands
-
-#### Build - `grunt`
-Run `grunt` to run tests locally and compile the CSS and JavaScript into `/dist`. **Uses [Less](http://lesscss.org/) and [UglifyJS](http://lisperator.net/uglifyjs/).**
-
-#### Only compile CSS and JavaScript - `grunt dist`
-`grunt dist` creates the `/dist` directory with compiled files. **Uses [Less](http://lesscss.org/) and [UglifyJS](http://lisperator.net/uglifyjs/).**
-
-#### Tests - `grunt test`
-Runs [JSHint](http://jshint.com) and [QUnit](http://qunitjs.com/) tests headlessly in [PhantomJS](http://phantomjs.org/) (used for CI).
-
-#### Watch - `grunt watch`
-This is a convenience method for watching just Less files and automatically building them whenever you save.
-
-### 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`.
-
-
-
 ## Contributing
 
 Please read through our [contributing guidelines](https://github.com/twbs/bootstrap/blob/master/CONTRIBUTING.md). Included are directions for opening issues, coding standards, and notes on development.
@@ -135,26 +103,13 @@ Keep track of development and community news.
 
 
 
-
 ## Versioning
 
-For transparency into our release cycle and in striving to maintain backward compatibility, Bootstrap is maintained under the Semantic Versioning guidelines. Sometimes we screw up, but we'll adhere to these rules whenever possible.
-
-Releases will be numbered with the following format:
-
-`<major>.<minor>.<patch>`
-
-And constructed with the following guidelines:
-
-- Breaking backward compatibility **bumps the major** while resetting minor and patch
-- New additions without breaking backward compatibility **bumps the minor** while resetting the patch
-- Bug fixes and misc changes **bumps only the patch**
-
-For more information on SemVer, please visit <http://semver.org/>.
+For transparency into our release cycle and in striving to maintain backward compatibility, Bootstrap is maintained under [the Semantic Versioning guidelines](http://semver.org/). Sometimes we screw up, but we'll adhere to those rules whenever possible.
 
 
 
-## Authors
+## Creators
 
 **Mark Otto**
 

_config.yml

 # Dependencies
-markdown:         rdiscount
-pygments:         true
+markdown:         kramdown
+highlighter:      rouge
 
 # Permalinks
 permalink:        pretty
@@ -14,25 +14,20 @@ baseurl:          /
 url:              http://getbootstrap.com
 encoding:         UTF-8
 
-exclude:
-  - jade
-  - src
-  - vendor
-
 # Custom vars
-current_version:  3.1.1
+current_version:  3.2.0
 repo:             https://github.com/twbs/bootstrap
 sass_repo:        https://github.com/twbs/bootstrap-sass
 
 download:
-  source:         https://github.com/twbs/bootstrap/archive/v3.1.1.zip
-  dist:           https://github.com/twbs/bootstrap/releases/download/v3.1.1/bootstrap-3.1.1-dist.zip
-  sass:           https://github.com/twbs/bootstrap-sass/archive/v3.1.1.tar.gz
+  source:         https://github.com/twbs/bootstrap/archive/v3.2.0.zip
+  dist:           https://github.com/twbs/bootstrap/releases/download/v3.2.0/bootstrap-3.2.0-dist.zip
+  sass:           https://github.com/twbs/bootstrap-sass/archive/v3.2.0.tar.gz
 
 blog:             http://blog.getbootstrap.com
 expo:             http://expo.getbootstrap.com
 
 cdn:
-  css:            //netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css
-  css_theme:      //netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap-theme.min.css
-  js:             //netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js
+  css:            //maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css
+  css_theme:      //maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css
+  js:             //maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js

bower.json

 {
   "name": "bootstrap",
-  "version": "3.1.1",
+  "description": "The most popular front-end framework for developing responsive, mobile first projects on the web.",
+  "version": "3.2.0",
   "keywords": [
     "css",
     "js",
@@ -11,7 +12,9 @@
     "framework",
     "web"
   ],
+  "homepage": "http://getbootstrap.com",
   "main": [
+    "less/bootstrap.less",
     "dist/css/bootstrap.css",
     "dist/js/bootstrap.js",
     "dist/fonts/glyphicons-halflings-regular.eot",
@@ -20,7 +23,7 @@
     "dist/fonts/glyphicons-halflings-regular.woff"
   ],
   "ignore": [
-    ".*",
+    "/.*",
     "_config.yml",
     "CNAME",
     "composer.json",

composer.json

@@ -28,7 +28,10 @@
   "license": "MIT",
   "extra": {
     "branch-alias": {
-      "dev-master": "3.0.x-dev"
+      "dev-master": "3.2.x-dev"
     }
+  },
+  "replace": {
+    "twitter/bootstrap": "self.version"
   }
 }

dist/css/bootstrap-theme.css

 /*!
- * Bootstrap v3.1.1 (http://getbootstrap.com)
+ * Bootstrap v3.2.0 (http://getbootstrap.com)
  * Copyright 2011-2014 Twitter, Inc.
  * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
  */
@@ -55,6 +55,11 @@
   background-color: #e0e0e0;
   border-color: #dbdbdb;
 }
+.btn-default:disabled,
+.btn-default[disabled] {
+  background-color: #e0e0e0;
+  background-image: none;
+}
 .btn-primary {
   background-image: -webkit-linear-gradient(top, #428bca 0%, #2d6ca2 100%);
   background-image:      -o-linear-gradient(top, #428bca 0%, #2d6ca2 100%);
@@ -75,6 +80,11 @@
   background-color: #2d6ca2;
   border-color: #2b669a;
 }
+.btn-primary:disabled,
+.btn-primary[disabled] {
+  background-color: #2d6ca2;
+  background-image: none;
+}
 .btn-success {
   background-image: -webkit-linear-gradient(top, #5cb85c 0%, #419641 100%);
   background-image:      -o-linear-gradient(top, #5cb85c 0%, #419641 100%);
@@ -95,6 +105,11 @@
   background-color: #419641;
   border-color: #3e8f3e;
 }
+.btn-success:disabled,
+.btn-success[disabled] {
+  background-color: #419641;
+  background-image: none;
+}
 .btn-info {
   background-image: -webkit-linear-gradient(top, #5bc0de 0%, #2aabd2 100%);
   background-image:      -o-linear-gradient(top, #5bc0de 0%, #2aabd2 100%);
@@ -115,6 +130,11 @@
   background-color: #2aabd2;
   border-color: #28a4c9;
 }
+.btn-info:disabled,
+.btn-info[disabled] {
+  background-color: #2aabd2;
+  background-image: none;
+}
 .btn-warning {
   background-image: -webkit-linear-gradient(top, #f0ad4e 0%, #eb9316 100%);
   background-image:      -o-linear-gradient(top, #f0ad4e 0%, #eb9316 100%);
@@ -135,6 +155,11 @@
   background-color: #eb9316;
   border-color: #e38d13;
 }
+.btn-warning:disabled,
+.btn-warning[disabled] {
+  background-color: #eb9316;
+  background-image: none;
+}
 .btn-danger {
   background-image: -webkit-linear-gradient(top, #d9534f 0%, #c12e2a 100%);
   background-image:      -o-linear-gradient(top, #d9534f 0%, #c12e2a 100%);
@@ -155,6 +180,11 @@
   background-color: #c12e2a;
   border-color: #b92c28;
 }
+.btn-danger:disabled,
+.btn-danger[disabled] {
+  background-color: #c12e2a;
+  background-image: none;
+}
 .thumbnail,
 .img-thumbnail {
   -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, .075);
@@ -324,6 +354,11 @@
   filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffd9534f', endColorstr='#ffc9302c', GradientType=0);
   background-repeat: repeat-x;
 }
+.progress-bar-striped {
+  background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
+  background-image:      -o-linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
+  background-image:         linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
+}
 .list-group {
   border-radius: 4px;
   -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, .075);

docs/_data/showcase.yml

-- name: Little
-  url: http://littleco.com
-  expo_url: http://expo.getbootstrap.com/2014/02/12/little/
-  img: http://expo.getbootstrap.com/screenshots/little.jpg
+- name: Red Antler
+  url: http://www.redantler.com/
+  expo_url: http://expo.getbootstrap.com/2014/02/24/redantler/
+  img: redantler
 
-- name: Engine Yard
-  url: http://engineyard.com
-  expo_url: http://expo.getbootstrap.com/2014/02/10/engine-yard/
-  img: http://expo.getbootstrap.com/screenshots/engine-yard.jpg
+- name: Riot Design
+  url: http://riotdesign.eu/en/
+  expo_url: http://expo.getbootstrap.com/2014/03/13/riot-design/
+  img: riot
 
-- name: Webflow
-  url: http://webflow.com
-  expo_url: http://expo.getbootstrap.com/2014/02/04/webflow/
-  img: http://expo.getbootstrap.com/screenshots/webflow.jpg
+- name: Newsweek
+  url: http://www.newsweek.com/
+  expo_url: http://expo.getbootstrap.com/2014/02/12/newsweek/
+  img: newsweek
 
-- name: Sentry
-  url: https://getsentry.com
-  expo_url: http://expo.getbootstrap.com/2013/05/09/sentry/
-  img: http://expo.getbootstrap.com/screenshots/sentry.jpg
+- name: Robinhood
+  url: https://www.robinhood.com
+  expo_url: http://expo.getbootstrap.com/2014/02/26/robinhood/
+  img: robinhood

docs/_data/translations.yml

+- name: Chinese
+  code: zh
+  description: Bootstrap 中文文档
+  url: http://v3.bootcss.com/
+
+- name: French
+  code: fr
+  description: Bootstrap en Français
+  url: http://www.oneskyapp.com/docs/bootstrap/fr
+
+- name: German
+  code: de
+  description: Bootstrap auf Deutsch
+  url: http://holdirbootstrap.de/
+
+- name: Italian
+  code: it
+  description: Bootstrap in Italiano
+  url: http://www.hackerstribe.com/guide/IT-bootstrap-3.1.1/
+
+- name: Korean
+  code: ko
+  description: Bootstrap 한국어
+  url: http://bootstrapk.com/BS3/
+
+- name: Russian
+  code: ru
+  description: Bootstrap по-русски
+  url: http://www.oneskyapp.com/docs/bootstrap/ru
+
+- name: Spanish
+  code: es
+  description: Bootstrap en Español
+  url: http://www.oneskyapp.com/docs/bootstrap/es
+
+- name: Ukrainian
+  code: uk
+  description: Bootstrap ua Українською
+  url: http://twbs.site-konstruktor.com.ua

docs/_includes/components/alerts.html

@@ -32,17 +32,17 @@
 <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">
-      <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
+    <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">
-  <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
+<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>
 {% endhighlight %}

docs/_includes/components/badges.html

@@ -21,13 +21,13 @@
   <h4>Adapts to active nav states</h4>
   <p>Built-in styles are included for placing badges in active states in pill navigations.</p>
   <div class="bs-example">
-    <ul class="nav nav-pills">
+    <ul class="nav nav-pills" role="tablist">
       <li class="active"><a href="#">Home <span class="badge">42</span></a></li>
       <li><a href="#">Profile</a></li>
       <li><a href="#">Messages <span class="badge">3</span></a></li>
     </ul>
     <br>
-    <ul class="nav nav-pills nav-stacked" style="max-width: 260px;">
+    <ul class="nav nav-pills nav-stacked" role="tablist" style="max-width: 260px;">
       <li class="active">
         <a href="#">
           <span class="badge pull-right">42</span>
@@ -48,7 +48,7 @@
     </button>
   </div>
 {% highlight html %}
-<ul class="nav nav-pills nav-stacked">
+<ul class="nav nav-pills nav-stacked" role="tablist">
   <li class="active">
     <a href="#">
       <span class="badge pull-right">42</span>

docs/_includes/components/button-dropdowns.html

@@ -246,7 +246,7 @@
   <button class="btn btn-default btn-lg dropdown-toggle" type="button" data-toggle="dropdown">
     Large button <span class="caret"></span>
   </button>
-  <ul class="dropdown-menu">
+  <ul class="dropdown-menu" role="menu">
     ...
   </ul>
 </div>
@@ -256,7 +256,7 @@
   <button class="btn btn-default btn-sm dropdown-toggle" type="button" data-toggle="dropdown">
     Small button <span class="caret"></span>
   </button>
-  <ul class="dropdown-menu">
+  <ul class="dropdown-menu" role="menu">
     ...
   </ul>
 </div>
@@ -266,7 +266,7 @@
   <button class="btn btn-default btn-xs dropdown-toggle" type="button" data-toggle="dropdown">
     Extra small button <span class="caret"></span>
   </button>
-  <ul class="dropdown-menu">
+  <ul class="dropdown-menu" role="menu">
     ...
   </ul>
 </div>
@@ -313,7 +313,7 @@
     <span class="caret"></span>
     <span class="sr-only">Toggle Dropdown</span>
   </button>
-  <ul class="dropdown-menu">
+  <ul class="dropdown-menu" role="menu">
     <!-- Dropdown menu links -->
   </ul>
 </div>

docs/_includes/components/button-groups.html

@@ -121,7 +121,7 @@
       Dropdown
       <span class="caret"></span>
     </button>
-    <ul class="dropdown-menu">
+    <ul class="dropdown-menu" role="menu">
       <li><a href="#">Dropdown link</a></li>
       <li><a href="#">Dropdown link</a></li>
     </ul>
@@ -194,7 +194,7 @@
   </div>
   <div class="bs-callout bs-callout-warning">
     <h4>IE8 and borders</h4>
-    <p>Internet Explorer 8 doesn't render borders in on buttons in a justified button group, whether it's on <code>&lt;a&gt;</code> or <code>&lt;button&gt;</code> elements. To get around that, wrap each button in another <code>.btn-group</code>.</p>
+    <p>Internet Explorer 8 doesn't render borders on buttons in a justified button group, whether it's on <code>&lt;a&gt;</code> or <code>&lt;button&gt;</code> elements. To get around that, wrap each button in another <code>.btn-group</code>.</p>
     <p>See <a href="https://github.com/twbs/bootstrap/issues/12476">#12476</a> for more information.</p>
   </div>
 

docs/_includes/components/dropdowns.html

@@ -7,7 +7,7 @@
   <p>Wrap the dropdown's trigger and the dropdown menu within <code>.dropdown</code>, or another element that declares <code>position: relative;</code>. Then add the menu's HTML.</p>
   <div class="bs-example">
     <div class="dropdown clearfix">
-      <button class="btn dropdown-toggle sr-only" type="button" id="dropdownMenu1" data-toggle="dropdown">
+      <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">
         Dropdown
         <span class="caret"></span>
       </button>
@@ -22,7 +22,7 @@
   </div><!-- /example -->
 {% highlight html %}
 <div class="dropdown">
-  <button class="btn dropdown-toggle sr-only" type="button" id="dropdownMenu1" data-toggle="dropdown">
+  <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">
     Dropdown
     <span class="caret"></span>
   </button>
@@ -56,7 +56,7 @@
   <p>Add a header to label sections of actions in any dropdown menu.</p>
   <div class="bs-example">
     <div class="dropdown clearfix">
-      <button class="btn dropdown-toggle sr-only" type="button" id="dropdownMenu2" data-toggle="dropdown">
+      <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown">
         Dropdown
         <span class="caret"></span>
       </button>
@@ -85,7 +85,7 @@
   <p>Add <code>.disabled</code> to a <code>&lt;li&gt;</code> in the dropdown to disable the link.</p>
   <div class="bs-example">
     <div class="dropdown clearfix">
-      <button class="btn dropdown-toggle sr-only" type="button" id="dropdownMenu3" data-toggle="dropdown">
+      <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu3" data-toggle="dropdown">
         Dropdown
         <span class="caret"></span>
       </button>

docs/_includes/components/glyphicons.html

@@ -21,6 +21,20 @@
     <h4>Don't mix with other components</h4>
     <p>Icon classes cannot be directly combined with other components. They should not be used along with other classes on the same element. Instead, add a nested <code>&lt;span&gt;</code> and apply the icon classes to the <code>&lt;span&gt;</code>.</p>
   </div>
+  <div class="bs-callout bs-callout-danger">
+    <h4>Only for use on empty elements</h4>
+    <p>Icon classes should only be used on elements that contain no text content and have no child elements.</p>
+  </div>
+  <div class="bs-callout bs-callout-info">
+    <h4>Changing the icon font location</h4>
+    <p>Bootstrap assumes icon font files will be located in the <code>../fonts/</code> directory, relative to the compiled CSS files. Moving or renaming those font files means updating the CSS in one of three ways:</p>
+    <ul>
+      <li>Change the <code>@icon-font-path</code> and/or <code>@icon-font-name</code> variables in the source Less files.</li>
+      <li>Utilize the <a href="http://lesscss.org/usage/#command-line-usage-relative-urls">relative URLs option</a> provided by the Less compiler.</li>
+      <li>Change the <code>url()</code> paths in the compiled CSS.</li>
+    </ul>
+    <p>Use whatever option best suits your specific development setup.</p>
+  </div>
 {% highlight html %}
 <span class="glyphicon glyphicon-search"></span>
 {% endhighlight %}

docs/_includes/components/input-groups.html

@@ -221,7 +221,7 @@
     <div class="input-group">
       <div class="input-group-btn">
         <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span></button>
-        <ul class="dropdown-menu">
+        <ul class="dropdown-menu" role="menu">
           <li><a href="#">Action</a></li>
           <li><a href="#">Another action</a></li>
           <li><a href="#">Something else here</a></li>
@@ -237,7 +237,7 @@
       <input type="text" class="form-control">
       <div class="input-group-btn">
         <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span></button>
-        <ul class="dropdown-menu dropdown-menu-right">
+        <ul class="dropdown-menu dropdown-menu-right" role="menu">
           <li><a href="#">Action</a></li>
           <li><a href="#">Another action</a></li>
           <li><a href="#">Something else here</a></li>

docs/_includes/components/labels.html

@@ -32,4 +32,9 @@
 <span class="label label-warning">Warning</span>
 <span class="label label-danger">Danger</span>
 {% endhighlight %}
+
+  <div class="bs-callout bs-callout-info">
+    <h4>Have tons of labels?</h4>
+    <p>Rendering problems can arise when you have dozens of inline labels within a narrow container, each containing its own <code>inline-block</code> element (like an icon). The way around this is setting <code>display: inline-block;</code>. For context and an example, <a href="https://github.com/twbs/bootstrap/issues/13219">see #13219</a>.</p>
+  </div>
 </div>

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>
@@ -27,14 +27,14 @@
   <h2 id="nav-pills">Pills</h2>
   <p>Take that same HTML, but use <code>.nav-pills</code> instead:</p>
   <div class="bs-example">
-    <ul class="nav nav-pills">
+    <ul class="nav nav-pills" 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-pills">
+<ul class="nav nav-pills" role="tablist">
   <li class="active"><a href="#">Home</a></li>
   <li><a href="#">Profile</a></li>
   <li><a href="#">Messages</a></li>
@@ -42,14 +42,14 @@
 {% endhighlight %}
   <p>Pills are also vertically stackable. Just add <code>.nav-stacked</code>.</p>
   <div class="bs-example">
-    <ul class="nav nav-pills nav-stacked" style="max-width: 300px;">
+    <ul class="nav nav-pills nav-stacked" role="tablist" style="max-width: 300px;">
       <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-pills nav-stacked">
+<ul class="nav nav-pills nav-stacked" role="tablist">
   ...
 </ul>
 {% endhighlight %}
@@ -62,23 +62,23 @@
     <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>
     </ul>
     <br>
-    <ul class="nav nav-pills nav-justified">
+    <ul class="nav nav-pills nav-justified" 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 nav-justified">
+<ul class="nav nav-tabs nav-justified" role="tablist">
   ...
 </ul>
-<ul class="nav nav-pills nav-justified">
+<ul class="nav nav-pills nav-justified" role="tablist">
   ...
 </ul>
 {% endhighlight %}
@@ -93,14 +93,14 @@
   </div>
 
   <div class="bs-example">
-    <ul class="nav nav-pills">
+    <ul class="nav nav-pills" role="tablist">
       <li><a href="#">Clickable link</a></li>
       <li><a href="#">Clickable link</a></li>
       <li class="disabled"><a href="#">Disabled link</a></li>
     </ul>
   </div>
 {% highlight html %}
-<ul class="nav nav-pills">
+<ul class="nav nav-pills" role="tablist">
   ...
   <li class="disabled"><a href="#">Disabled link</a></li>
   ...
@@ -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,13 +131,13 @@
     </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="#">
       Dropdown <span class="caret"></span>
     </a>
-    <ul class="dropdown-menu">
+    <ul class="dropdown-menu" role="menu">
       ...
     </ul>
   </li>
@@ -147,7 +147,7 @@
 
   <h3>Pills with dropdowns</h3>
   <div class="bs-example">
-    <ul class="nav nav-pills">
+    <ul class="nav nav-pills" role="tablist">
       <li class="active"><a href="#">Home</a></li>
       <li><a href="#">Help</a></li>
       <li class="dropdown">
@@ -165,13 +165,13 @@
     </ul>
   </div><!-- /example -->
 {% highlight html %}
-<ul class="nav nav-pills">
+<ul class="nav nav-pills" role="tablist">
   ...
   <li class="dropdown">
     <a class="dropdown-toggle" data-toggle="dropdown" href="#">
       Dropdown <span class="caret"></span>
     </a>
-    <ul class="dropdown-menu">
+    <ul class="dropdown-menu" role="menu">
       ...
     </ul>
   </li>

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>

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%">

docs/_includes/components/responsive-embed.html

@@ -2,7 +2,7 @@
   <h1 id="responsive-embed" class="page-header">Responsive embed</h1>
 
   <p>Allow browsers to determine video or slideshow dimensions based on the width of their containing block by creating an intrinsic ratio that will properly scale on any device.</p>
-  <p>Rules are directly apply to <code>&lt;iframe&gt;</code>, <code>&lt;embed&gt;</code> and <code>&lt;object&gt;</code> elements, optionally use of an explicit descendant class <code>.embed-responsive-item</code> when you want to match the styling for other attributes.</p>
+  <p>Rules are directly applied to <code>&lt;iframe&gt;</code>, <code>&lt;embed&gt;</code>, and <code>&lt;object&gt;</code> elements; optionally use an explicit descendant class <code>.embed-responsive-item</code> when you want to match the styling for other attributes.</p>
   <p><strong>Pro-Tip!</strong> You don't need to include <code>frameborder="0"</code> in your <code>&lt;iframe&gt;</code>s as we override that for you.</p>
   <div class="bs-example">
     <div class="embed-responsive embed-responsive-16by9">

docs/_includes/components/thumbnails.html

@@ -46,7 +46,7 @@
     <div class="row">
       <div class="col-sm-6 col-md-4">
         <div class="thumbnail">
-          <img data-src="holder.js/300x200" alt="Generic placeholder thumbnail">
+          <img data-src="holder.js/100%x200" alt="Generic placeholder thumbnail">
           <div class="caption">
             <h3>Thumbnail label</h3>
             <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
@@ -56,7 +56,7 @@
       </div>
       <div class="col-sm-6 col-md-4">
         <div class="thumbnail">
-          <img data-src="holder.js/300x200" alt="Generic placeholder thumbnail">
+          <img data-src="holder.js/100%x200" alt="Generic placeholder thumbnail">
           <div class="caption">
             <h3>Thumbnail label</h3>
             <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
@@ -66,7 +66,7 @@
       </div>
       <div class="col-sm-6 col-md-4">
         <div class="thumbnail">
-          <img data-src="holder.js/300x200" alt="Generic placeholder thumbnail">
+          <img data-src="holder.js/100%x200" alt="Generic placeholder thumbnail">
           <div class="caption">
             <h3>Thumbnail label</h3>
             <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
@@ -80,7 +80,7 @@
 <div class="row">
   <div class="col-sm-6 col-md-4">
     <div class="thumbnail">
-      <img data-src="holder.js/300x200" alt="...">
+      <img data-src="holder.js/300x300" alt="...">
       <div class="caption">
         <h3>Thumbnail label</h3>
         <p>...</p>

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>
@@ -173,6 +173,6 @@
   <div class="bs-callout bs-callout-warning">
     <h4>Cross-browser rendering</h4>
     <p>As a best practice, <strong>we highly recommend using the <code>&lt;button&gt;</code> element whenever possible</strong> to ensure matching cross-browser rendering.</p>
-    <p>Among other things, there's <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=697451">a Firefox bug</a> that prevents us from setting the <code>line-height</code> of <code>&lt;input&gt;</code>-based buttons, causing them to not exactly match the height of other buttons on Firefox.</p>
+    <p>Among other things, there's <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=697451">a bug in Firefox &lt;30</a> that prevents us from setting the <code>line-height</code> of <code>&lt;input&gt;</code>-based buttons, causing them to not exactly match the height of other buttons on Firefox.</p>
   </div>
 </div>

docs/_includes/css/code.html

@@ -13,10 +13,12 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
   <h2 id="code-user-input">User input</h2>
   <p>Use the <code>&lt;kbd&gt;</code> to indicate input that is typically entered via keyboard.</p>
 <div class="bs-example">
-  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.<br>
+  To edit settings, press <kbd><kbd>ctrl</kbd> + <kbd>,</kbd></kbd>
 </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.<br>
+To edit settings, press <kbd><kbd>ctrl</kbd> + <kbd>,</kbd></kbd>
 {% endhighlight %}
 
   <h2 id="code-block">Basic block</h2>

docs/_includes/css/grid.html

@@ -13,6 +13,7 @@
     <li>Columns create gutters (gaps between column content) via <code>padding</code>. That padding is offset in rows for the first and last column via negative margin on <code>.row</code>s.</li>
     <li>The negative margin is why the examples below are outdented. It's so that content within grid columns is lined up with non-grid content.</li>
     <li>Grid columns are created by specifying the number of twelve available columns you wish to span. For example, three equal columns would use three <code>.col-xs-4</code>.</li>
+    <li>If more than 12 columns are placed within a single row, each group of extra columns will, as one unit, wrap onto a new line.</li>
     <li>Grid classes apply to devices with screen widths greater than or equal to the breakpoint sizes, and override grid classes targeted at smaller devices. Therefore, applying any <code>.col-md-</code> class to an element will not only affect its styling on medium devices but also on large devices if a <code>.col-lg-</code> class is not present.</li>
   </ul>
   <p>Look to the examples for applying these principles to your code.</p>
@@ -67,49 +68,49 @@
       </thead>
       <tbody>
         <tr>
-          <th>Grid behavior</th>
+          <th class="text-nowrap">Grid behavior</th>
           <td>Horizontal at all times</td>
           <td colspan="3">Collapsed to start, horizontal above breakpoints</td>
         </tr>
         <tr>
-          <th>Container width</th>
+          <th class="text-nowrap">Container width</th>
           <td>None (auto)</td>
           <td>750px</td>
           <td>970px</td>
           <td>1170px</td>
         </tr>
         <tr>
-          <th>Class prefix</th>
+          <th class="text-nowrap">Class prefix</th>
           <td><code>.col-xs-</code></td>
           <td><code>.col-sm-</code></td>
           <td><code>.col-md-</code></td>
           <td><code>.col-lg-</code></td>
         </tr>
         <tr>
-          <th># of columns</th>
+          <th class="text-nowrap"># of columns</th>
           <td colspan="4">12</td>
         </tr>
         <tr>
-          <th>Column width</th>
+          <th class="text-nowrap">Column width</th>
           <td class="text-muted">Auto</td>
           <td>~62px</td>
           <td>~81px</td>
           <td>~97px</td>
         </tr>
         <tr>
-          <th>Gutter width</th>
+          <th class="text-nowrap">Gutter width</th>
           <td colspan="4">30px (15px on each side of a column)</td>
         </tr>
         <tr>
-          <th>Nestable</th>
+          <th class="text-nowrap">Nestable</th>
           <td colspan="4">Yes</td>
         </tr>
         <tr>
-          <th>Offsets</th>
+          <th class="text-nowrap">Offsets</th>
           <td colspan="4">Yes</td>
         </tr>
         <tr>
-          <th>Column ordering</th>
+          <th class="text-nowrap">Column ordering</th>
           <td colspan="4">Yes</td>
         </tr>
       </tbody>
@@ -252,6 +253,23 @@
   <div class="clearfix visible-xs-block"></div>
   <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
 </div>
+{% endhighlight %}
+
+  <h3 id="grid-example-wrapping">Example: Column wrapping</h3>
+  <p>If more than 12 columns are placed within a single row, each group of extra columns will, as one unit, wrap onto a new line.</p>
+  <div class="bs-docs-grid">
+    <div class="row show-grid">
+      <div class="col-xs-9">.col-xs-9</div>
+      <div class="col-xs-4">.col-xs-4<br>Since 9 + 4 = 13 &gt; 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit.</div>
+      <div class="col-xs-6">.col-xs-6<br>Subsequent columns continue along the new line.</div>
+    </div>
+  </div>
+{% highlight html %}
+<div class="row">
+  <div class="col-xs-9">.col-xs-9</div>
+  <div class="col-xs-4">.col-xs-4<br>Since 9 + 4 = 13 &gt; 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit.</div>
+  <div class="col-xs-6">.col-xs-6<br>Subsequent columns continue along the new line.</div>
+</div>
 {% endhighlight %}
 
   <h3 id="grid-responsive-resets">Responsive column resets</h3>
@@ -329,30 +347,30 @@
 
 
   <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.</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-md-9">
-      Level 1: .col-md-9
+    <div class="col-sm-9">
+      Level 1: .col-sm-9
       <div class="row show-grid">
-        <div class="col-md-6">
-          Level 2: .col-md-6
+        <div class="col-xs-8 col-sm-6">
+          Level 2: .col-xs-8 .col-sm-6
         </div>
-        <div class="col-md-6">
-          Level 2: .col-md-6
+        <div class="col-xs-4 col-sm-6">
+          Level 2: .col-xs-4 .col-sm-6
         </div>
       </div>
     </div>
   </div>
 {% highlight html %}
 <div class="row">
-  <div class="col-md-9">
-    Level 1: .col-md-9
+  <div class="col-sm-9">
+    Level 1: .col-sm-9
     <div class="row">
-      <div class="col-md-6">
-        Level 2: .col-md-6
+      <div class="col-xs-8 col-sm-6">
+        Level 2: .col-xs-8 .col-sm-6
       </div>
-      <div class="col-md-6">
-        Level 2: .col-md-6
+      <div class="col-xs-4 col-sm-6">
+        Level 2: .col-xs-4 .col-sm-6
       </div>
     </div>
   </div>

docs/_includes/css/helpers.html

@@ -40,15 +40,18 @@
 <p class="bg-warning">...</p>
 <p class="bg-danger">...</p>
 {% endhighlight %}
-
+  <div class="bs-callout bs-callout-info">
+    <h4>Dealing with specificity</h4>
+    <p>Sometimes contextual background classes cannot be applied due to the specificity of another selector. In some cases, a sufficient workaround is to wrap your element's content in a <code>&lt;div&gt;</code> with the class.</p>
+  </div>
 
   <h3 id="helper-classes-close">Close icon</h3>
   <p>Use the generic close icon for dismissing content like modals and alerts.</p>
   <div class="bs-example">
-    <p><button type="button" class="close" aria-hidden="true">&times;</button></p>
+    <p><button type="button" class="close"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button></p>
   </div>
 {% highlight html %}
-<button type="button" class="close" aria-hidden="true">&times;</button>
+<button type="button" class="close"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
 {% endhighlight %}
 
 
@@ -113,7 +116,7 @@
 
 
   <h3 id="helper-classes-clearfix">Clearfix</h3>
-  <p>Clear the <code>float</code> on any element with the <code>.clearfix</code> class. Utilizes <a href="http://nicolasgallagher.com/micro-clearfix-hack/">the micro clearfix</a> as popularized by Nicolas Gallagher. Can also be used as a mixin.</p>
+  <p>Easily clear <code>float</code>s by adding <code>.clearfix</code> <strong>to the parent element</strong>. Utilizes <a href="http://nicolasgallagher.com/micro-clearfix-hack/">the micro clearfix</a> as popularized by Nicolas Gallagher. Can also be used as a mixin.</p>
 {% highlight html %}
 <!-- Usage as a class -->
 <div class="clearfix">...</div>

docs/_includes/css/images.html

@@ -3,6 +3,10 @@
 
   <h2 id="images-responsive">Responsive images</h2>
   <p>Images in Bootstrap 3 can be made responsive-friendly via the addition of the <code>.img-responsive</code> class. This applies <code>max-width: 100%;</code> and <code>height: auto;</code> to the image so that it scales nicely to the parent element.</p>
+  <div class="bs-callout bs-callout-warning">
+    <h4>SVG images and IE 8-10</h4>
+    <p>In Internet Explorer IE 8-10, SVG images with <code>.img-responsive</code> are disproportionately sized. To fix this, add <code>width: 100% \9;</code> where necessary. Bootstrap doesn't apply this automatically as it causes complications to other image formats.</p>
+  </div>
 {% highlight html %}
 <img src="..." class="img-responsive" alt="Responsive image">
 {% endhighlight %}

docs/_includes/css/less.html

@@ -7,7 +7,7 @@
 
 
   <h2 id="less-bootstrap">Compiling Bootstrap</h2>
-  <p>Bootstrap can be used in at least two ways: with the compiled CSS or with the source Less files. To compile the Less files, <a href="https://github.com/twbs/bootstrap#compiling-css-and-javascript">visit the README</a> for how to setup your development environment to run the necessary commands.</p>
+  <p>Bootstrap can be used in at least two ways: with the compiled CSS or with the source Less files. To compile the Less files, <a href="../getting-started/#grunt">consult the Getting Started section</a> for how to setup your development environment to run the necessary commands.</p>
   <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>
@@ -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 %}
 
@@ -76,7 +76,7 @@
 {% highlight scss %}
 // Variables
 @link-color:       @brand-primary;
-@link-color-hover: darken(@link-color, 15%);
+@link-hover-color: darken(@link-color, 15%);
 
 // Usage
 a {
@@ -84,12 +84,12 @@ a {
   text-decoration: none;
 
   &:hover {
-    color: @link-color-hover;
+    color: @link-hover-color;
     text-decoration: underline;
   }
 }
 {% endhighlight %}
-  <p>Note that the <code>@link-color-hover</code> uses a function, another awesome tool from Less, to automagically create the right hover color. You can use <code>darken</code>, <code>lighten</code>, <code>saturate</code>, and <code>desaturate</code>.</p>
+  <p>Note that the <code>@link-hover-color</code> uses a function, another awesome tool from Less, to automagically create the right hover color. You can use <code>darken</code>, <code>lighten</code>, <code>saturate</code>, and <code>desaturate</code>.</p>
 
   <h3 id="less-variables-typography">Typography</h3>
   <p>Easily set your type face, text size, leading, and more with a few quick variables. Bootstrap makes use of these as well to provide easy typographic mixins.</p>
@@ -378,10 +378,10 @@ a {
 {% highlight scss %}
 #gradient > .striped(#333; 45deg);
 {% endhighlight %}
-  <p>Up the ante and use three colors instead. Set the first color, the second color, the second color's color stop (a decimal value like 0.25), and the third color with these mixins:</p>
+  <p>Up the ante and use three colors instead. Set the first color, the second color, the second color's color stop (a percentage value like 25%), and the third color with these mixins:</p>
 {% highlight scss %}
-#gradient > .vertical-three-colors(#777; #333; .25; #000);
-#gradient > .horizontal-three-colors(#777; #333; .25; #000);
+#gradient > .vertical-three-colors(#777; #333; 25%; #000);
+#gradient > .horizontal-three-colors(#777; #333; 25%; #000);
 {% endhighlight %}
   <p><strong>Heads up!</strong> Should you ever need to remove a gradient, be sure to remove any IE-specific <code>filter</code> you may have added. You can do that by using the <code>.reset-filter()</code> mixin alongside <code>background-image: none;</code>.</p>
 

docs/_includes/css/responsive-utilities.html

@@ -93,7 +93,7 @@
     </table>
   </div>
 
-  <p>As of v3.2, the <code>.visible-*-*</code> classes for each breakpoint come in three variations, one for each CSS <code>display</code> property value listed below.</p>
+  <p>As of v3.2.0, the <code>.visible-*-*</code> classes for each breakpoint come in three variations, one for each CSS <code>display</code> property value listed below.</p>
   <div class="table-responsive">
     <table class="table table-bordered table-striped">
       <thead>
@@ -119,7 +119,7 @@
     </table>
   </div>
   <p>So, for extra small (<code>xs</code>) screens for example, the available <code>.visible-*-*</code> classes are: <code>.visible-xs-block</code>, <code>.visible-xs-inline</code>, and <code>.visible-xs-inline-block</code>.</p>
-  <p>The classes <code>.visible-xs</code>, <code>.visible-sm</code>, <code>.visible-md</code>, and <code>.visible-lg</code> also exist, but are <strong>deprecated as of v3.2</strong>. They are approximately equivalent to <code>.visible-*-block</code>, except with additional special cases for toggling <code>&lt;table&gt;</code>-related elements.</p>
+  <p>The classes <code>.visible-xs</code>, <code>.visible-sm</code>, <code>.visible-md</code>, and <code>.visible-lg</code> also exist, but are <strong>deprecated as of v3.2.0</strong>. They are approximately equivalent to <code>.visible-*-block</code>, except with additional special cases for toggling <code>&lt;table&gt;</code>-related elements.</p>
 
   <h2 id="responsive-utilities-print">Print classes</h2>
   <p>Similar to the regular responsive classes, use these for toggling content for print.</p>
@@ -150,7 +150,7 @@
       </tbody>
     </table>
   </div>
-  <p>The class <code>.visible-print</code> also exists but is <strong>deprecated</strong> as of v3.1.0. It is approximately equivalent to <code>.visible-print-block</code>, except with additional special cases for <code>&lt;table&gt;</code>-related elements.</p>
+  <p>The class <code>.visible-print</code> also exists but is <strong>deprecated</strong> as of v3.2.0. It is approximately equivalent to <code>.visible-print-block</code>, except with additional special cases for <code>&lt;table&gt;</code>-related elements.</p>
 
 
   <h2 id="responsive-utilities-tests">Test cases</h2>

docs/_includes/css/rtl.html

-<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 in place of 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>
-
-  <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>

docs/_includes/css/tables.html

@@ -348,7 +348,19 @@
 
 
   <h2 id="tables-responsive">Responsive tables</h2>
-  <p>Create responsive tables by wrapping any <code>.table</code> in <code>.table-responsive</code> to make them scroll horizontally up to small devices (under 768px). When viewing on anything larger than 768px wide, you will not see any difference in these tables.</p>
+  <p>Create responsive tables by wrapping any <code>.table</code> in <code>.table-responsive</code> to make them scroll horizontally on small devices (under 768px). When viewing on anything larger than 768px wide, you will not see any difference in these tables.</p>
+
+  <div class="bs-callout bs-callout-warning">
+    <h4>Firefox and fieldsets</h4>
+    <p>Firefox has some awkward fieldset styling involving <code>width</code> that interferes with the responsive table. This cannot be overriden without a Firefox-specific hack that we <strong>don't</strong> provide in Bootstrap:</p>
+{% highlight css %}
+@-moz-document url-prefix() {
+  fieldset { display: table-cell; }
+}
+{% endhighlight %}
+    <p>For more information, read <a href="http://stackoverflow.com/questions/17408815/fieldset-resizes-wrong-appears-to-have-unremovable-min-width-min-content/17863685#17863685">this Stack Overflow answer</a>.</p>
+  </div>
+
   <div class="bs-example">
     <div class="table-responsive">
       <table class="table">

docs/_includes/css/type.html

@@ -107,12 +107,12 @@
   <!-- Inline text elements -->
   <h2 id="type-inline-text">Inline text elements</h2>
   <h3>Marked text</h3>
-  <p>For indicating blocks of text that have been deleted use the <code>&lt;mark&gt;</code> tag.</p>
+  <p>For highlighting a run of text due to its relevance in another context, use the <code>&lt;mark&gt;</code> tag.</p>
   <div class="bs-example">
     <p>You can use the mark tag to <mark>highlight</mark> text.</p>
   </div>
 {% highlight html %}
-<mark>This line of text is meant to be treated as deleted text.</mark>
+You can use the mark tag to <mark>highlight</mark> text.
 {% endhighlight %}
 
 
@@ -146,10 +146,10 @@
   <h3>Underlined text</h3>
   <p>To underline text use the <code>&lt;u&gt;</code> tag.</p>
   <div class="bs-example">
-    <p><u>This line of text is will render as underlined</u></p>
+    <p><u>This line of text will render as underlined</u></p>
   </div>
 {% highlight html %}
-<u>This line of text is will render as underlined</u>
+<u>This line of text will render as underlined</u>
 {% endhighlight %}
 
   <p>Make use of HTML's default emphasis tags with lightweight styles.</p>
@@ -195,14 +195,28 @@
     <p class="text-center">Center aligned text.</p>
     <p class="text-right">Right aligned text.</p>
     <p class="text-justify">Justified text.</p>
+    <p class="text-nowrap">No wrap text.</p>
   </div>
 {% highlight html %}
 <p class="text-left">Left aligned text.</p>
 <p class="text-center">Center aligned text.</p>
 <p class="text-right">Right aligned text.</p>
 <p class="text-justify">Justified text.</p>
+<p class="text-nowrap">No wrap text.</p>
 {% endhighlight %}
 
+  <h2 id="type-transformation">Transformation classes</h2>
+  <p>Transform text in components with text capitalization classes.</p>
+  <div class="bs-example">
+    <p class="text-lowercase">Lowercased text.</p>
+    <p class="text-uppercase">Uppercased text.</p>
+    <p class="text-capitalize">Capitalized text.</p>
+  </div>
+{% highlight html %}
+<p class="text-lowercase">Lowercased text.</p>
+<p class="text-uppercase">Uppercased text.</p>
+<p class="text-capitalize">Capitalized text.</p>
+{% endhighlight %}
 
   <!-- Abbreviations -->
   <h2 id="type-abbreviations">Abbreviations</h2>

docs/_includes/customizer-variables.html

@@ -3,25 +3,29 @@
 <h2 id="colors">Colors</h2>
 <p>Gray and brand colors for use across Bootstrap.</p>
 <div class="row">
+  <div class="bs-customizer-input">
+    <label for="input-@gray-base">@gray-base</label>
+    <input id="input-@gray-base" type="text" value="		  #000" data-var="@gray-base" class="form-control"/>
+  </div>
   <div class="bs-customizer-input">
     <label for="input-@gray-darker">@gray-darker</label>
-    <input id="input-@gray-darker" type="text" value="lighten(#000, 13.5%)" data-var="@gray-darker" class="form-control"/>
+    <input id="input-@gray-darker" type="text" value="lighten(@gray-base, 13.5%)" data-var="@gray-darker" class="form-control"/>
   </div>
   <div class="bs-customizer-input">
     <label for="input-@gray-dark">@gray-dark</label>
-    <input id="input-@gray-dark" type="text" value="lighten(#000, 20%)" data-var="@gray-dark" class="form-control"/>
+    <input id="input-@gray-dark" type="text" value="lighten(@gray-base, 20%)" data-var="@gray-dark" class="form-control"/>
   </div>
   <div class="bs-customizer-input">
     <label for="input-@gray">@gray</label>
-    <input id="input-@gray" type="text" value="lighten(#000, 33.5%)" data-var="@gray" class="form-control"/>
+    <input id="input-@gray" type="text" value="lighten(@gray-base, 33.5%)" data-var="@gray" class="form-control"/>
   </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(@gray-base, 46.7%)" data-var="@gray-light" class="form-control"/>
   </div>
   <div class="bs-customizer-input">
     <label for="input-@gray-lighter">@gray-lighter</label>
-    <input id="input-@gray-lighter" type="text" value="lighten(#000, 93.5%)" data-var="@gray-lighter" class="form-control"/>
+    <input id="input-@gray-lighter" type="text" value="lighten(@gray-base, 93.5%)" data-var="@gray-lighter" class="form-control"/>
   </div>
   <div class="bs-customizer-input">
     <label for="input-@brand-primary">@brand-primary</label>
@@ -502,6 +506,7 @@
   <div class="bs-customizer-input">
     <label for="input-@dropdown-caret-color">@dropdown-caret-color</label>
     <input id="input-@dropdown-caret-color" type="text" value="#000" data-var="@dropdown-caret-color" class="form-control"/>
+    <p class="help-block">Deprecated <code>@dropdown-caret-color</code> as of v3.1.0</p>
   </div>
 </div>
 <h2 id="media-queries-breakpoints">Media queries breakpoints</h2>
@@ -510,18 +515,22 @@
   <div class="bs-customizer-input">
     <label for="input-@screen-xs">@screen-xs</label>
     <input id="input-@screen-xs" type="text" value="480px" data-var="@screen-xs" class="form-control"/>
+    <p class="help-block">Deprecated <code>@screen-xs</code> as of v3.0.1</p>
   </div>
   <div class="bs-customizer-input">
     <label for="input-@screen-xs-min">@screen-xs-min</label>
     <input id="input-@screen-xs-min" type="text" value="@screen-xs" data-var="@screen-xs-min" class="form-control"/>
+    <p class="help-block">Deprecated <code>@screen-xs-min</code> as of v3.2.0</p>
   </div>
   <div class="bs-customizer-input">
     <label for="input-@screen-phone">@screen-phone</label>
     <input id="input-@screen-phone" type="text" value="@screen-xs-min" data-var="@screen-phone" class="form-control"/>
+    <p class="help-block">Deprecated <code>@screen-phone</code> as of v3.0.1</p>
   </div>
   <div class="bs-customizer-input">
     <label for="input-@screen-sm">@screen-sm</label>
     <input id="input-@screen-sm" type="text" value="768px" data-var="@screen-sm" class="form-control"/>
+    <p class="help-block">Deprecated <code>@screen-sm</code> as of v3.0.1</p>
   </div>
   <div class="bs-customizer-input">
     <label for="input-@screen-sm-min">@screen-sm-min</label>
@@ -530,10 +539,12 @@
   <div class="bs-customizer-input">
     <label for="input-@screen-tablet">@screen-tablet</label>
     <input id="input-@screen-tablet" type="text" value="@screen-sm-min" data-var="@screen-tablet" class="form-control"/>
+    <p class="help-block">Deprecated <code>@screen-tablet</code> as of v3.0.1</p>
   </div>
   <div class="bs-customizer-input">
     <label for="input-@screen-md">@screen-md</label>
     <input id="input-@screen-md" type="text" value="992px" data-var="@screen-md" class="form-control"/>
+    <p class="help-block">Deprecated <code>@screen-md</code> as of v3.0.1</p>
   </div>
   <div class="bs-customizer-input">
     <label for="input-@screen-md-min">@screen-md-min</label>
@@ -542,10 +553,12 @@
   <div class="bs-customizer-input">
     <label for="input-@screen-desktop">@screen-desktop</label>
     <input id="input-@screen-desktop" type="text" value="@screen-md-min" data-var="@screen-desktop" class="form-control"/>
+    <p class="help-block">Deprecated <code>@screen-desktop</code> as of v3.0.1</p>
   </div>
   <div class="bs-customizer-input">
     <label for="input-@screen-lg">@screen-lg</label>
     <input id="input-@screen-lg" type="text" value="1200px" data-var="@screen-lg" class="form-control"/>
+    <p class="help-block">Deprecated <code>@screen-lg</code> as of v3.0.1</p>
   </div>
   <div class="bs-customizer-input">
     <label for="input-@screen-lg-min">@screen-lg-min</label>
@@ -554,6 +567,7 @@
   <div class="bs-customizer-input">
     <label for="input-@screen-lg-desktop">@screen-lg-desktop</label>
     <input id="input-@screen-lg-desktop" type="text" value="@screen-lg-min" data-var="@screen-lg-desktop" class="form-control"/>
+    <p class="help-block">Deprecated <code>@screen-lg-desktop</code> as of v3.0.1</p>
   </div>
   <div class="bs-customizer-input">
     <label for="input-@screen-xs-max">@screen-xs-max</label>
@@ -716,7 +730,7 @@
   </div>
   <div class="bs-customizer-input">
     <label for="input-@navbar-inverse-color">@navbar-inverse-color</label>
-    <input id="input-@navbar-inverse-color" type="text" value="@gray-light" data-var="@navbar-inverse-color" class="form-control"/>
+    <input id="input-@navbar-inverse-color" type="text" value="lighten(@gray-light, 12%)" data-var="@navbar-inverse-color" class="form-control"/>
   </div>
   <div class="bs-customizer-input">
     <label for="input-@navbar-inverse-bg">@navbar-inverse-bg</label>
@@ -1690,6 +1704,11 @@
 <h2 id="type">Type</h2>
 <p></p>
 <div class="row">
+  <div class="bs-customizer-input">
+    <label for="input-@component-offset-horizontal">@component-offset-horizontal</label>
+    <input id="input-@component-offset-horizontal" type="text" value="180px" data-var="@component-offset-horizontal" class="form-control"/>
+    <p class="help-block">Horizontal offset for forms and lists.</p>
+  </div>
   <div class="bs-customizer-input">
     <label for="input-@text-muted">@text-muted</label>
     <input id="input-@text-muted" type="text" value="@gray-light" data-var="@text-muted" class="form-control"/>
@@ -1725,19 +1744,15 @@
     <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>
-<h2 id="miscellaneous">Miscellaneous</h2>
-<p></p>
-<div class="row">
+  <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 class="bs-customizer-input">
     <label for="input-@hr-border">@hr-border</label>
     <input id="input-@hr-border" type="text" value="@gray-lighter" data-var="@hr-border" class="form-control"/>
     <p class="help-block">Horizontal line color.</p>
   </div>
-  <div class="bs-customizer-input">
-    <label for="input-@component-offset-horizontal">@component-offset-horizontal</label>
-    <input id="input-@component-offset-horizontal" type="text" value="180px" data-var="@component-offset-horizontal" class="form-control"/>
-    <p class="help-block">Horizontal offset for forms and lists.</p>
-  </div>
 </div>
 <!-- NOTE: DO NOT EDIT THE PRECEDING SECTION DIRECTLY! It is autogenerated via the `build-customizer-html` Grunt task using the customizer-variables.jade template.-->
\ No newline at end of file

docs/_includes/footer.html

@@ -30,9 +30,19 @@
 <!-- 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>
+{% if site.github %}
 <script src="../dist/js/bootstrap.min.js"></script>
+{% else %}
+<script src="../dist/js/bootstrap.js"></script>
+{% endif %}
+{% if site.github %}
 <script src="../assets/js/docs.min.js"></script>
+{% else %}
+<script src="../assets/js/vendor/holder.js"></script>
+<script src="../assets/js/vendor/ZeroClipboard.min.js"></script>
+<script src="../assets/js/src/application.js"></script>
+{% endif %}
 {% if page.slug == "customize" %}
 <script src="../assets/js/customize.min.js"></script>
 {% endif %}

docs/_includes/getting-started/browser-device-support.html

@@ -20,7 +20,7 @@
         <tr>
           <th>Android</th>
           <td class="text-success"><span class="glyphicon glyphicon-ok"></span> <span class="sr-only">Supported</span></td>
-          <td class="text-danger"><span class="glyphicon glyphicon-remove"></span> <span class="sr-only">Not Supported</span></td>
+          <td class="text-success"><span class="glyphicon glyphicon-ok"></span> <span class="sr-only">Supported</span></td>
           <td class="text-muted" rowspan="3" style="vertical-align: middle;">N/A</td>
           <td class="text-danger"><span class="glyphicon glyphicon-remove"></span> <span class="sr-only">Not Supported</span></td>
           <td class="text-muted">N/A</td>
@@ -106,13 +106,16 @@
   <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 %}
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 {% endhighlight %}
   <p>Confirm the document mode by opening the debugging tools: press <kbd>F12</kbd> and check the "Document Mode".</p>
-  <p>This tag is included in all Bootstrap's documentation and examples to ensure the best rendering possible in each supported version of Internet Explorer.</p>
+  <p>This tag is included in all of Bootstrap's documentation and examples to ensure the best rendering possible in each supported version of Internet Explorer.</p>
   <p>See <a href="http://stackoverflow.com/questions/6771258/whats-the-difference-if-meta-http-equiv-x-ua-compatible-content-ie-edge">this StackOverflow question</a> for more information.</p>
 
   <h3 id="support-ie10-width">Internet Explorer 10 in Windows 8 and Windows Phone 8</h3>
@@ -141,7 +144,7 @@ if (navigator.userAgent.match(/IEMobile\/10\.0/)) {
 }
 {% 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>
-  <p>As a heads up, we include this in the Bootstrap docs as an example.</p>
+  <p>As a heads up, we include this in all of Bootstrap's documentation and examples as a demonstration.</p>
 
   <h3 id="support-safari-percentages">Safari percent rounding</h3>
   <p>As of Safari v7.0.1 for OS X and Safari for iOS v7.0.1, Safari's rendering engine has some trouble with the number of decimal places used in our <code>.col-*-1</code> grid classes. So if you have 12 individual grid columns, you'll notice that they come up short compared to other rows of columns. We can't do much here (<a href="https://github.com/twbs/bootstrap/issues/9282">see #9282</a>) but you do have some options:</p>
@@ -155,7 +158,7 @@ if (navigator.userAgent.match(/IEMobile\/10\.0/)) {
   <h4>Overflow and scrolling</h4>
   <p>Support for <code>overflow: hidden</code> on the <code>&lt;body&gt;</code> element is quite limited in iOS and Android. To that end, when you scroll past the top or bottom of a modal in either of those devices' browsers, the <code>&lt;body&gt;</code> content will begin to scroll.</p>
   <h4>Virtual keyboards</h4>
-  <p>Also, note that if you're using inputs in your modal or navbar, iOS has a rendering bug that doesn't update the position of fixed elements when the virtual keyboard is triggered. A few workarounds for this include transforming your elements to <code>position: absolute</code> or invoking a timer on focus to try to correct the positioning manually. This is not handled by Bootstrap, so it is up to you to decide which solution is best for your application.</p>
+  <p>Also, note that if you're using a fixed navbar or using inputs within a modal, iOS has a rendering bug that doesn't update the position of fixed elements when the virtual keyboard is triggered. A few workarounds for this include transforming your elements to <code>position: absolute</code> or invoking a timer on focus to try to correct the positioning manually. This is not handled by Bootstrap, so it is up to you to decide which solution is best for your application.</p>
   <h4>Navbar Dropdowns</h4>
   <p>The <code>.dropdown-backdrop</code> element isn't used on iOS in the nav because of the complexity of z-indexing. Thus, to close dropdowns in navbars, you must directly click the dropdown element (or any other element which will fire a click event in iOS).</p>
 
@@ -173,14 +176,16 @@ 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>
-var nua = navigator.userAgent
-var isAndroid = (nua.indexOf('Mozilla/5.0') > -1 && nua.indexOf('Android ') > -1 && nua.indexOf('AppleWebKit') > -1 && nua.indexOf('Chrome') === -1)
-if (isAndroid) {
-  $('select.form-control').removeClass('form-control').css('width', '100%')
-}
+$(function () {
+  var nua = navigator.userAgent
+  var isAndroid = (nua.indexOf('Mozilla/5.0') > -1 && nua.indexOf('Android ') > -1 && nua.indexOf('AppleWebKit') > -1 && nua.indexOf('Chrome') === -1)
+  if (isAndroid) {
+    $('select.form-control').removeClass('form-control').css('width', '100%')
+  }
+})
 </script>
 {% endhighlight %}
   <p>Want to see an example? <a href="http://jsbin.com/OyaqoDO/2">Check out this JS Bin demo.</a></p>

docs/_includes/getting-started/download.html

@@ -8,21 +8,21 @@
       <h3 id="download-bootstrap">Bootstrap</h3>
       <p>Compiled and minified CSS, JavaScript, and fonts. No docs or original source files are included.</p>
       <p>
-        <a href="{{ site.download.dist }}" class="btn btn-lg btn-outline" role="button" onclick="_gaq.push(['_trackEvent', 'Getting started', 'Download', 'Download compiled']);">Download Bootstrap</a>
+        <a href="{{ site.download.dist }}" class="btn btn-lg btn-outline" role="button" onclick="ga('send', 'event', 'Getting started', 'Download', 'Download compiled');">Download Bootstrap</a>
       </p>
     </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="_gaq.push(['_trackEvent', 'Getting started', 'Download', 'Download source']);">Download source</a>
+        <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>
     </div>
     <div class="col-sm-4">
       <h3 id="download-sass">Sass</h3>
       <p><a href="{{ site.sass_repo }}">Bootstrap ported from Less to Sass</a> for easy inclusion in Rails, Compass, or Sass-only projects.</p>
       <p>
-        <a href="{{ site.download.sass }}" class="btn btn-lg btn-outline" role="button" onclick="_gaq.push(['_trackEvent', 'Getting started', 'Download', 'Download Sass']);">Download Sass</a>
+        <a href="{{ site.download.sass }}" class="btn btn-lg btn-outline" role="button" onclick="ga('send', 'event', 'Getting started', 'Download', 'Download Sass');">Download Sass</a>
       </p>
     </div>
   </div>

docs/_includes/getting-started/examples.html

 <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>
 

docs/_includes/getting-started/grunt.html

+<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>

docs/_includes/getting-started/template.html

@@ -19,15 +19,15 @@
     <!-- 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/libs/html5shiv/3.7.0/html5shiv.js"></script>
-      <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.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>
   <body>
     <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>

docs/_includes/getting-started/translations.html

@@ -3,13 +3,9 @@
 
   <p class="lead">Community members have translated Bootstrap's documentation into various languages. None are officially supported and they 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/fr">Bootstrap en Français (French)</a></li>
-    <li><a href="http://holdirbootstrap.de/">Bootstrap auf Deutsch (German)</a></li>
-    <li><a href="http://bootstrapk.com/BS3/">Bootstrap 한국어 (Korean)</a></li>
-    <li><a href="http://www.oneskyapp.com/docs/bootstrap/ru">Bootstrap по-русски (Russian)</a></li>
-    <li><a href="http://www.oneskyapp.com/docs/bootstrap/es">Bootstrap en Español (Spanish)</a></li>
-    <li><a href="http://twbs.site-konstruktor.com.ua">Bootstrap ua Українською (Ukrainian)</a></li>
+    {% for language in site.data.translations %}
+      <li><a href="{{ language.url }}" hreflang="{{ language.code }}">{{ language.description }} ({{ language.name }})</a></li>
+    {% endfor %}
   </ul>
   <p><strong class="text-danger">We don't help organize or host translations, we just link to them.</strong></p>
   <p>Finished a new or better translation? Open a pull request to add it to our list.</p>

docs/_includes/header.html

@@ -6,7 +6,7 @@
 <meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
 
 <title>
-  {% if page.title == "Bootstrap" %}
+  {% if page.url == site.baseurl %}
     {{ page.title }}
   {% else %}
     {{ page.title }} &middot; Bootstrap
@@ -14,29 +14,47 @@
 </title>
 
 <!-- Bootstrap core CSS -->
+{% if site.github %}
 <link href="../dist/css/bootstrap.min.css" rel="stylesheet">
+{% else %}
+<link href="../dist/css/bootstrap.css" rel="stylesheet">
+{% endif %}
+{% if page.slug == "css" or page.slug == "components" or page.slug == "js" %}
+  <!-- Optional Bootstrap Theme -->
+{% if site.github %}
+  <link href="data:text/css;charset=utf-8," data-href="../dist/css/bootstrap-theme.min.css" rel="stylesheet" id="bs-theme-stylesheet">
+{% else %}
+  <link href="data:text/css;charset=utf-8," data-href="../dist/css/bootstrap-theme.css" rel="stylesheet" id="bs-theme-stylesheet">
+{% endif %}
+{% endif %}
 
 <!-- Documentation extras -->
+{% if site.github %}
 <link href="../assets/css/docs.min.css" rel="stylesheet">
+{% else %}
+<link href="../assets/css/src/docs.css" rel="stylesheet">
+<link href="../assets/css/src/pygments-manni.css" rel="stylesheet">
+{% endif %}
 <!--[if lt IE 9]><script src="../assets/js/ie8-responsive-file-warning.js"></script><![endif]-->
+<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
+<script src="../assets/js/ie10-viewport-bug-workaround.js"></script>
+<script src="../assets/js/ie-emulation-modes-warning.js"></script>
 
 <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
 <!--[if lt IE 9]>
-  <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
-  <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.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="shortcut icon" href="../assets/ico/favicon.ico">
+<link rel="apple-touch-icon-precomposed" href="/apple-touch-icon-precomposed.png">
+<link rel="icon" href="/favicon.ico">
 
 <script>
-  var _gaq = _gaq || [];
-  _gaq.push(['_setAccount', 'UA-146052-10']);
-  _gaq.push(['_trackPageview']);
-  (function() {
-    var ga = document.createElement('script'); ga.async = true;
-    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
-    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
-  })();
+  (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>

docs/_includes/js/affix.html

@@ -7,7 +7,7 @@
   <hr class="bs-docs-separator">
 
   <h2 id="affix-usage">Usage</h2>
-  <p>Use the affix plugin via data attributes or manually with your own JavaScript. <strong>In both situations, you must provide CSS for the positioning of your content.</strong></p>
+  <p>Use the affix plugin via data attributes or manually with your own JavaScript. <strong class="text-danger">In both situations, you must provide CSS for the positioning and width of your affixed content.</strong></p>
 
   <h3>Positioning via CSS</h3>
   <p>The affix plugin toggles between three classes, each representing a particular state: <code>.affix</code>, <code>.affix-top</code>, and <code>.affix-bottom</code>. You must provide the styles for these classes yourself (independent of this plugin) to handle the actual positions.</p>
@@ -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 -->

docs/_includes/js/alerts.html

+<div class="bs-docs-section">
+  <h1 id="alerts" class="page-header">Alert messages <small>alert.js</small></h1>
+
+  <h2 id="alerts-examples">Example alerts</h2>
+  <p>Add dismiss functionality to all alert messages with this plugin.</p>
+  <div class="bs-example">
+    <div class="alert alert-warning 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>
+      <strong>Holy guacamole!</strong> Best check yo self, you're not looking too good.
+    </div>
+  </div><!-- /example -->
+
+  <div class="bs-example">
+    <div class="alert alert-danger 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>
+      <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>
+        <button type="button" class="btn btn-default">Or do this</button>
+      </p>
+    </div>
+  </div><!-- /example -->
+
+
+  <h2 id="alerts-usage">Usage</h2>
+  <p>Enable dismissal of an alert via JavaScript:</p>
+  {% highlight js %}$(".alert").alert(){% endhighlight %}
+
+  <h3>Markup</h3>
+  <p>Just add <code>data-dismiss="alert"</code> to your close button to automatically give an alert close functionality.</p>
+  {% highlight html %}<button type="button" class="close" data-dismiss="alert"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>{% endhighlight %}
+
+  <h3>Methods</h3>
+
+  <h4>$().alert()</h4>
+  <p>Wraps all alerts with close functionality. To have your alerts animate out when closed, make sure they have the <code>.fade</code> and <code>.in</code> class already applied to them.</p>
+
+  <h4>.alert('close')</h4>
+  <p>Closes an alert.</p>
+  {% highlight js %}$(".alert").alert('close'){% endhighlight %}
+
+
+  <h3>Events</h3>
+  <p>Bootstrap's alert class exposes a few events for hooking into alert functionality.</p>
+  <div class="table-responsive">
+    <table class="table table-bordered table-striped">
+      <thead>
+        <tr>
+          <th style="width: 150px;">Event Type</th>
+          <th>Description</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr>
+          <td>close.bs.alert</td>
+          <td>This event fires immediately when the <code>close</code> instance method is called.</td>
+        </tr>
+        <tr>
+          <td>closed.bs.alert</td>
+          <td>This event is fired when the alert has been closed (will wait for CSS transitions to complete).</td>
+        </tr>
+      </tbody>
+    </table>
+  </div><!-- /.table-responsive -->
+{% highlight js %}
+$('#my-alert').on('closed.bs.alert', function () {
+  // do something…
+})
+{% endhighlight %}
+</div>

docs/_includes/js/overview.html

@@ -45,7 +45,7 @@ $('#myModal').modal({ keyboard: false })   // initialized with no keyboard
 $('#myModal').modal('show')                // initializes and invokes show immediately
 {% endhighlight %}
 
-  <p>Each plugin also exposes its raw constructor on a <code>Constructor</code> property: <code>$.fn.popover.Constructor</code>. If you'd like to get a particular plugin instance, retrieve it directly from an element: <code>$('[rel=popover]').data('popover')</code>.</p>
+  <p>Each plugin also exposes its raw constructor on a <code>Constructor</code> property: <code>$.fn.popover.Constructor</code>. If you'd like to get a particular plugin instance, retrieve it directly from an element: <code>$('[rel="popover"]').data('popover')</code>.</p>
 
   <h3 id="js-noconflict">No conflict</h3>
   <p>Sometimes it is necessary to use Bootstrap plugins with other UI frameworks. In these circumstances, namespace collisions can occasionally occur. If this happens, you may call <code>.noConflict</code> on the plugin you wish to revert the value of.</p>

docs/_includes/nav/components.html

@@ -60,6 +60,7 @@
   <a href="#navbar">Navbar</a>
   <ul class="nav">
     <li><a href="#navbar-default">Default navbar</a></li>
+    <li><a href="#navbar-brand-image">Brand image</a></li>
     <li><a href="#navbar-forms">Forms</a></li>
     <li><a href="#navbar-buttons">Buttons</a></li>
     <li><a href="#navbar-text">Text</a></li>
@@ -94,7 +95,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>

docs/_includes/nav/customize.html

@@ -40,7 +40,6 @@
     <li><a href="#close">Close</a></li>
     <li><a href="#code">Code</a></li>
     <li><a href="#type">Type</a></li>
-    <li><a href="#miscellaneous">Miscellaneous</a></li>
   </ul>
 </li>
 <li><a href="#download">Download</a></li>

docs/_includes/nav/javascript.html

@@ -6,6 +6,7 @@
     <li><a href="#js-programmatic-api">Programmatic API</a></li>
     <li><a href="#js-noconflict">No conflict</a></li>
     <li><a href="#js-events">Events</a></li>
+    <li><a href="#callout-third-party-libs">Third-party libraries</a></li>
   </ul>
 </li>
 <li><a href="#transitions">Transitions</a></li>