Merge branch '3.0.0-wip' into bs3_homepage

.gitignore

@@ -33,6 +33,9 @@ nbproject
 *.komodoproject
 .komodotools
 
+# grunt-html-validation
+validation-staus.json
+
 # Folders to ignore
 .hg
 .svn

.travis.yml

@@ -2,4 +2,10 @@ language: node_js
 node_js:
   - 0.8
 before_script:
-  - npm install -g grunt-cli
+  - gem install jekyll
+  - npm install -g grunt-cli
+env:
+  global:
+  - secure: Besg41eyU+2mfxrywQ4ydOShMdc34ImaO0S0ENP+aCOBuyNBIgP59wy5tBMmyai2/8eInYeVps4Td96mWInMMxzTe3Bar7eTLG5tWVKRSr/wc4NBPZ/ppoPAmCEsz9Y+VptRH9/FO8n7hsL9EFZ+xBKbG+C0SccGoyBDpA5j7/w=
+  - secure: Ptiv7phCImFP3ALIz+sMQzrZg8k7C1gLZbFBhWxjnQr3g06wIfX3Ls5y9OHvxid+lOZZjISui3wzBVgpVHqwHUYf96+r0mo6/mJ+F4ffUmShZANVaIMD/JRTnXhUQJbvntGLvxn1EYWPdNM+2IHJrMipnjHxU9tkgAnlel4Zdew=
+  - TWBS_HAVE_OWN_BROWSERSTACK_KEY: ""

CONTRIBUTING.md

@@ -48,7 +48,7 @@ We only accept issues that are bug reports or feature requests. Bugs must be iso
 - Multiple-line approach (one property and value per line)
 - Always a space after a property's colon (.e.g, `display: block;` and not `display:block;`)
 - End all lines with a semi-colon
-- For multiple, comma-separated selectors, place each selector on it's own line
+- For multiple, comma-separated selectors, place each selector on its own line
 - Attribute selectors, like `input[type="text"]` should always wrap the attribute's value in double quotes, for consistency and safety (see this [blog post on unquoted attribute values](http://mathiasbynens.be/notes/unquoted-attribute-values) that can lead to XSS attacks).
 
 ### JS

Gruntfile.js

@@ -1,127 +1,195 @@
 /* jshint node: true */
+
 module.exports = function(grunt) {
-    "use strict";
+  "use strict";
 
-    // Project configuration.
-    grunt.initConfig({
-        // Metadata.
-        pkg: grunt.file.readJSON('package.json'),
-        banner: '/**\n' +
-                '* <%= pkg.name %>.js v<%= pkg.version %> by @fat and @mdo\n' +
-                '* Copyright <%= grunt.template.today("yyyy") %> <%= pkg.author %>\n' +
-                '* <%= _.pluck(pkg.licenses, "url").join(", ") %>\n' +
-                '*/\n',
-        jqueryCheck: 'if (!jQuery) { throw new Error(\"Bootstrap requires jQuery\") }\n\n',
-        // Task configuration.
-        clean: {
-            dist: ['dist']
+  // Project configuration.
+  grunt.initConfig({
+
+    // Metadata.
+    pkg: grunt.file.readJSON('package.json'),
+    banner: '/**\n' +
+              '* <%= pkg.name %>.js v<%= pkg.version %> by @fat and @mdo\n' +
+              '* Copyright <%= grunt.template.today("yyyy") %> <%= pkg.author %>\n' +
+              '* <%= _.pluck(pkg.licenses, "url").join(", ") %>\n' +
+              '*/\n',
+    jqueryCheck: 'if (!jQuery) { throw new Error(\"Bootstrap requires jQuery\") }\n\n',
+
+    // Task configuration.
+    clean: {
+      dist: ['dist']
+    },
+
+    jshint: {
+      options: {
+        jshintrc: 'js/.jshintrc'
+      },
+      gruntfile: {
+        src: 'Gruntfile.js'
+      },
+      src: {
+        src: ['js/*.js']
+      },
+      test: {
+        src: ['js/tests/unit/*.js']
+      }
+    },
+
+    concat: {
+      options: {
+        banner: '<%= banner %><%= jqueryCheck %>',
+        stripBanners: false
+      },
+      bootstrap: {
+        src: [
+          'js/transition.js',
+          'js/alert.js',
+          'js/button.js',
+          'js/carousel.js',
+          'js/collapse.js',
+          'js/dropdown.js',
+          'js/modal.js',
+          'js/tooltip.js',
+          'js/popover.js',
+          'js/scrollspy.js',
+          'js/tab.js',
+          'js/affix.js'
+        ],
+        dest: 'dist/js/<%= pkg.name %>.js'
+      }
+    },
+
+    uglify: {
+      options: {
+        banner: '<%= banner %>'
+      },
+      bootstrap: {
+        src: ['<%= concat.bootstrap.dest %>'],
+        dest: 'dist/js/<%= pkg.name %>.min.js'
+      }
+    },
+
+    recess: {
+      options: {
+        compile: true
+      },
+      bootstrap: {
+        src: ['less/bootstrap.less'],
+        dest: 'dist/css/<%= pkg.name %>.css'
+      },
+      min: {
+        options: {
+          compress: true
         },
-        concat: {
-            options: {
-                banner: '<%= banner %><%= jqueryCheck %>',
-                stripBanners: false
-            },
-            bootstrap: {
-                src: ['js/transition.js', 'js/alert.js', 'js/button.js', 'js/carousel.js', 'js/collapse.js', 'js/dropdown.js', 'js/modal.js', 'js/tooltip.js', 'js/popover.js', 'js/scrollspy.js', 'js/tab.js', 'js/affix.js'],
-                dest: 'dist/js/<%= pkg.name %>.js'
-            }
-        },
-        jshint: {
-            options: {
-                jshintrc: 'js/.jshintrc'
-            },
-            gruntfile: {
-                src: 'Gruntfile.js'
-            },
-            src: {
-                src: ['js/*.js']
-            },
-            test: {
-                src: ['js/tests/unit/*.js']
-            }
-        },
-        recess: {
-            options: {
-                compile: true
-            },
-            bootstrap: {
-                files: {
-                    'dist/css/bootstrap.css': ['less/bootstrap.less']
-                }
-            },
-            min: {
-                options: {
-                    compress: true
-                },
-                files: {
-                    'dist/css/bootstrap.min.css': ['less/bootstrap.less']
-                }
-            }
-        },
-        uglify: {
-            options: {
-                banner: '<%= banner %>'
-            },
-            bootstrap: {
-                files: {
-                    'dist/js/<%= pkg.name %>.min.js': ['<%= concat.bootstrap.dest %>']
-                }
-            }
-        },
-        qunit: {
-            options: {
-                inject: 'js/tests/unit/phantom.js'
-            },
-            files: ['js/tests/*.html']
-        },
-        connect: {
-            server: {
-                options: {
-                    port: 3000,
-                    base: '.'
-                }
-            }
-        },
-        watch: {
-            src: {
-                files: '<%= jshint.src.src %>',
-                tasks: ['jshint:src', 'qunit']
-            },
-            test: {
-                files: '<%= jshint.test.src %>',
-                tasks: ['jshint:test', 'qunit']
-            },
-            recess: {
-                files: 'less/*.less',
-                tasks: ['recess']
-            }
+        src: ['less/bootstrap.less'],
+        dest: 'dist/css/<%= pkg.name %>.min.css'
+      }
+    },
+
+    qunit: {
+      options: {
+        inject: 'js/tests/unit/phantom.js'
+      },
+      files: ['js/tests/*.html']
+    },
+
+    connect: {
+      server: {
+        options: {
+          port: 3000,
+          base: '.'
         }
-    });
+      }
+    },
+
+    jekyll: {
+      docs: {}
+    },
+
+    validation: {
+      options: {
+        reset: true,
+      },
+      files: {
+        src: ["_gh_pages/**/*.html"]
+      }
+    },
+
+    watch: {
+      src: {
+        files: '<%= jshint.src.src %>',
+        tasks: ['jshint:src', 'qunit']
+      },
+      test: {
+        files: '<%= jshint.test.src %>',
+        tasks: ['jshint:test', 'qunit']
+      },
+      recess: {
+        files: 'less/*.less',
+        tasks: ['recess']
+      }
+    }
+  });
 
 
-    // These plugins provide necessary tasks.
-    grunt.loadNpmTasks('grunt-contrib-connect');
-    grunt.loadNpmTasks('grunt-contrib-clean');
-    grunt.loadNpmTasks('grunt-contrib-concat');
-    grunt.loadNpmTasks('grunt-contrib-jshint');
-    grunt.loadNpmTasks('grunt-contrib-uglify');
-    grunt.loadNpmTasks('grunt-contrib-qunit');
-    grunt.loadNpmTasks('grunt-contrib-watch');
-    grunt.loadNpmTasks('grunt-recess');
+  // These plugins provide necessary tasks.
+  grunt.loadNpmTasks('grunt-contrib-clean');
+  grunt.loadNpmTasks('grunt-contrib-concat');
+  grunt.loadNpmTasks('grunt-contrib-connect');
+  grunt.loadNpmTasks('grunt-contrib-jshint');
+  grunt.loadNpmTasks('grunt-contrib-qunit');
+  grunt.loadNpmTasks('grunt-contrib-uglify');
+  grunt.loadNpmTasks('grunt-contrib-watch');
+  grunt.loadNpmTasks('grunt-html-validation');
+  grunt.loadNpmTasks('grunt-jekyll');
+  grunt.loadNpmTasks('grunt-recess');
+  grunt.loadNpmTasks('browserstack-runner');
 
 
-    // Test task.
-    grunt.registerTask('test', ['jshint', 'qunit']);
+  // Docs HTML validation task
+  grunt.registerTask('validate-docs', ['jekyll', 'validation']);
 
-    // JS distribution task.
-    grunt.registerTask('dist-js', ['concat', 'uglify']);
+  // Test task.
+  var testSubtasks = ['jshint', 'qunit', 'validate-docs'];
+  // Only run BrowserStack tests under Travis
+  if (process.env.TRAVIS) {
+    // Only run BrowserStack tests if this is a mainline commit in twbs/bootstrap, or you have your own BrowserStack key
+    if ((process.env.TRAVIS_REPO_SLUG === 'twbs/bootstrap' && process.env.TRAVIS_PULL_REQUEST === 'false') || process.env.TWBS_HAVE_OWN_BROWSERSTACK_KEY) {
+      testSubtasks.push('browserstack_runner');
+    }
+  }
+  grunt.registerTask('test', testSubtasks);
 
-    // CSS distribution task.
-    grunt.registerTask('dist-css', ['recess']);
+  // JS distribution task.
+  grunt.registerTask('dist-js', ['concat', 'uglify']);
 
-    // Full distribution task.
-    grunt.registerTask('dist', ['clean', 'dist-css', 'dist-js']);
+  // CSS distribution task.
+  grunt.registerTask('dist-css', ['recess']);
 
-    // Default task.
-    grunt.registerTask('default', ['test', 'dist']);
+  // Full distribution task.
+  grunt.registerTask('dist', ['clean', 'dist-css', 'dist-js']);
+
+  // Default task.
+  grunt.registerTask('default', ['test', 'dist']);
+
+  // task for building customizer
+  grunt.registerTask('build-customizer', 'Add scripts/less files to customizer.', function () {
+    var fs = require('fs')
+
+    function getFiles(type) {
+      var files = {}
+      fs.readdirSync(type)
+        .filter(function (path) {
+          return new RegExp('\\.' + type + '$').test(path)
+        })
+        .forEach(function (path) {
+          return files[path] = fs.readFileSync(type + '/' + path, 'utf8')
+        })
+      return 'var __' + type + ' = ' + JSON.stringify(files) + '\n'
+    }
+
+    var customize = fs.readFileSync('customize.html', 'utf-8')
+    var files = '<!-- generated -->\n<script id="files">\n' + getFiles('js') + getFiles('less') + '<\/script>\n<!-- /generated -->'
+    fs.writeFileSync('customize.html', customize.replace(/<!-- generated -->(.|[\n\r])*<!-- \/generated -->/, files))
+  });
 };

README.md

@@ -63,13 +63,13 @@ When completed, you'll be able to run the various Grunt commands provided from t
 ### Available Grunt commands
 
 #### Build - `grunt`
-Run `grunt` to run tests locally and compile the CSS and JavaScript into `/dist`. **Requires recess and uglify-js.**
+Run `grunt` to run tests locally and compile the CSS and JavaScript into `/dist`. **Requires [recess](https://github.com/twitter/recess) and [uglify-js](https://github.com/mishoo/UglifyJS).**
 
 #### Only compile CSS and JavaScript - `grunt dist`
-`grunt dist` creates the `/dist` directory with compiled files. **Requires recess and uglify-js.**
+`grunt dist` creates the `/dist` directory with compiled files. **Requires [recess](https://github.com/twitter/recess) and [uglify-js](https://github.com/mishoo/UglifyJS).**
 
 #### Tests - `grunt test`
-Runs jshint and qunit tests headlessly in [phantomjs](http://code.google.com/p/phantomjs/) (used for ci). **Requires phantomjs.**
+Runs jshint and qunit tests headlessly in [phantomjs](https://github.com/ariya/phantomjs/) (used for CI). **Requires [phantomjs](https://github.com/ariya/phantomjs/).**
 
 #### Watch - `grunt watch`
 This is a convenience method for watching just Less files and automatically building them whenever you save.

_config.yml

@@ -13,10 +13,7 @@ port:             9001
 # Custom vars
 repo:             https://github.com/twbs/bootstrap
 download:         https://github.com/twbs/bootstrap/archive/3.0.0-wip.zip
-download_dist:    http://getbootstrap.com/bs-v3.0.0-rc1-dist.zip
-
-examples:         http://examples.getbootstrap.com
-examples_repo:    https://github.com/twbs/bootstrap-examples
+download_dist:    http://getbootstrap.com/bs-v3.0.0-rc.2-dist.zip
 
 glyphicons:       http://glyphicons.getbootstrap.com
 glyphicons_repo:  https://github.com/twbs/bootstrap-glyphicons
@@ -24,5 +21,5 @@ glyphicons_repo:  https://github.com/twbs/bootstrap-glyphicons
 blog:             http://blog.getbootstrap.com
 expo:             http://expo.getbootstrap.com
 
-cdn_css:          //netdna.bootstrapcdn.com/bootstrap/3.0.0-rc1/css/bootstrap.min.css
-cdn_js:           //netdna.bootstrapcdn.com/bootstrap/3.0.0-rc1/js/bootstrap.min.js
+cdn_css:          //netdna.bootstrapcdn.com/bootstrap/3.0.0-wip/css/bootstrap.min.css
+cdn_js:           //netdna.bootstrapcdn.com/bootstrap/3.0.0-wip/js/bootstrap.min.js

_includes/ads.html

@@ -1 +1 @@
-<div id="carbonads-container"><div class="carbonad"><div id="azcarbon"></div><script type="text/javascript">var z = document.createElement("script"); z.type = "text/javascript"; z.async = true; z.src = "http://engine.carbonads.com/z/32341/azcarbon_2_1_0_HORIZ"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(z, s);</script></div></div>
+<div id="carbonads-container"><div class="carbonad"><div id="azcarbon"></div><script>var z = document.createElement("script"); z.async = true; z.src = "http://engine.carbonads.com/z/32341/azcarbon_2_1_0_HORIZ"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(z, s);</script></div></div>

_includes/footer.html

@@ -4,18 +4,25 @@
 <script src="{{ page.base_url }}assets/js/jquery.js"></script>
 <script src="{{ page.base_url }}dist/js/bootstrap.js"></script>
 
-<script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
+<script src="http://platform.twitter.com/widgets.js"></script>
 <script src="{{ page.base_url }}assets/js/holder.js"></script>
 
 <script src="{{ page.base_url }}assets/js/application.js"></script>
 
+{% if page.slug == "customize" %}
+<script src="{{ page.base_url }}assets/js/less.js"></script>
+<script src="{{ page.base_url }}assets/js/jszip.js"></script>
+<script src="{{ page.base_url }}assets/js/uglify.js"></script>
+<script src="{{ page.base_url }}assets/js/jquery.bbq.min.js"></script>
+<script src="{{ page.base_url }}assets/js/customizer.js"></script>
+{% endif %}
+
 <!-- Analytics
 ================================================== -->
 <script>
   var _gauges = _gauges || [];
   (function() {
     var t   = document.createElement('script');
-    t.type  = 'text/javascript';
     t.async = true;
     t.id    = 'gauges-tracker';
     t.setAttribute('data-site-id', '4f0dc9fef5a1f55508000013');

_includes/header.html

@@ -31,12 +31,12 @@
                 <link rel="apple-touch-icon-precomposed" href="{{ page.base_url }}assets/ico/apple-touch-icon-57-precomposed.png">
                                <link rel="shortcut icon" href="{{ page.base_url }}assets/ico/favicon.png">
 
-<script type="text/javascript">
+<script>
   var _gaq = _gaq || [];
   _gaq.push(['_setAccount', 'UA-146052-10']);
   _gaq.push(['_trackPageview']);
   (function() {
-    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+    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);
   })();

_includes/nav-components.html

@@ -12,6 +12,8 @@
   <ul class="nav">
     <li><a href="#btn-groups-single">Basic button group</a></li>
     <li><a href="#btn-groups-toolbar">Button toolbar</a></li>
+    <li><a href="#btn-groups-sizing">Button group sizing</a></li>
+    <li><a href="#btn-groups-nested">Nested button groups</a></li>
     <li><a href="#btn-groups-vertical">Vertical variation</a></li>
     <li><a href="#btn-groups-justified">Justified link buttons</a></li>
   </ul>
@@ -50,9 +52,7 @@
 <li>
   <a href="#navbar">Navbar</a>
   <ul class="nav">
-    <li><a href="#navbar-basic">Basic navbar</a></li>
-    <li><a href="#navbar-nav">Nav links</a></li>
-    <li><a href="#navbar-forms">Forms in navbars</a></li>
+    <li><a href="#navbar-default">Default navbar</a></li>
     <li><a href="#navbar-buttons">Buttons in navbars</a></li>
     <li><a href="#navbar-text">Text in navbars</a></li>
     <li><a href="#navbar-links">Links in navbars</a></li>
@@ -60,7 +60,7 @@
     <li><a href="#navbar-fixed-top">Fixed top navbar</a></li>
     <li><a href="#navbar-fixed-bottom">Fixed bottom navbar</a></li>
     <li><a href="#navbar-static-top">Static top navbar</a></li>
-    <li><a href="#navbar-responsive">Responsive navbar</a></li>
+    <li><a href="#navbar-inverted">Inverted navbar</a></li>
   </ul>
 </li>
 <li><a href="#breadcrumbs">Breadcrumbs</a></li>
@@ -80,13 +80,19 @@
     <li><a href="#type-components-page-header">Page header</a></li>
   </ul>
 </li>
-<li><a href="#thumbnails">Thumbnails</a></li>
+<li>
+  <a href="#thumbnails">Thumbnails</a>
+  <ul class="nav">
+    <li><a href="#thumbnails-default">Default thumbnails</a></li>
+    <li><a href="#thumbnails-custom-content">Custom content</a></li>
+  </ul>
+</li>
 <li>
   <a href="#alerts">Alerts</a>
   <ul class="nav">
     <li><a href="#alerts-default">Default alert</a></li>
-    <li><a href="#alerts-block">Block alerts</a></li>
     <li><a href="#alerts-alternatives">Contextual alternatives</a></li>
+    <li><a href="#alerts-dismissable">Dismissable alerts</a></li>
     <li><a href="#alerts-links">Links in alerts</a></li>
   </ul>
 </li>
@@ -100,7 +106,13 @@
     <li><a href="#progress-stacked">Stacked</a></li>
   </ul>
 </li>
-<li><a href="#media">Media object</a></li>
+<li>
+  <a href="#media">Media object</a>
+  <ul class="nav">
+    <li><a href="#media-default">Default media</a></li>
+    <li><a href="#media-list">Media list</a></li>
+  </ul>
+</li>
 <li>
   <a href="#list-group">List group</a>
   <ul class="nav">

_includes/nav-css.html

@@ -15,10 +15,12 @@
 <li>
   <a href="#grid">Grid system</a>
   <ul class="nav">
+    <li><a href="#grid-media-queries">Media queries</a></li>
     <li><a href="#grid-options">Available options</a></li>
     <li><a href="#grid-example-basic">Ex: Stacked-to-horizonal</a></li>
     <li><a href="#grid-example-mixed">Ex: Mobile-desktop</a></li>
     <li><a href="#grid-example-mixed-complete">Ex: Mobile, tablet, desktop</a></li>
+    <li><a href="#grid-responsive-resets">Responsive column resets</a></li>
     <li><a href="#grid-offsetting">Offset columns</a></li>
     <li><a href="#grid-nesting">Nested columns</a></li>
     <li><a href="#grid-column-ordering">Column ordering</a></li>
@@ -46,7 +48,7 @@
     <li><a href="#tables-bordered">Bordered tables</a></li>
     <li><a href="#tables-hover-rows">Hover rows</a></li>
     <li><a href="#tables-condensed">Condensed tables</a></li>
-    <li><a href="#tables-row-classes">Contextual row classes</a></li>
+    <li><a href="#tables-contextual-classes">Contextual classes</a></li>
   </ul>
 </li>
 <li>
@@ -56,6 +58,7 @@
     <li><a href="#forms-inline">Inline variation</a></li>
     <li><a href="#forms-horizontal">Horizontal variation</a></li>
     <li><a href="#forms-controls">Supported controls</a></li>
+    <li><a href="#forms-controls-static">Static form control</a></li>
     <li><a href="#forms-control-states">Control states</a></li>
     <li><a href="#forms-control-sizes">Control sizing</a></li>
     <li><a href="#forms-help-text">Help text</a></li>

_includes/nav-getting-started.html

@@ -11,12 +11,24 @@
 <li>
   <a href="#template">Basic template</a>
 </li>
+<li>
+  <a href="#examples">Examples</a>
+</li>
+<li>
+  <a href="#disable-responsive">Disabling responsiveness</a>
+</li>
 <li>
   <a href="#browsers">Browser support</a>
 </li>
+<li>
+  <a href="#third-parties">Third party support</a>
+</li>
+<li>
+  <a href="#accessibility">Accessibility</a>
+</li>
 <li>
   <a href="#license-faqs">License FAQs</a>
 </li>
 <li>
   <a href="#customizing">Customizing Bootstrap</a>
-</li>
+</li>

_includes/nav-main.html

@@ -1,12 +1,15 @@
-<div class="navbar navbar-inverse navbar-fixed-top bs-docs-nav">
+<header class="navbar navbar-inverse navbar-fixed-top bs-docs-nav" role="banner">
   <div class="container">
-    <a href="{{ page.base_url }}" class="navbar-brand">Bootstrap 3 RC1</a>
-    <button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".bs-navbar-collapse">
-      <span class="icon-bar"></span>
-      <span class="icon-bar"></span>
-      <span class="icon-bar"></span>
-    </button>
-    <div class="nav-collapse collapse bs-navbar-collapse">
+    <div class="navbar-header">
+      <button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".bs-navbar-collapse">
+        <span class="sr-only">Toggle navigation</span>
+        <span class="icon-bar"></span>
+        <span class="icon-bar"></span>
+        <span class="icon-bar"></span>
+      </button>
+      <a href="{{ page.base_url }}" class="navbar-brand">Bootstrap 3 RC2</a>
+    </div>
+    <nav class="collapse navbar-collapse bs-navbar-collapse" role="navigation">
       <ul class="nav navbar-nav">
         <li{% if page.slug == "getting-started" %} class="active"{% endif %}>
           <a href="{{ page.base_url }}getting-started">Getting started</a>
@@ -24,6 +27,6 @@
           <a href="{{ page.base_url }}customize">Customize</a>
         </li>
       </ul>
-    </div>
+    </nav>
   </div>
-</div>
+</header>

_includes/social-buttons.html

@@ -1,16 +1,16 @@
 <div class="bs-social">
   <ul class="bs-social-buttons">
     <li>
-      <iframe class="github-btn" src="http://ghbtns.com/github-btn.html?user=twbs&repo=bootstrap&type=watch&count=true" allowtransparency="true" frameborder="0" scrolling="0" width="100px" height="20px"></iframe>
+      <iframe class="github-btn" src="http://ghbtns.com/github-btn.html?user=twbs&amp;repo=bootstrap&amp;type=watch&amp;count=true" width="100" height="20" title="Star on GitHub"></iframe>
     </li>
     <li>
-      <iframe class="github-btn" src="http://ghbtns.com/github-btn.html?user=twbs&repo=bootstrap&type=fork&count=true" allowtransparency="true" frameborder="0" scrolling="0" width="102px" height="20px"></iframe>
+      <iframe class="github-btn" src="http://ghbtns.com/github-btn.html?user=twbs&amp;repo=bootstrap&amp;type=fork&amp;count=true" width="102" height="20" title="Fork on GitHub"></iframe>
     </li>
     <li class="follow-btn">
       <a href="https://twitter.com/twbootstrap" class="twitter-follow-button" data-link-color="#0069D6" data-show-count="true">Follow @twbootstrap</a>
     </li>
     <li class="tweet-btn">
-      <a href="https://twitter.com/share" class="twitter-share-button" data-url="http://twbs.github.com/bootstrap/" data-count="horizontal" data-via="twbootstrap" data-related="mdo:Creator of Twitter Bootstrap">Tweet</a>
+      <a href="https://twitter.com/share" class="twitter-share-button" data-url="http://getbootstrap.com/" data-count="horizontal" data-via="twbootstrap" data-related="mdo:Creator of Twitter Bootstrap">Tweet</a>
     </li>
   </ul>
 </div>

_layouts/customize.html

@@ -6,12 +6,13 @@
     <!-- Place anything custom after this. -->
   </head>
   <body data-spy="scroll" data-target=".bs-sidebar">
+    <a class="sr-only" href="#content">Skip navigation</a>
 
     <!-- Docs master nav -->
     {% include nav-main.html %}
 
     <!-- Docs page layout -->
-    <div class="bs-header">
+    <div class="bs-header" id="content" role="banner">
       <div class="container">
         <h1>{{ page.title }}</h1>
         <p>{{ page.lead }}</p>
@@ -22,9 +23,9 @@
     <!-- Callout for the old docs link -->
     {% include old-bs-docs.html %}
 
-    <div class="bs-customize-placeholder">
-      <div class="container bs-docs-container">
-        <p class="lead">Until RC2, the Bootstrap 3 customizer will be disabled. In the mean time, snag the <a href="{{ site.repo }}/releases">compiled CSS and JavaScript</a>. Hang tight!</p>
+    <div class="container bs-docs-container">
+      <div class="col-lg-12">
+        {{ content }}
       </div>
     </div>
 

_layouts/default.html

@@ -6,12 +6,13 @@
     <!-- Place anything custom after this. -->
   </head>
   <body>
+    <a class="sr-only" href="#content">Skip navigation</a>
 
     <!-- Docs master nav -->
     {% include nav-main.html %}
 
     <!-- Docs page layout -->
-    <div class="bs-header">
+    <div class="bs-header" id="content">
       <div class="container">
         <h1>{{ page.title }}</h1>
         <p>{{ page.lead }}</p>
@@ -24,8 +25,8 @@
 
     <div class="container bs-docs-container">
       <div class="row">
-        <div class="col-lg-3">
-          <div class="bs-sidebar">
+        <div class="col-md-3">
+          <div class="bs-sidebar hidden-print" role="complementary">
             <ul class="nav bs-sidenav">
               {% if page.slug == "getting-started" %}
                 {% include nav-getting-started.html %}
@@ -41,7 +42,7 @@
             </ul>
           </div>
         </div>
-        <div class="col-lg-9">
+        <div class="col-md-9" role="main">
           {{ content }}
         </div>
       </div>
@@ -50,7 +51,7 @@
 
     <!-- Footer
     ================================================== -->
-    <footer class="bs-footer">
+    <footer class="bs-footer" role="contentinfo">
       {% include social-buttons.html %}
 
       <p>Designed and built with all the love in the world by <a href="http://twitter.com/mdo" target="_blank">@mdo</a> and <a href="http://twitter.com/fat" target="_blank">@fat</a>.</p>

_layouts/home.html

@@ -6,6 +6,7 @@
     <!-- Place anything custom after this. -->
   </head>
   <body class="bs-docs-home">
+    <a class="sr-only" href="#content">Skip navigation</a>
 
     <!-- Docs master nav -->
     {% include nav-main.html %}
@@ -16,7 +17,7 @@
     <!-- Callout for the old docs link -->
     {% include old-bs-docs.html %}
 
-    <div class="container">
+    <footer class="container" role="contentinfo">
       {% include social-buttons.html %}
 
       <ul class="bs-masthead-links">
@@ -24,7 +25,7 @@
           <a href="{{ site.repo }}" onclick="_gaq.push(['_trackEvent', 'Jumbotron actions', 'Jumbotron links', 'GitHub project']);">GitHub project</a>
         </li>
         <li>
-          <a href="{{ site.examples }}" onclick="_gaq.push(['_trackEvent', 'Jumbotron actions', 'Jumbotron links', 'Examples']);">Examples</a>
+          <a href="../getting-started#examples" onclick="_gaq.push(['_trackEvent', 'Jumbotron actions', 'Jumbotron links', 'Examples']);">Examples</a>
         </li>
         <li>
           <a href="{{ site.glyphicons }}" onclick="_gaq.push(['_trackEvent', 'Jumbotron actions', 'Jumbotron links', 'Glyphicons']);">Glyphicons</a>
@@ -33,7 +34,7 @@
           <a href="{{ site.expo }}" onclick="_gaq.push(['_trackEvent', 'Jumbotron actions', 'Jumbotron links', 'Expo']);">Bootstrap Expo</a>
         </li>
       </ul>
-    </div>
+    </footer>
 
     <!-- JS and analytics only. -->
     {% include footer.html %}

assets/css/docs.css

@@ -55,6 +55,10 @@ body {
 
 .bs-docs-nav {
   background-color: #563d7c;
+  border-color: #463265;
+}
+.bs-docs-nav .navbar-collapse {
+  border-color: #463265;
 }
 .bs-docs-nav .navbar-brand {
   color: #fff;
@@ -127,8 +131,8 @@ body {
 
 /* Download button */
 .bs-masthead .btn-outline {
-  margin-top: 5px;
-  margin-bottom: 5px;
+  margin-top: 20px;
+  margin-bottom: 20px;
   padding: 18px 24px;
   font-size: 21px;
 }
@@ -178,6 +182,7 @@ body {
   margin-top: 15px;
 }
 .bs-customizer input[type="text"] {
+  font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
   background-color: #fafafa;
 }
 .bs-customizer .help-block {
@@ -188,6 +193,10 @@ body {
   text-align: center;
 }
 
+#less-section label {
+  font-weight: normal;
+}
+
 
 
 /* Docs pages and sections
@@ -213,7 +222,7 @@ body {
 }
 
 .bs-docs-section + .bs-docs-section {
-  margin-top: 80px;
+  padding-top: 80px;
 }
 
 /* Ads in page headers */
@@ -343,6 +352,17 @@ body {
 }
 
 
+/* Examples grid
+-------------------------------------------------- */
+
+.bs-examples h4 {
+  margin-bottom: 5px;
+}
+.bs-examples p {
+  margin-bottom: 20px;
+}
+
+
 
 /* Special grid styles
 -------------------------------------------------- */
@@ -368,7 +388,7 @@ body {
 .bs-example {
   position: relative;
   padding: 45px 15px 15px;
-  margin: 0 -15px -1px;
+  margin: 0 -15px 15px;
   background-color: #fafafa;
   box-shadow: inset 0 3px 6px rgba(0,0,0,.05);
   border-color: #e5e5e5 #eee #eee;
@@ -389,11 +409,10 @@ body {
 }
 
 /* Tweak display of the examples */
-.bs-example + .prettyprint,
 .bs-example + .highlight {
-  margin-top: 0;
-  border-top-left-radius: 0;
-  border-top-right-radius: 0;
+  margin: -15px -15px 15px;
+  border-radius: 0;
+  border-width: 0 0 1px;
 }
 
 /* Tweak content of examples for optimum awesome */
@@ -401,16 +420,15 @@ body {
 .bs-example > ul:last-child,
 .bs-example > ol:last-child,
 .bs-example > blockquote:last-child,
-.bs-example > input:last-child,
-.bs-example > select:last-child,
-.bs-example > textarea:last-child,
+.bs-example > .form-control:last-child,
 .bs-example > .table:last-child,
 .bs-example > .navbar:last-child
 .bs-example > .jumbotron:last-child,
 .bs-example > .alert:last-child,
 .bs-example > .panel:last-child,
 .bs-example > .list-group:last-child,
-.bs-example > .well:last-child {
+.bs-example > .well:last-child,
+.bs-example > .progress:last-child {
   margin-bottom: 0;
 }
 .bs-example > p > .close {
@@ -418,17 +436,15 @@ body {
 }
 
 /* Typography */
-.bs-example-type .table td {
+.bs-example-type .table td:last-child {
   color: #999;
   vertical-align: middle;
 }
-.bs-example-type .table td,
-.bs-example-type .table th {
+.bs-example-type .table td {
   padding: 15px 0;
   border-color: #eee;
 }
-.bs-example-type .table tr:first-child td,
-.bs-example-type .table tr:first-child th {
+.bs-example-type .table tr:first-child td {
   border-top: 0;
 }
 .bs-example-type h1,
@@ -440,12 +456,24 @@ body {
   margin: 0;
 }
 
-/* Forms */
-.bs-example.form-inline select,
-.bs-example.form-inline input[type="text"],
-.bs-example.form-inline input[type="password"] {
-  width: 180px;
+/* Images */
+.bs-example > .img-circle,
+.bs-example > .img-rounded,
+.bs-example > .img-thumbnail {
+  margin: 5px;
 }
+
+/* Buttons */
+.bs-example > .btn,
+.bs-example > .btn-group {
+  margin-top: 5px;
+  margin-bottom: 5px;
+}
+.bs-example > .btn-toolbar + .btn-toolbar {
+  margin-top: 10px;
+}
+
+/* Forms */
 .bs-example-control-sizing select,
 .bs-example-control-sizing input[type="text"] + input[type="text"] {
   margin-top: 10px;
@@ -453,6 +481,9 @@ body {
 .bs-example-form .input-group {
   margin-bottom: 10px;
 }
+.bs-example > textarea.form-control {
+  resize: vertical;
+}
 
 /* List groups */
 .bs-example > .list-group {
@@ -467,7 +498,6 @@ body {
 .bs-navbar-bottom-example {
   z-index: 1;
   padding: 0;
-  min-height: 110px;
   overflow: hidden; /* cut the drop shadows off */
 }
 .bs-navbar-top-example .navbar-fixed-top,
@@ -476,33 +506,35 @@ body {
   margin-left: 0;
   margin-right: 0;
 }
-.bs-navbar-top-example .navbar-fixed-top {
-  top: -1px;
-}
-.bs-navbar-bottom-example .navbar-fixed-bottom {
-  bottom: -1px;
-}
 .bs-navbar-top-example {
-  -webkit-border-radius: 0 0 4px 4px;
-     -moz-border-radius: 0 0 4px 4px;
-          border-radius: 0 0 4px 4px;
+  padding-bottom: 45px;
 }
 .bs-navbar-top-example:after {
   top: auto;
   bottom: 15px;
-  -webkit-border-radius: 0 4px 0 4px;
-     -moz-border-radius: 0 4px 0 4px;
-          border-radius: 0 4px 0 4px;
+}
+.bs-navbar-top-example .navbar-fixed-top {
+  top: -1px;
 }
 .bs-navbar-bottom-example {
-  -webkit-border-radius: 4px 4px 0 0;
-     -moz-border-radius: 4px 4px 0 0;
-          border-radius: 4px 4px 0 0;
+  padding-top: 45px;
+}
+.bs-navbar-bottom-example .navbar-fixed-bottom {
+  bottom: -1px;
 }
 .bs-navbar-bottom-example .navbar {
   margin-bottom: 0;
 }
 
+@media (min-width: 768px) {
+  .bs-navbar-top-example {
+    border-radius: 0 0 4px 4px;
+  }
+  .bs-navbar-bottom-example {
+    border-radius: 4px 4px 0 0;
+  }
+}
+
 /* Example modals */
 .bs-example-modal {
   background-color: #f5f5f5;
@@ -523,19 +555,11 @@ body {
 }
 
 /* Example dropdowns */
-.bs-example > .dropdown > .dropdown-menu,
-.bs-example-submenu > .pull-left > .dropup > .dropdown-menu,
-.bs-example-submenu > .pull-left > .dropdown > .dropdown-menu {
+.bs-example > .dropdown > .dropdown-menu {
   position: static;
   display: block;
   margin-bottom: 5px;
 }
-.bs-example-submenu {
-  min-height: 230px;
-}
-.bs-example-submenu > .pull-left + .pull-left {
-  margin-left: 20px;
-}
 
 /* Example tabbable tabs */
 .bs-example-tabs .nav-tabs {
@@ -546,6 +570,10 @@ body {
 .bs-example-tooltips {
   text-align: center;
 }
+.bs-example-tooltips > .btn {
+  margin-top: 5px;
+  margin-bottom: 5px;
+}
 
 /* Popovers */
 .bs-example-popover {
@@ -561,19 +589,6 @@ body {
 }
 
 
-
-/* Example templates
--------------------------------------------------- */
-
-.bs-examples h4 {
-  margin-bottom: 5px;
-}
-.bs-examples p {
-  margin-bottom: 20px;
-}
-
-
-
 /* Responsive docs
 -------------------------------------------------- */
 
@@ -607,6 +622,10 @@ body {
     border-bottom: 0;
   }
 }
+.bs-table-scrollable .highlight pre {
+  white-space: normal;
+}
+
 
 /* Related: responsive utilities tables */
 .table code {
@@ -641,17 +660,9 @@ body {
 ------------------------- */
 .responsive-utilities-test {
   margin-top: 5px;
-  padding-left: 0;
-  list-style: none;
-  overflow: hidden; /* clear floats */
 }
-.responsive-utilities-test li {
-  position: relative;
-  float: left;
-  width: 25%;
-}
-.responsive-utilities-test li + li {
-  margin-left: 10px;
+.responsive-utilities-test .col-xs-6 {
+  margin-bottom: 10px;
 }
 .responsive-utilities-test span {
   padding: 15px 10px;
@@ -661,13 +672,25 @@ body {
   text-align: center;
   border-radius: 4px;
 }
-.responsive-utilities-test.visible-on [class*="hidden"],
-.responsive-utilities-test.hidden-on [class*="visible"] {
+.visible-on .col-xs-6 .hidden-xs,
+.visible-on .col-xs-6 .hidden-sm,
+.visible-on .col-xs-6 .hidden-md,
+.visible-on .col-xs-6 .hidden-lg,
+.hidden-on .col-xs-6 .visible-xs,
+.hidden-on .col-xs-6 .visible-sm,
+.hidden-on .col-xs-6 .visible-md,
+.hidden-on .col-xs-6 .visible-lg {
   color: #999;
   border: 1px solid #ddd;
 }
-.responsive-utilities-test.visible-on [class*="visible"],
-.responsive-utilities-test.hidden-on [class*="hidden"] {
+.visible-on .col-xs-6 .visible-xs,
+.visible-on .col-xs-6 .visible-sm,
+.visible-on .col-xs-6 .visible-md,
+.visible-on .col-xs-6 .visible-lg,
+.hidden-on .col-xs-6 .hidden-xs,
+.hidden-on .col-xs-6 .hidden-sm,
+.hidden-on .col-xs-6 .hidden-md,
+.hidden-on .col-xs-6 .hidden-lg {
   color: #468847;
   background-color: #dff0d8;
   border: 1px solid #d6e9c6;
@@ -724,6 +747,11 @@ body {
 .bs-social-buttons .twitter-share-button {
   width: 98px !important;
 }
+/* Style the GitHub buttons via CSS instead of inline attributes */
+.github-btn {
+  border: 0;
+  overflow: hidden;
+}
 
 
 
@@ -731,7 +759,7 @@ body {
 -------------------------------------------------- */
 
 /* Pseudo :focus state for showing how it looks in the docs */
-input.focused {
+#focusedInput {
   border-color: rgba(82,168,236,.8);
   outline: 0;
   outline: thin dotted \9; /* IE6-9 */
@@ -813,6 +841,15 @@ input.focused {
     border-radius: 4px 4px 0 0;
     box-shadow: none;
   }
+  .bs-example + .prettyprint,
+  .bs-example + .highlight {
+    margin-top: -16px;
+    margin-left: 0;
+    margin-right: 0;
+    border-width: 1px;
+    border-bottom-left-radius: 4px;
+    border-bottom-right-radius: 4px;
+  }
 
   .carbonad {
     margin: 0 !important;
@@ -824,10 +861,6 @@ input.focused {
   .bs-sidebar {
     display: block;
   }
-  /* Show the hidden subnavs when space allows it */
-  .bs-sidebar .nav > .active > ul {
-    display: block;
-  }
 
   /* Tweak display of docs jumbotrons */
   .bs-masthead {
@@ -837,7 +870,7 @@ input.focused {
   .bs-masthead h1 {
     font-size: 100px;
   }
-  .bs-masthead p {
+  .bs-masthead .lead {
     margin-left: 15%;
     margin-right: 15%;
     font-size: 30px;
@@ -852,7 +885,23 @@ input.focused {
 
 /* Tablets/desktops and up */
 @media screen and (min-width: 992px) {
+  .bs-header h1,
+  .bs-header p {
+    margin-right: 380px;
+  }
+  .carbonad {
+    position: absolute;
+    top: 20px;
+    right: 0;
+    padding: 15px !important;
+    width: 330px !important;
+    min-height: 132px;
+  }
 
+  /* Show the hidden subnavs when space allows it */
+  .bs-sidebar .nav > .active > ul {
+    display: block;
+  }
   /* Widen the fixed sidebar */
   .bs-sidebar.affix,
   .bs-sidebar.affix-bottom {
@@ -870,19 +919,6 @@ input.focused {
     margin-top: 0;
     margin-bottom: 0;
   }
-  .bs-header h1,
-  .bs-header p {
-    margin-right: 380px;
-  }
-  .carbonad {
-    position: absolute;
-    top: 20px;
-    right: 0;
-    padding: 15px !important;
-    width: 330px !important;
-    min-height: 132px;
-  }
-
 }
 
 /* Large desktops and up */
@@ -891,7 +927,7 @@ input.focused {
   /* Widen the fixed sidebar again */
   .bs-sidebar.affix-bottom,
   .bs-sidebar.affix {
-    width: 270px;
+    width: 263px;
   }
 
 }

assets/js/application.js

@@ -16,16 +16,12 @@
       offset: navHeight
     })
 
-    $('.bs-docs-container [href=#]').click(function (e) {
-      e.preventDefault()
+    $window.on('load', function () {
+      $body.scrollspy('refresh')
     })
 
-    $body.on('click', '.bs-sidenav [href^=#]', function (e) {
-      var $target = $(this.getAttribute('href'))
-
-      e.preventDefault() // prevent browser scroll
-
-      $window.scrollTop($target.offset().top - navHeight + 5)
+    $('.bs-docs-container [href=#]').click(function (e) {
+      e.preventDefault()
     })
 
     // back to top
@@ -54,7 +50,8 @@
 
     // tooltip demo
     $('.tooltip-demo').tooltip({
-      selector: "[data-toggle=tooltip]"
+      selector: "[data-toggle=tooltip]",
+      container: "body"
     })
 
     $('.tooltip-test').tooltip()
@@ -81,88 +78,6 @@
 
     // carousel demo
     $('.bs-docs-carousel-example').carousel()
-
-    // javascript build logic
-    var inputsComponent = $("#less input")
-      , inputsPlugin = $("#plugins input")
-      , inputsVariables = $("#less-variables input")
-
-    // toggle all plugin checkboxes
-    $('#less .toggle').on('click', function (e) {
-      e.preventDefault()
-      inputsComponent.prop('checked', !inputsComponent.is(':checked'))
-    })
-
-    $('#plugins .toggle').on('click', function (e) {
-      e.preventDefault()
-      inputsPlugin.prop('checked', !inputsPlugin.is(':checked'))
-    })
-
-    $('#less-variables .toggle').on('click', function (e) {
-      e.preventDefault()
-      inputsVariables.val('')
-    })
-
-    // request built javascript
-    $('.bs-customize-download .btn').on('click', function (e) {
-      e.preventDefault()
-
-      var css = $("#less input:checked")
-            .map(function () { return this.value })
-            .toArray()
-        , js = $("#plugins input:checked")
-            .map(function () { return this.value })
-            .toArray()
-        , vars = {}
-
-      $("#less-variables input")
-        .each(function () {
-          $(this).val() && (vars[ $(this).prev().text() ] = $(this).val())
-      })
-
-      $.ajax({
-        type: 'POST'
-      , url: /localhost/.test(window.location) ? 'http://localhost:9001' : 'http://bootstrap.herokuapp.com'
-      , dataType: 'jsonpi'
-      , params: {
-          js: js
-        , css: css
-        , vars: vars
-      }
-      })
-    })
-  })
-
-// Modified from the original jsonpi https://github.com/benvinegar/jquery-jsonpi
-$.ajaxTransport('jsonpi', function(opts, originalOptions, jqXHR) {
-  var url = opts.url;
-
-  return {
-    send: function(_, completeCallback) {
-      var name = 'jQuery_iframe_' + jQuery.now()
-        , iframe, form
-
-      iframe = $('<iframe>')
-        .attr('name', name)
-        .appendTo('head')
-
-      form = $('<form>')
-        .attr('method', opts.type) // GET or POST
-        .attr('action', url)
-        .attr('target', name)
-
-      $.each(opts.params, function(k, v) {
-
-        $('<input>')
-          .attr('type', 'hidden')
-          .attr('name', k)
-          .attr('value', typeof v == 'string' ? v : JSON.stringify(v))
-          .appendTo(form)
-      })
-
-      form.appendTo('body').submit()
-    }
-  }
 })
 
 }(window.jQuery)

assets/js/customizer.js

@@ -0,0 +1,175 @@
+window.onload = function () { // wait for load in a dumb way because B-0
+  var cw = '/*!\n * Bootstrap v3.0.0-rc.2\n *\n * Copyright 2013 Twitter, Inc\n * Licensed under the Apache License v2.0\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Designed and built with all the love in the world @twitter by @mdo and @fat.\n */\n\n'
+
+  function generateUrl() {
+    var vars = {}
+
+    $('#less-variables-section input')
+        .each(function () {
+          $(this).val() && (vars[ $(this).prev().text() ] = $(this).val())
+        })
+
+    var data = {
+      vars: vars,
+      css: $('#less-section input:not(:checked)').map(function () { return this.value }).toArray(),
+      js: $('#plugin-section input:not(:checked)').map(function () { return this.value }).toArray()
+    }
+
+    if ($.isEmptyObject(data.vars) && !data.css.length && !data.js.length) return
+
+    window.location = jQuery.param.querystring('/customize/', data)
+  }
+
+  function parseUrl() {
+    var data = jQuery.deparam.querystring()
+
+    if (data.js) {
+      for (var i = 0; i < data.js.length; i++) {
+        var input = $('input[value="'+data.js[i]+'"]')
+        input && input.prop('checked', false)
+      }
+    }
+
+    if (data.css) {
+      for (var i = 0; i < data.css.length; i++) {
+        var input = $('input[value="'+data.css[i]+'"]')
+        input && input.prop('checked', false)
+      }
+    }
+
+    if (data.vars) {
+      // todo (fat): vars
+    }
+  }
+
+  function generateZip(css, js, complete) {
+    if (!css && !js) return alert('you want to build nothing… o_O')
+
+    var zip = new JSZip()
+
+    if (css) {
+      var cssFolder = zip.folder('css')
+      for (var fileName in css) {
+        cssFolder.file(fileName, css[fileName])
+      }
+    }
+
+    if (js) {
+      var jsFolder = zip.folder('js')
+      for (var fileName in js) {
+        jsFolder.file(fileName, js[fileName])
+      }
+    }
+
+    var content = zip.generate()
+
+    location.href = 'data:application/zip;base64,' + content
+
+    complete()
+  }
+
+  function generateCustomCSS(vars) {
+    var result = ''
+
+    for (var key in vars) {
+      result += key + ': ' + vars[key] + ';\n'
+    }
+
+    return result + '\n\n'
+  }
+
+  function generateCSS() {
+    var $checked = $('#less-section input:checked')
+
+    if (!$checked.length) return false
+
+    var result = {}
+    var vars = {}
+    var css = ''
+
+    $('#less-variables-section input')
+        .each(function () {
+          $(this).val() && (vars[ $(this).prev().text() ] = $(this).val())
+        })
+
+    css += __less['variables.less']
+    if (vars) css += generateCustomCSS(vars)
+    css += __less['mixins.less']
+    css += $checked
+      .map(function () { return __less[this.value] })
+      .toArray()
+      .join('\n')
+
+    css = css.replace(/@import[^\n]*/gi, '') //strip any imports
+
+    try {
+      var parser = new less.Parser({
+          paths: ['variables.less', 'mixins.less']
+        , optimization: 0
+        , filename: 'bootstrap.css'
+      }).parse(css, function (err, tree) {
+        if (err) return alert(err)
+
+        result = {
+          'bootstrap.css'     : cw + tree.toCSS(),
+          'bootstrap.min.css' : cw + tree.toCSS({ compress: true })
+        }
+      })
+    } catch (err) {
+      return alert(err)
+    }
+
+    return result
+  }
+
+  function generateJavascript() {
+    var $checked = $('#plugin-section input:checked')
+    if (!$checked.length) return false
+
+    var js = $checked
+      .map(function () { return __js[this.value] })
+      .toArray()
+      .join('\n')
+
+    return {
+      'bootstrap.js': js,
+      'bootstrap.min.js': cw + uglify(js)
+    }
+  }
+
+  var $downloadBtn = $('#btn-download').on('click', function (e) {
+    e.preventDefault()
+    $downloadBtn.addClass('loading')
+    generateZip(generateCSS(), generateJavascript(), function () {
+      $downloadBtn.removeClass('loading')
+      setTimeout(function () {
+        generateUrl()
+      }, 1)
+    })
+  })
+
+  var inputsComponent = $('#less-section input')
+  var inputsPlugin    = $('#plugin-section input')
+  var inputsVariables = $('#less-variables-section input')
+
+  $('#less-section .toggle').on('click', function (e) {
+    e.preventDefault()
+    inputsComponent.prop('checked', !inputsComponent.is(':checked'))
+  })
+
+  $('#plugin-section .toggle').on('click', function (e) {
+    e.preventDefault()
+    inputsPlugin.prop('checked', !inputsPlugin.is(':checked'))
+  })
+
+  $('#less-variables-section .toggle').on('click', function (e) {
+    e.preventDefault()
+    inputsVariables.val('')
+  })
+
+  try {
+    parseUrl()
+  } catch (e) {
+    // maybe alert user that we can't parse their url
+  }
+}

bower.json

@@ -1,7 +1,7 @@
 {
   "name": "bootstrap",
   "version": "3.0.0",
-  "main": ["./dist/js/bootstrap.min.js", "./dist/js/bootstrap.js", "./dist/css/bootstrap.min.css", "./dist/css/bootstrap.css"],
+  "main": ["./dist/js/bootstrap.js", "./dist/css/bootstrap.css"],
   "ignore": [
       "**/.*"
   ],

browserstack.json

@@ -0,0 +1,37 @@
+{
+  "username": "--secure--",
+  "key": "--secure--",
+  "test_path": "js/tests/index.html",
+  "browsers":  [
+    {
+      "browser": "firefox",
+      "browser_version": "latest",
+      "os": "OS X",
+      "os_version": "Mountain Lion"
+    },
+    {
+      "browser": "safari",
+      "browser_version": "latest",
+      "os": "OS X",
+      "os_version": "Mountain Lion"
+    },
+    {
+      "browser": "chrome",
+      "browser_version": "latest",
+      "os": "OS X",
+      "os_version": "Mountain Lion"
+    },
+    {
+      "browser": "firefox",
+      "browser_version": "latest",
+      "os": "Windows",
+      "os_version": "7"
+    },
+    {
+      "browser": "chrome",
+      "browser_version": "latest",
+      "os": "Windows",
+      "os_version": "7"
+    }
+  ]
+}

dist/js/bootstrap.js

@@ -219,7 +219,9 @@ if (!jQuery) { throw new Error("Bootstrap requires jQuery") }
     var $parent = this.$element.closest('[data-toggle="buttons"]')
 
     if ($parent.length) {
-      var $input = this.$element.find('input').prop('checked', !this.$element.hasClass('active'))
+      var $input = this.$element.find('input')
+        .prop('checked', !this.$element.hasClass('active'))
+        .trigger('change')
       if ($input.prop('type') === 'radio') $parent.find('.active').removeClass('active')
     }
 
@@ -312,6 +314,7 @@ if (!jQuery) { throw new Error("Bootstrap requires jQuery") }
   Carousel.DEFAULTS = {
     interval: 5000
   , pause: 'hover'
+  , wrap: true
   }
 
   Carousel.prototype.cycle =  function (e) {
@@ -376,12 +379,15 @@ if (!jQuery) { throw new Error("Bootstrap requires jQuery") }
     var fallback  = type == 'next' ? 'first' : 'last'
     var that      = this
 
+    if (!$next.length) {
+      if (!this.options.wrap) return
+      $next = this.$element.find('.item')[fallback]()
+    }
+
     this.sliding = true
 
     isCycling && this.pause()
 
-    $next = $next.length ? $next : this.$element.find('.item')[fallback]()
-
     var e = $.Event('slide.bs.carousel', { relatedTarget: $next[0], direction: direction })
 
     if ($next.hasClass('active')) return
@@ -533,7 +539,7 @@ if (!jQuery) { throw new Error("Bootstrap requires jQuery") }
     this.$element.trigger(startEvent)
     if (startEvent.isDefaultPrevented()) return
 
-    var actives   = this.$parent && this.$parent.find('> .accordion-group > .in')
+    var actives = this.$parent && this.$parent.find('> .panel > .in')
 
     if (actives && actives.length) {
       var hasData = actives.data('bs.collapse')
@@ -654,7 +660,7 @@ if (!jQuery) { throw new Error("Bootstrap requires jQuery") }
     var $parent = parent && $(parent)
 
     if (!data || !data.transitioning) {
-      if ($parent) $parent.find('[data-toggle=collapse][data-parent=' + parent + ']').not($this).addClass('collapsed')
+      if ($parent) $parent.find('[data-toggle=collapse][data-parent="' + parent + '"]').not($this).addClass('collapsed')
       $this[$target.hasClass('in') ? 'addClass' : 'removeClass']('collapsed')
     }
 
@@ -849,7 +855,7 @@ if (!jQuery) { throw new Error("Bootstrap requires jQuery") }
     this.$backdrop =
     this.isShown   = null
 
-    if (this.options.remote) this.$element.find('.modal-body').load(this.options.remote)
+    if (this.options.remote) this.$element.load(this.options.remote)
   }
 
   Modal.DEFAULTS = {
@@ -858,13 +864,13 @@ if (!jQuery) { throw new Error("Bootstrap requires jQuery") }
     , show: true
   }
 
-  Modal.prototype.toggle = function () {
-    return this[!this.isShown ? 'show' : 'hide']()
+  Modal.prototype.toggle = function (_relatedTarget) {
+    return this[!this.isShown ? 'show' : 'hide'](_relatedTarget)
   }
 
-  Modal.prototype.show = function () {
+  Modal.prototype.show = function (_relatedTarget) {
     var that = this
-    var e    = $.Event('show.bs.modal')
+    var e    = $.Event('show.bs.modal', { relatedTarget: _relatedTarget })
 
     this.$element.trigger(e)
 
@@ -893,13 +899,15 @@ if (!jQuery) { throw new Error("Bootstrap requires jQuery") }
 
       that.enforceFocus()
 
+      var e = $.Event('shown.bs.modal', { relatedTarget: _relatedTarget })
+
       transition ?
         that.$element
           .one($.support.transition.end, function () {
-            that.$element.focus().trigger('shown.bs.modal')
+            that.$element.focus().trigger(e)
           })
           .emulateTransitionEnd(300) :
-        that.$element.focus().trigger('shown.bs.modal')
+        that.$element.focus().trigger(e)
     })
   }
 
@@ -921,6 +929,7 @@ if (!jQuery) { throw new Error("Bootstrap requires jQuery") }
     this.$element
       .removeClass('in')
       .attr('aria-hidden', true)
+      .off('click.dismiss.modal')
 
     $.support.transition && this.$element.hasClass('fade') ?
       this.$element
@@ -973,7 +982,7 @@ if (!jQuery) { throw new Error("Bootstrap requires jQuery") }
       this.$backdrop = $('<div class="modal-backdrop ' + animate + '" />')
         .appendTo(document.body)
 
-      this.$element.on('click', $.proxy(function (e) {
+      this.$element.on('click.dismiss.modal', $.proxy(function (e) {
         if (e.target !== e.currentTarget) return
         this.options.backdrop == 'static'
           ? this.$element[0].focus.call(this.$element[0])
@@ -1012,15 +1021,15 @@ if (!jQuery) { throw new Error("Bootstrap requires jQuery") }
 
   var old = $.fn.modal
 
-  $.fn.modal = function (option) {
+  $.fn.modal = function (option, _relatedTarget) {
     return this.each(function () {
       var $this   = $(this)
       var data    = $this.data('bs.modal')
       var options = $.extend({}, Modal.DEFAULTS, $this.data(), typeof option == 'object' && option)
 
       if (!data) $this.data('bs.modal', (data = new Modal(this, options)))
-      if (typeof option == 'string') data[option]()
-      else if (options.show) data.show()
+      if (typeof option == 'string') data[option](_relatedTarget)
+      else if (options.show) data.show(_relatedTarget)
     })
   }
 
@@ -1043,28 +1052,26 @@ if (!jQuery) { throw new Error("Bootstrap requires jQuery") }
     var $this   = $(this)
     var href    = $this.attr('href')
     var $target = $($this.attr('data-target') || (href && href.replace(/.*(?=#[^\s]+$)/, ''))) //strip for ie7
-    var option  = $target.data('modal') ? 'toggle' : $.extend({ remote:!/#/.test(href) && href }, $target.data(), $this.data())
+    var option  = $target.data('modal') ? 'toggle' : $.extend({ remote: !/#/.test(href) && href }, $target.data(), $this.data())
 
     e.preventDefault()
 
     $target
-      .modal(option)
+      .modal(option, this)
       .one('hide', function () {
         $this.is(':visible') && $this.focus()
       })
   })
 
-  $(function () {
-    var $body = $(document.body)
-      .on('shown.bs.modal',  '.modal', function () { $body.addClass('modal-open') })
-      .on('hidden.bs.modal', '.modal', function () { $body.removeClass('modal-open') })
-  })
+  $(document)
+    .on('shown.bs.modal',  '.modal', function () { $(document.body).addClass('modal-open') })
+    .on('hidden.bs.modal', '.modal', function () { $(document.body).removeClass('modal-open') })
 
 }(window.jQuery);
 
 /* ========================================================================
  * Bootstrap: tooltip.js v3.0.0
- * http://twbs.github.com/bootstrap/javascript.html#affix
+ * http://twbs.github.com/bootstrap/javascript.html#tooltip
  * Inspired by the original jQuery.tipsy by Jason Frame
  * ========================================================================
  * Copyright 2012 Twitter, Inc.
@@ -1128,7 +1135,7 @@ if (!jQuery) { throw new Error("Bootstrap requires jQuery") }
         var eventIn  = trigger == 'hover' ? 'mouseenter' : 'focus'
         var eventOut = trigger == 'hover' ? 'mouseleave' : 'blur'
 
-        this.$element.on(eventIn + '.' + this.type, this.options.selector, $.proxy(this.enter, this))
+        this.$element.on(eventIn  + '.' + this.type, this.options.selector, $.proxy(this.enter, this))
         this.$element.on(eventOut + '.' + this.type, this.options.selector, $.proxy(this.leave, this))
       }
     }
@@ -1155,16 +1162,20 @@ if (!jQuery) { throw new Error("Bootstrap requires jQuery") }
     return options
   }
 
-  Tooltip.prototype.enter = function (obj) {
-    var defaults = this.getDefaults()
+  Tooltip.prototype.getDelegateOptions = function () {
     var options  = {}
+    var defaults = this.getDefaults()
 
     this._options && $.each(this._options, function (key, value) {
       if (defaults[key] != value) options[key] = value
     })
 
+    return options
+  }
+
+  Tooltip.prototype.enter = function (obj) {
     var self = obj instanceof this.constructor ?
-      obj : $(obj.currentTarget)[this.type](options).data('bs.' + this.type)
+      obj : $(obj.currentTarget)[this.type](this.getDelegateOptions()).data('bs.' + this.type)
 
     clearTimeout(self.timeout)
 
@@ -1178,7 +1189,7 @@ if (!jQuery) { throw new Error("Bootstrap requires jQuery") }
 
   Tooltip.prototype.leave = function (obj) {
     var self = obj instanceof this.constructor ?
-      obj : $(obj.currentTarget)[this.type](this._options).data('bs.' + this.type)
+      obj : $(obj.currentTarget)[this.type](this.getDelegateOptions()).data('bs.' + this.type)
 
     clearTimeout(self.timeout)
 
@@ -1243,12 +1254,9 @@ if (!jQuery) { throw new Error("Bootstrap requires jQuery") }
           .addClass(placement)
       }
 
-      var tp = placement == 'bottom' ? { top: pos.top + pos.height,   left: pos.left + pos.width / 2 - actualWidth / 2  } :
-               placement == 'top'    ? { top: pos.top - actualHeight, left: pos.left + pos.width / 2 - actualWidth / 2  } :
-               placement == 'left'   ? { top: pos.top + pos.height / 2 - actualHeight / 2, left: pos.left - actualWidth } :
-            /* placement == 'right' */ { top: pos.top + pos.height / 2 - actualHeight / 2, left: pos.left + pos.width   }
+      var calculatedOffset = this.getCalculatedOffset(placement, pos, actualWidth, actualHeight)
 
-      this.applyPlacement(tp, placement)
+      this.applyPlacement(calculatedOffset, placement)
       this.$element.trigger('shown.bs.' + this.type)
     }
   }
@@ -1260,25 +1268,33 @@ if (!jQuery) { throw new Error("Bootstrap requires jQuery") }
     var height = $tip[0].offsetHeight
 
     // manually read margins because getBoundingClientRect includes difference
-    offset.top  = offset.top  + parseInt($tip.css('margin-top'), 10)
-    offset.left = offset.left + parseInt($tip.css('margin-left'), 10)
+    var marginTop = parseInt($tip.css('margin-top'), 10)
+    var marginLeft = parseInt($tip.css('margin-left'), 10)
+
+    // we must check for NaN for ie 8/9
+    if (isNaN(marginTop))  marginTop  = 0
+    if (isNaN(marginLeft)) marginLeft = 0
+
+    offset.top  = offset.top  + marginTop
+    offset.left = offset.left + marginLeft
 
     $tip
       .offset(offset)
       .addClass('in')
 
+    // check to see if placing tip in new offset caused the tip to resize itself
     var actualWidth  = $tip[0].offsetWidth
     var actualHeight = $tip[0].offsetHeight
 
     if (placement == 'top' && actualHeight != height) {
       replace = true
-      offset.top  = offset.top + height - actualHeight
+      offset.top = offset.top + height - actualHeight
     }
 
-    if (placement == 'bottom' || placement == 'top') {
+    if (/bottom|top/.test(placement)) {
       var delta = 0
 
-      if (offset.left < 0){
+      if (offset.left < 0) {
         delta       = offset.left * -2
         offset.left = 0
 
@@ -1313,6 +1329,8 @@ if (!jQuery) { throw new Error("Bootstrap requires jQuery") }
     var $tip = this.tip()
     var e    = $.Event('hide.bs.' + this.type)
 
+    function complete() { $tip.detach() }
+
     this.$element.trigger(e)
 
     if (e.isDefaultPrevented()) return
@@ -1321,9 +1339,9 @@ if (!jQuery) { throw new Error("Bootstrap requires jQuery") }
 
     $.support.transition && this.$tip.hasClass('fade') ?
       $tip
-        .one($.support.transition.end, $tip.detach)
+        .one($.support.transition.end, complete)
         .emulateTransitionEnd(150) :
-      $tip.detach()
+      complete()
 
     this.$element.trigger('hidden.bs.' + this.type)
 
@@ -1349,6 +1367,13 @@ if (!jQuery) { throw new Error("Bootstrap requires jQuery") }
     }, this.$element.offset())
   }
 
+  Tooltip.prototype.getCalculatedOffset = function (placement, pos, actualWidth, actualHeight) {
+    return placement == 'bottom' ? { top: pos.top + pos.height,   left: pos.left + pos.width / 2 - actualWidth / 2  } :
+           placement == 'top'    ? { top: pos.top - actualHeight, left: pos.left + pos.width / 2 - actualWidth / 2  } :
+           placement == 'left'   ? { top: pos.top + pos.height / 2 - actualHeight / 2, left: pos.left - actualWidth } :
+        /* placement == 'right' */ { top: pos.top + pos.height / 2 - actualHeight / 2, left: pos.left + pos.width   }
+  }
+
   Tooltip.prototype.getTitle = function () {
     var title
     var $e = this.$element
@@ -1364,8 +1389,8 @@ if (!jQuery) { throw new Error("Bootstrap requires jQuery") }
     return this.$tip = this.$tip || $(this.options.template)
   }
 
-  Tooltip.prototype.arrow =function(){
-    return this.$arrow = this.$arrow || this.tip().find(".tooltip-arrow")
+  Tooltip.prototype.arrow = function () {
+    return this.$arrow = this.$arrow || this.tip().find('.tooltip-arrow')
   }
 
   Tooltip.prototype.validate = function () {
@@ -1389,7 +1414,7 @@ if (!jQuery) { throw new Error("Bootstrap requires jQuery") }
   }
 
   Tooltip.prototype.toggle = function (e) {
-    var self = e ? $(e.currentTarget)[this.type](this._options).data('bs.' + this.type) : this
+    var self = e ? $(e.currentTarget)[this.type](this.getDelegateOptions()).data('bs.' + this.type) : this
     self.tip().hasClass('in') ? self.leave(self) : self.enter(self)
   }
 
@@ -1487,7 +1512,9 @@ if (!jQuery) { throw new Error("Bootstrap requires jQuery") }
 
     $tip.removeClass('fade top bottom left right in')
 
-    $tip.find('.popover-title:empty').hide()
+    // IE8 doesn't accept hiding via the `:empty` pseudo selector, we have to do
+    // this manually by checking the contents.
+    if (!$tip.find('.popover-title').html()) $tip.find('.popover-title').hide()
   }
 
   Popover.prototype.hasContent = function () {
@@ -1504,6 +1531,10 @@ if (!jQuery) { throw new Error("Bootstrap requires jQuery") }
             o.content)
   }
 
+  Popover.prototype.arrow = function () {
+    return this.$arrow = this.$arrow || this.tip().find('.arrow')
+  }
+
   Popover.prototype.tip = function () {
     if (!this.$tip) this.$tip = $(this.options.template)
     return this.$tip

examples/carousel/carousel.css

@@ -0,0 +1,134 @@
+/* GLOBAL STYLES
+-------------------------------------------------- */
+/* Padding below the footer and lighter body text */
+
+body {
+  padding-bottom: 40px;
+  color: #5a5a5a;
+}
+
+
+
+/* CUSTOMIZE THE NAVBAR
+-------------------------------------------------- */
+
+/* Special class on .container surrounding .navbar, used for positioning it into place. */
+.navbar-wrapper {
+  position: relative;
+  z-index: 15;
+}
+
+
+
+/* CUSTOMIZE THE CAROUSEL
+-------------------------------------------------- */
+
+/* Carousel base class */
+.carousel {
+  margin-bottom: 60px;
+
+  /* Negative margin to pull up carousel. 90px is roughly margins and height of navbar. */
+  margin-top: -90px;
+}
+/* Since positioning the image, we need to help out the caption */
+.carousel-caption {
+  z-index: 10;
+}
+
+/* Declare heights because of positioning of img element */
+.carousel .item {
+  height: 500px;
+}
+.carousel-inner > .item > img {
+  position: absolute;
+  top: 0;
+  left: 0;
+  min-width: 100%;
+  height: 500px;
+}
+
+
+
+/* MARKETING CONTENT
+-------------------------------------------------- */
+
+/* Pad the edges of the mobile views a bit */
+.marketing {
+  padding-left: 15px;
+  padding-right: 15px;
+}
+
+/* Center align the text within the three columns below the carousel */
+.marketing .col-lg-4 {
+  text-align: center;
+  margin-bottom: 20px;
+}
+.marketing h2 {
+  font-weight: normal;
+}
+.marketing .col-lg-4 p {
+  margin-left: 10px;
+  margin-right: 10px;
+}
+
+
+/* Featurettes
+------------------------- */
+
+.featurette-divider {
+  margin: 80px 0; /* Space out the Bootstrap <hr> more */
+}
+.featurette {
+  padding-top: 120px; /* Vertically center images part 1: add padding above and below text. */
+  overflow: hidden; /* Vertically center images part 2: clear their floats. */
+}
+.featurette-image {
+  margin-top: -120px; /* Vertically center images part 3: negative margin up the image the same amount of the padding to center it. */
+}
+
+/* Give some space on the sides of the floated elements so text doesn't run right into it. */
+.featurette-image.pull-left {
+  margin-right: 40px;
+}
+.featurette-image.pull-right {
+  margin-left: 40px;
+}
+
+/* Thin out the marketing headings */
+.featurette-heading {
+  font-size: 50px;
+  font-weight: 300;
+  line-height: 1;
+  letter-spacing: -1px;
+}
+
+
+
+/* RESPONSIVE CSS
+-------------------------------------------------- */
+
+@media (min-width: 768px) {
+
+  /* Remve the edge padding needed for mobile */
+  .marketing {
+    padding-left: 0;
+    padding-right: 0;
+  }
+
+  /* Navbar positioning foo */
+  .navbar-wrapper {
+    margin-top: 20px;
+  }
+  /* The navbar becomes detached from the top, so we round the corners */
+  .navbar-wrapper .navbar {
+    border-radius: 4px;
+  }
+
+  /* Bump up size of carousel content */
+  .carousel-caption p {
+    margin-bottom: 20px;
+    font-size: 21px;
+    line-height: 1.4;
+  }
+
+}

examples/carousel/index.html

@@ -0,0 +1,184 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="description" content="">
+    <meta name="author" content="">
+
+    <title>Carousel Template for Bootstrap</title>
+
+    <!-- Bootstrap core CSS -->
+    <link href="../../dist/css/bootstrap.css" rel="stylesheet">
+    <link href="../../dist/css/bootstrap-glyphicons.css" rel="stylesheet">
+
+    <!-- Custom styles for this template -->
+    <link href="carousel.css" rel="stylesheet">
+  </head>
+<!-- NAVBAR
+================================================== -->
+  <body>
+    <div class="navbar-wrapper">
+      <div class="container">
+
+        <div class="navbar navbar-inverse navbar-static-top">
+          <div class="container">
+            <div class="navbar-header">
+              <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
+                <span class="icon-bar"></span>
+                <span class="icon-bar"></span>
+                <span class="icon-bar"></span>
+              </button>
+              <a class="navbar-brand" href="#">Project name</a>
+            </div>
+            <div class="navbar-collapse collapse">
+              <ul class="nav navbar-nav">
+                <li class="active"><a href="#">Home</a></li>
+                <li><a href="#about">About</a></li>
+                <li><a href="#contact">Contact</a></li>
+                <li class="dropdown">
+                  <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
+                  <ul class="dropdown-menu">
+                    <li><a href="#">Action</a></li>
+                    <li><a href="#">Another action</a></li>
+                    <li><a href="#">Something else here</a></li>
+                    <li class="divider"></li>
+                    <li class="dropdown-header">Nav header</li>
+                    <li><a href="#">Separated link</a></li>
+                    <li><a href="#">One more separated link</a></li>
+                  </ul>
+                </li>
+              </ul>
+            </div>
+          </div>
+        </div>
+
+      </div>
+    </div>
+
+
+    <!-- Carousel
+    ================================================== -->
+    <div id="myCarousel" class="carousel slide">
+      <!-- Indicators -->
+      <ol class="carousel-indicators">
+        <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
+        <li data-target="#myCarousel" data-slide-to="1"></li>
+        <li data-target="#myCarousel" data-slide-to="2"></li>
+      </ol>
+      <div class="carousel-inner">
+        <div class="item active">
+          <img data-src="holder.js/1500x500/auto/#777:#7a7a7a/text:First slide" alt="">
+          <div class="container">
+            <div class="carousel-caption">
+              <h1>Example headline.</h1>
+              <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>
+              <p><a class="btn btn-large btn-primary" href="#">Sign up today</a></p>
+            </div>
+          </div>
+        </div>
+        <div class="item">
+          <img data-src="holder.js/1500x500/auto/#777:#7a7a7a/text:Second slide" alt="">
+          <div class="container">
+            <div class="carousel-caption">
+              <h1>Another example headline.</h1>
+              <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>
+              <p><a class="btn btn-large btn-primary" href="#">Learn more</a></p>
+            </div>
+          </div>
+        </div>
+        <div class="item">
+          <img data-src="holder.js/1500x500/auto/#777:#7a7a7a/text:Third slide" alt="">
+          <div class="container">
+            <div class="carousel-caption">
+              <h1>One more for good measure.</h1>
+              <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>
+              <p><a class="btn btn-large btn-primary" href="#">Browse gallery</a></p>
+            </div>
+          </div>
+        </div>
+      </div>
+      <a class="left carousel-control" href="#myCarousel" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span></a>
+      <a class="right carousel-control" href="#myCarousel" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span></a>
+    </div><!-- /.carousel -->
+
+
+
+    <!-- Marketing messaging and featurettes
+    ================================================== -->
+    <!-- Wrap the rest of the page in another container to center all the content. -->
+
+    <div class="container marketing">
+
+      <!-- Three columns of text below the carousel -->
+      <div class="row">
+        <div class="col-lg-4">
+          <img class="img-circle" data-src="holder.js/140x140">
+          <h2>Heading</h2>
+          <p>Donec sed odio dui. Etiam porta sem malesuada magna mollis euismod. Nullam id dolor id nibh ultricies vehicula ut id elit. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo cursus magna.</p>
+          <p><a class="btn btn-default" href="#">View details &raquo;</a></p>
+        </div><!-- /.col-lg-4 -->
+        <div class="col-lg-4">
+          <img class="img-circle" data-src="holder.js/140x140">
+          <h2>Heading</h2>
+          <p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh.</p>
+          <p><a class="btn btn-default" href="#">View details &raquo;</a></p>
+        </div><!-- /.col-lg-4 -->
+        <div class="col-lg-4">
+          <img class="img-circle" data-src="holder.js/140x140">
+          <h2>Heading</h2>
+          <p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
+          <p><a class="btn btn-default" href="#">View details &raquo;</a></p>
+        </div><!-- /.col-lg-4 -->
+      </div><!-- /.row -->
+
+
+      <!-- START THE FEATURETTES -->
+
+      <hr class="featurette-divider">
+
+      <div class="featurette">
+        <img class="featurette-image img-circle pull-right" data-src="holder.js/512x512">
+        <h2 class="featurette-heading">First featurette heading. <span class="text-muted">It'll blow your mind.</span></h2>
+        <p class="lead">Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod semper. Praesent commodo cursus magna, vel scelerisque nisl consectetur. Fusce dapibus, tellus ac cursus commodo.</p>
+      </div>
+
+      <hr class="featurette-divider">
+
+      <div class="featurette">
+        <img class="featurette-image img-circle pull-left" data-src="holder.js/512x512">
+        <h2 class="featurette-heading">Oh yeah, it's that good. <span class="text-muted">See for yourself.</span></h2>
+        <p class="lead">Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod semper. Praesent commodo cursus magna, vel scelerisque nisl consectetur. Fusce dapibus, tellus ac cursus commodo.</p>
+      </div>
+
+      <hr class="featurette-divider">
+
+      <div class="featurette">
+        <img class="featurette-image img-circle pull-right" data-src="holder.js/512x512">
+        <h2 class="featurette-heading">And lastly, this one. <span class="text-muted">Checkmate.</span></h2>
+        <p class="lead">Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod semper. Praesent commodo cursus magna, vel scelerisque nisl consectetur. Fusce dapibus, tellus ac cursus commodo.</p>
+      </div>
+
+      <hr class="featurette-divider">
+
+      <!-- /END THE FEATURETTES -->
+
+
+      <!-- FOOTER -->
+      <footer>
+        <p class="pull-right"><a href="#">Back to top</a></p>
+        <p>&copy; 2013 Company, Inc. &middot; <a href="#">Privacy</a> &middot; <a href="#">Terms</a></p>
+      </footer>
+
+    </div><!-- /.container -->
+
+
+
+    <!-- Bootstrap core JavaScript
+    ================================================== -->
+    <!-- Placed at the end of the document so the pages load faster -->
+    <script src="../../assets/js/jquery.js"></script>
+    <script src="../../dist/js/bootstrap.min.js"></script>
+    <script src="../../assets/js/holder.js"></script>
+  </body>
+</html>

examples/grid/grid.css

@@ -0,0 +1,28 @@
+.container {
+  padding-left: 15px;
+  padding-right: 15px;
+}
+
+h4 {
+  margin-top: 25px;
+}
+.row {
+  margin-bottom: 20px;
+}
+.row .row {
+  margin-top: 10px;
+  margin-bottom: 0;
+}
+[class*="col-"] {
+  padding-top: 15px;
+  padding-bottom: 15px;
+  background-color: #eee;
+  border: 1px solid #ddd;
+  background-color: rgba(86,61,124,.15);
+  border: 1px solid rgba(86,61,124,.2);
+}
+
+hr {
+  margin-top: 40px;
+  margin-bottom: 40px;
+}

examples/grid/index.html

@@ -0,0 +1,108 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="description" content="">
+    <meta name="author" content="">
+
+    <title>Grid Template for Bootstrap</title>
+
+    <!-- Bootstrap core CSS -->
+    <link href="../../dist/css/bootstrap.css" rel="stylesheet">
+
+    <!-- Custom styles for this template -->
+    <link href="grid.css" rel="stylesheet">
+  </head>
+
+  <body>
+    <div class="container">
+
+      <div class="page-header">
+        <h1>Bootstrap grid examples</h1>
+        <p class="lead">Basic grid layouts to get you familiar with building within the Bootstrap grid system.</p>
+      </div>
+
+      <h3>Three equal columns</h3>
+      <p>Get three equal-width columns <strong>starting at desktops and scaling to large desktops</strong>. On mobile devices, tablets and below, the columns will automatically stack.</p>
+      <div class="row">
+        <div class="col-md-4">.col-md-4</div>
+        <div class="col-md-4">.col-md-4</div>
+        <div class="col-md-4">.col-md-4</div>
+      </div>
+
+      <h3>Three unequal columns</h3>
+      <p>Get three columns <strong>starting at desktops and scaling to large desktops</strong> of various widths. Remember, grid columns should add up to twelve for a single horizontal block. More than that, and columns start stacking no matter the viewport.</p>
+      <div class="row">
+        <div class="col-md-3">.col-md-3</div>
+        <div class="col-md-6">.col-md-6</div>
+        <div class="col-md-3">.col-md-3</div>
+      </div>
+
+      <h3>Two columns</h3>
+      <p>Get two columns <strong>starting at desktops and scaling to large desktops</strong>.</p>
+      <div class="row">
+        <div class="col-md-8">.col-md-8</div>
+        <div class="col-md-4">.col-md-4</div>
+      </div>
+
+      <h3>Full width, single column</h3>
+      <p class="text-warning">No grid classes are necessary for full-width elements.</p>
+
+      <hr>
+
+      <h3>Two columns with two nested columns</h3>
+      <p>Per the documentation, nesting is easy—just put a row of columns within an existing row. This gives you two columns <strong>starting at desktops and scaling to large desktops</strong>, with another two (equal widths) within the larger column.</p>
+      <p>At mobile device sizes, tablets and down, these columns and their nested columns will stack.</p>
+      <div class="row">
+        <div class="col-md-8">
+          .col-md-8
+          <div class="row">
+            <div class="col-md-6">.col-md-6</div>
+            <div class="col-md-6">.col-md-6</div>
+          </div>
+        </div>
+        <div class="col-md-4">.col-md-4</div>
+      </div>
+
+      <hr>
+
+      <h3>Mixed: mobile and desktop</h3>
+      <p>The Bootstrap 3 grid system has four tiers of classes: xs (phones), sm (tablets), md (desktops), and lg (larger desktops). You can use nearly any combination of these classes to create more dynamic and flexible layouts.</p>
+      <p>Each tier of classes scales up, meaning if you plan on setting the same widths for xs and sm, you only need to specify xs.</p>
+      <div class="row">
+        <div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div>
+        <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
+      </div>
+      <div class="row">
+        <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
+        <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
+        <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
+      </div>
+      <div class="row">
+        <div class="col-xs-6 col-md-6">.col-xs-6 .col-md-6</div>
+        <div class="col-xs-6 col-md-6">.col-xs-6 .col-md-6</div>
+      </div>
+
+      <hr>
+
+      <h3>Mixed: mobile, tablet, and desktop</h3>
+      <p></p>
+      <div class="row">
+        <div class="col-xs-12 col-sm-8 col-lg-8">.col-xs-12 .col-lg-8</div>
+        <div class="col-xs-6 col-sm-4 col-lg-4">.col-xs-6 .col-lg-4</div>
+      </div>
+      <div class="row">
+        <div class="col-xs-6 col-sm-4 col-lg-4">.col-xs-6 .col-sm-4 .col-lg-4</div>
+        <div class="col-xs-6 col-sm-4 col-lg-4">.col-xs-6 .col-sm-4 .col-lg-4</div>
+        <div class="col-xs-6 col-sm-4 col-lg-4">.col-xs-6 .col-sm-4 .col-lg-4</div>
+      </div>
+      <div class="row">
+        <div class="col-xs-6 col-sm-6 col-lg-6">.col-xs-6 .col-sm-6 .col-lg-6</div>
+        <div class="col-xs-6 col-sm-6 col-lg-6">.col-xs-6 .col-sm-6 .col-lg-6</div>
+      </div>
+
+    </div> <!-- /container -->
+
+  </body>
+</html>

examples/jumbotron-narrow/index.html

@@ -0,0 +1,67 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="description" content="">
+    <meta name="author" content="">
+
+    <title>Narrow Jumbotron Template for Bootstrap</title>
+
+    <!-- Bootstrap core CSS -->
+    <link href="../../dist/css/bootstrap.css" rel="stylesheet">
+
+    <!-- Custom styles for this template -->
+    <link href="jumbotron-narrow.css" rel="stylesheet">
+  </head>
+
+  <body>
+
+    <div class="container-narrow">
+      <div class="header">
+        <ul class="nav nav-pills pull-right">
+          <li class="active"><a href="#">Home</a></li>
+          <li><a href="#">About</a></li>
+          <li><a href="#">Contact</a></li>
+        </ul>
+        <h3 class="text-muted">Project name</h3>
+      </div>
+
+      <div class="jumbotron">
+        <h1>Jumbotron heading</h1>
+        <p class="lead">Cras justo odio, dapibus ac facilisis in, egestas eget quam. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
+        <p><a class="btn btn-large btn-success" href="#">Sign up today</a></p>
+      </div>
+
+      <div class="row marketing">
+        <div class="col-lg-6">
+          <h4>Subheading</h4>
+          <p>Donec id elit non mi porta gravida at eget metus. Maecenas faucibus mollis interdum.</p>
+
+          <h4>Subheading</h4>
+          <p>Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Cras mattis consectetur purus sit amet fermentum.</p>
+
+          <h4>Subheading</h4>
+          <p>Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
+        </div>
+
+        <div class="col-lg-6">
+          <h4>Subheading</h4>
+          <p>Donec id elit non mi porta gravida at eget metus. Maecenas faucibus mollis interdum.</p>
+
+          <h4>Subheading</h4>
+          <p>Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Cras mattis consectetur purus sit amet fermentum.</p>
+
+          <h4>Subheading</h4>
+          <p>Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
+        </div>
+      </div>
+
+      <div class="footer">
+        <p>&copy; Company 2013</p>
+      </div>
+
+    </div> <!-- /container -->
+
+  </body>
+</html>

examples/jumbotron-narrow/jumbotron-narrow.css

@@ -0,0 +1,78 @@
+/* Space out content a bit */
+body {
+  padding-top: 20px;
+  padding-bottom: 20px;
+}
+
+/* Everything but the jumbotron gets side spacing for mobile-first views */
+.header,
+.marketing,
+.footer {
+  padding-left: 15px;
+  padding-right: 15px;
+}
+
+/* Custom page header */
+.header {
+  border-bottom: 1px solid #e5e5e5;
+}
+/* Make the masthead heading the same height as the navigation */
+.header h3 {
+  margin-top: 0;
+  margin-bottom: 0;
+  line-height: 40px;
+  padding-bottom: 19px;
+}
+
+/* Custom page footer */
+.footer {
+  padding-top: 19px;
+  color: #777;
+  border-top: 1px solid #e5e5e5;
+}
+
+/* Custom container */
+.container-narrow {
+  margin: 0 auto;
+  max-width: 700px;
+}
+.container-narrow > hr {
+  margin: 30px 0;
+}
+
+/* Main marketing message and sign up button */
+.jumbotron {
+  text-align: center;
+  border-bottom: 1px solid #e5e5e5;
+}
+.jumbotron .btn {
+  font-size: 21px;
+  padding: 14px 24px;
+}
+
+/* Supporting marketing content */
+.marketing {
+  margin: 40px 0;
+}
+.marketing p + h4 {
+  margin-top: 28px;
+}
+
+/* Responsive: Portrait tablets and up */
+@media screen and (min-width: 768px) {
+  /* Remove the padding we set earlier */
+  .header,
+  .marketing,
+  .footer {
+    padding-left: 0;
+    padding-right: 0;
+  }
+  /* Space out the masthead */
+  .header {
+    margin-bottom: 30px;
+  }
+  /* Remove the bottom border on the jumbotron for visual effect */
+  .jumbotron {
+    border-bottom: 0;
+  }
+}

examples/jumbotron/index.html

@@ -0,0 +1,99 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="description" content="">
+    <meta name="author" content="">
+
+    <title>Jumbotron Template for Bootstrap</title>
+
+    <!-- Bootstrap core CSS -->
+    <link href="../../dist/css/bootstrap.css" rel="stylesheet">
+
+    <!-- Custom styles for this template -->
+    <link href="jumbotron.css" rel="stylesheet">
+  </head>
+
+  <body>
+
+    <div class="navbar navbar-inverse navbar-fixed-top">
+      <div class="container">
+        <div class="navbar-header">
+          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
+            <span class="icon-bar"></span>
+            <span class="icon-bar"></span>
+            <span class="icon-bar"></span>
+          </button>
+          <a class="navbar-brand" href="#">Project name</a>
+        </div>
+        <div class="navbar-collapse collapse">
+          <ul class="nav navbar-nav">
+            <li class="active"><a href="#">Home</a></li>
+            <li><a href="#about">About</a></li>
+            <li><a href="#contact">Contact</a></li>
+            <li class="dropdown">
+              <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
+              <ul class="dropdown-menu">
+                <li><a href="#">Action</a></li>
+                <li><a href="#">Another action</a></li>
+                <li><a href="#">Something else here</a></li>
+                <li class="divider"></li>
+                <li class="dropdown-header">Nav header</li>
+                <li><a href="#">Separated link</a></li>
+                <li><a href="#">One more separated link</a></li>
+              </ul>
+            </li>
+          </ul>
+          <form class="navbar-form navbar-right">
+            <input type="text" placeholder="Email" class="form-control">
+            <input type="password" placeholder="Password" class="form-control">
+            <button type="submit" class="btn">Sign in</button>
+          </form>
+        </div><!--/.navbar-collapse -->
+      </div>
+    </div>
+
+    <div class="container">
+
+      <!-- Main jumbotron for a primary marketing message or call to action -->
+      <div class="jumbotron">
+        <h1>Hello, world!</h1>
+        <p>This is a template for a simple marketing or informational website. It includes a large callout called the hero unit and three supporting pieces of content. Use it as a starting point to create something more unique.</p>
+        <p><a class="btn btn-primary btn-large">Learn more &raquo;</a></p>
+      </div>
+
+      <div class="body-content">
+
+        <!-- Example row of columns -->
+        <div class="row">
+          <div class="col-lg-4">
+            <h2>Heading</h2>
+            <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
+            <p><a class="btn btn-default" href="#">View details &raquo;</a></p>
+          </div>
+          <div class="col-lg-4">
+            <h2>Heading</h2>
+            <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
+            <p><a class="btn btn-default" href="#">View details &raquo;</a></p>
+         </div>
+          <div class="col-lg-4">
+            <h2>Heading</h2>
+            <p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
+            <p><a class="btn btn-default" href="#">View details &raquo;</a></p>
+          </div>
+        </div>
+
+        <hr>
+
+        <footer>
+          <p>&copy; Company 2013</p>
+        </footer>
+      </div>
+
+    </div> <!-- /container -->
+
+    <script src="../../assets/js/jquery.js"></script>
+    <script src="../../dist/js/bootstrap.min.js"></script>
+  </body>
+</html>

examples/jumbotron/jumbotron.css

@@ -0,0 +1,30 @@
+/* Move down content because we have a fixed navbar that is 50px tall */
+body {
+  padding-top: 50px;
+  padding-bottom: 20px;
+}
+
+/* Set widths on the navbar form inputs since otherwise they're 100% wide */
+.navbar-form input[type="text"],
+.navbar-form input[type="password"] {
+  width: 180px;
+}
+
+/* Wrapping element */
+/* Set some basic padding to keep content from hitting the edges */
+.body-content {
+  padding-left: 15px;
+  padding-right: 15px;
+}
+
+/* Responsive: Portrait tablets and up */
+@media screen and (min-width: 768px) {
+  /* Let the jumbotron breathe */
+  .jumbotron {
+    margin-top: 20px;
+  }
+  /* Remove padding from wrapping element since we kick in the grid classes here */
+  .body-content {
+    padding: 0;
+  }
+}

examples/justified-nav/index.html

@@ -0,0 +1,73 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="description" content="">
+    <meta name="author" content="">
+
+    <title>Justified Nav Template for Bootstrap</title>
+
+    <!-- Bootstrap core CSS -->
+    <link href="../../dist/css/bootstrap.css" rel="stylesheet">
+
+    <!-- Custom styles for this template -->
+    <link href="justified-nav.css" rel="stylesheet">
+  </head>
+
+  <body>
+
+    <div class="container">
+
+      <div class="masthead">
+        <h3 class="text-muted">Project name</h3>
+        <ul class="nav navbar-nav nav-justified">
+          <li class="active"><a href="#">Home</a></li>
+          <li><a href="#">Projects</a></li>
+          <li><a href="#">Services</a></li>
+          <li><a href="#">Downloads</a></li>
+          <li><a href="#">About</a></li>
+          <li><a href="#">Contact</a></li>
+        </ul>
+      </div>
+
+      <!-- Jumbotron -->
+      <div class="jumbotron">
+        <h1>Marketing stuff!</h1>
+        <p class="lead">Cras justo odio, dapibus ac facilisis in, egestas eget quam. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet.</p>
+        <p><a class="btn btn-large btn-success" href="#">Get started today</a></p>
+      </div>
+
+
+      <div class="body-content">
+
+        <!-- Example row of columns -->
+        <div class="row">
+          <div class="col-lg-4">
+            <h2>Heading</h2>
+            <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
+            <p><a class="btn btn-default" href="#">View details &raquo;</a></p>
+          </div>
+          <div class="col-lg-4">
+            <h2>Heading</h2>
+            <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
+            <p><a class="btn btn-default" href="#">View details &raquo;</a></p>
+         </div>
+          <div class="col-lg-4">
+            <h2>Heading</h2>
+            <p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa.</p>
+            <p><a class="btn btn-default" href="#">View details &raquo;</a></p>
+          </div>
+        </div>
+
+      </div><!-- /.body-content -->
+
+      <!-- Site footer -->
+      <div class="footer">
+        <p>&copy; Company 2013</p>
+      </div>
+
+    </div> <!-- /container -->
+
+  </body>
+</html>

examples/justified-nav/justified-nav.css

@@ -0,0 +1,81 @@
+body {
+  padding-top: 20px;
+}
+
+/* Everything but the jumbotron gets side spacing for mobile-first views */
+.masthead,
+.body-content,
+.footer {
+  padding-left: 15px;
+  padding-right: 15px;
+}
+
+.footer {
+  border-top: 1px solid #ddd;
+  margin-top: 30px;
+  padding-top: 29px;
+  padding-bottom: 30px;
+}
+
+/* Main marketing message and sign up button */
+.jumbotron {
+  text-align: center;
+  background-color: transparent;
+}
+.jumbotron .btn {
+  font-size: 21px;
+  padding: 14px 24px;
+}
+
+/* Customize the nav-justified links to be fill the entire space of the .navbar */
+.nav-justified {
+  max-height: 50px;
+  background-color: #eee;
+  border-radius: 5px;
+  border: 1px solid #ccc;
+}
+.nav-justified > li > a {
+  padding-top: 15px;
+  padding-bottom: 15px;
+  color: #777;
+  font-weight: bold;
+  text-align: center;
+  border-left: 1px solid rgba(255,255,255,.75);
+  border-right: 1px solid rgba(0,0,0,.1);
+  background-color: #e5e5e5; /* Old browsers */
+  background-repeat: repeat-x; /* Repeat the gradient */
+  background-image: -moz-linear-gradient(top, #f5f5f5 0%, #e5e5e5 100%); /* FF3.6+ */
+  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f5f5f5), color-stop(100%,#e5e5e5)); /* Chrome,Safari4+ */
+  background-image: -webkit-linear-gradient(top, #f5f5f5 0%,#e5e5e5 100%); /* Chrome 10+,Safari 5.1+ */
+  background-image: -ms-linear-gradient(top, #f5f5f5 0%,#e5e5e5 100%); /* IE10+ */
+  background-image: -o-linear-gradient(top, #f5f5f5 0%,#e5e5e5 100%); /* Opera 11.10+ */
+  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f5f5f5', endColorstr='#e5e5e5',GradientType=0 ); /* IE6-9 */
+  background-image: linear-gradient(top, #f5f5f5 0%,#e5e5e5 100%); /* W3C */
+}
+.nav-justified > .active > a {
+  background-color: #ddd;
+  background-image: none;
+  box-shadow: inset 0 3px 7px rgba(0,0,0,.15);
+}
+.nav-justified > li:first-child > a {
+  border-left: 0;
+  border-top-left-radius: 5px;
+  border-bottom-left-radius: 5px;
+}
+.nav-justified > li:last-child > a {
+  border-right: 0;
+  border-top-right-radius: 5px;
+  border-bottom-right-radius: 5px;
+}
+
+
+/* Responsive: Portrait tablets and up */
+@media screen and (min-width: 768px) {
+  /* Remove the padding we set earlier */
+  .masthead,
+  .marketing,
+  .footer {
+    padding-left: 0;
+    padding-right: 0;
+  }
+}

examples/navbar-fixed-top/index.html

@@ -0,0 +1,77 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="description" content="">
+    <meta name="author" content="">
+
+    <title>Fixed Top Navbar Example for Bootstrap</title>
+
+    <!-- Bootstrap core CSS -->
+    <link href="../../dist/css/bootstrap.css" rel="stylesheet">
+
+    <!-- Custom styles for this template -->
+    <link href="navbar-fixed-top.css" rel="stylesheet">
+  </head>
+
+  <body>
+
+    <!-- Fixed navbar -->
+    <div class="navbar navbar-fixed-top">
+      <div class="container">
+        <div class="navbar-header">
+          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
+            <span class="icon-bar"></span>
+            <span class="icon-bar"></span>
+            <span class="icon-bar"></span>
+          </button>
+          <a class="navbar-brand" href="#">Project name</a>
+        </div>
+        <div class="navbar-collapse collapse">
+          <ul class="nav navbar-nav">
+            <li class="active"><a href="#">Home</a></li>
+            <li><a href="#about">About</a></li>
+            <li><a href="#contact">Contact</a></li>
+            <li class="dropdown">
+              <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
+              <ul class="dropdown-menu">
+                <li><a href="#">Action</a></li>
+                <li><a href="#">Another action</a></li>
+                <li><a href="#">Something else here</a></li>
+                <li class="divider"></li>
+                <li class="dropdown-header">Nav header</li>
+                <li><a href="#">Separated link</a></li>
+                <li><a href="#">One more separated link</a></li>
+              </ul>
+            </li>
+          </ul>
+          <ul class="nav navbar-nav navbar-right">
+            <li><a href="http://examples.getbootstrap.com/navbar/index.html">Default</a></li>
+            <li><a href="http://examples.getbootstrap.com/navbar-static-top/index.html">Static top</a></li>
+            <li class="active"><a href="http://examples.getbootstrap.com/navbar-fixed-top/index.html">Fixed top</a></li>
+          </ul>
+        </div><!--/.nav-collapse -->
+      </div>
+    </div>
+
+    <div class="container">
+
+      <!-- Main component for a primary marketing message or call to action -->
+      <div class="jumbotron">
+        <h1>Navbar example</h1>
+        <p>This example is a quick exercise to illustrate how the default, static navbar and fixed to top navbar work. It includes the responsive CSS and HTML, so it also adapts to your viewport and device.</p>
+        <p>
+          <a class="btn btn-large btn-primary" href="http://getbootstrap.com/components/#navbar">View navbar docs &raquo;</a>
+        </p>
+      </div>
+
+    </div> <!-- /container -->
+
+    <!-- Bootstrap core JavaScript
+    ================================================== -->
+    <!-- Placed at the end of the document so the pages load faster -->
+    <script src="../../assets/js/jquery.js"></script>
+    <script src="../../dist/js/bootstrap.min.js"></script>
+  </body>
+</html>

examples/navbar-fixed-top/navbar-fixed-top.css

@@ -0,0 +1,7 @@
+body {
+padding-top: 60px;
+}
+
+.jumbotron {
+margin-top: 20px;
+}

examples/navbar-static-top/index.html

@@ -0,0 +1,78 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="description" content="">
+    <meta name="author" content="">
+
+    <title>Static Top Navbar Example for Bootstrap</title>
+
+    <!-- Bootstrap core CSS -->
+    <link href="../../dist/css/bootstrap.css" rel="stylesheet">
+
+    <!-- Custom styles for this template -->
+    <link href="navbar-static-top.css" rel="stylesheet">
+  </head>
+
+  <body>
+
+    <!-- Static navbar -->
+    <div class="navbar navbar-static-top">
+      <div class="container">
+        <div class="navbar-header">
+          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
+            <span class="icon-bar"></span>
+            <span class="icon-bar"></span>
+            <span class="icon-bar"></span>
+          </button>
+          <a class="navbar-brand" href="#">Project name</a>
+        </div>
+        <div class="navbar-collapse collapse">
+          <ul class="nav navbar-nav">
+            <li class="active"><a href="#">Home</a></li>
+            <li><a href="#about">About</a></li>
+            <li><a href="#contact">Contact</a></li>
+            <li class="dropdown">
+              <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
+              <ul class="dropdown-menu">
+                <li><a href="#">Action</a></li>
+                <li><a href="#">Another action</a></li>
+                <li><a href="#">Something else here</a></li>
+                <li class="divider"></li>
+                <li class="dropdown-header">Nav header</li>
+                <li><a href="#">Separated link</a></li>
+                <li><a href="#">One more separated link</a></li>
+              </ul>
+            </li>
+          </ul>
+          <ul class="nav navbar-nav navbar-right">
+            <li><a href="http://examples.getbootstrap.com/navbar/index.html">Default</a></li>
+            <li class="active"><a href="http://examples.getbootstrap.com/navbar-static-top/index.html">Static top</a></li>
+            <li><a href="http://examples.getbootstrap.com/navbar-fixed-top/index.html">Fixed top</a></li>
+          </ul>
+        </div><!--/.nav-collapse -->
+      </div>
+    </div>
+
+
+    <div class="container">
+
+      <!-- Main component for a primary marketing message or call to action -->
+      <div class="jumbotron">
+        <h1>Navbar example</h1>
+        <p>This example is a quick exercise to illustrate how the default, static navbar and fixed to top navbar work. It includes the responsive CSS and HTML, so it also adapts to your viewport and device.</p>
+        <p>
+          <a class="btn btn-large btn-primary" href="http://getbootstrap.com/components/#navbar">View navbar docs &raquo;</a>
+        </p>
+      </div>
+
+    </div> <!-- /container -->
+
+    <!-- Bootstrap core JavaScript
+    ================================================== -->
+    <!-- Placed at the end of the document so the pages load faster -->
+    <script src="../../assets/js/jquery.js"></script>
+    <script src="../../dist/js/bootstrap.min.js"></script>
+  </body>
+</html>

examples/navbar-static-top/navbar-static-top.css

@@ -0,0 +1,3 @@
+.jumbotron {
+margin-top: 30px;
+}

examples/navbar/index.html

@@ -0,0 +1,77 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="description" content="">
+    <meta name="author" content="">
+
+    <title>Navbar Template for Bootstrap</title>
+
+    <!-- Bootstrap core CSS -->
+    <link href="../../dist/css/bootstrap.css" rel="stylesheet">
+
+    <!-- Custom styles for this template -->
+    <link href="navbar.css" rel="stylesheet">
+  </head>
+
+  <body>
+
+    <div class="container">
+
+      <!-- Static navbar -->
+      <div class="navbar">
+        <div class="container">
+          <div class="navbar-header">
+            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
+              <span class="icon-bar"></span>
+              <span class="icon-bar"></span>
+              <span class="icon-bar"></span>
+            </button>
+            <a class="navbar-brand" href="#">Project name</a>
+          </div>
+          <div class="navbar-collapse collapse">
+            <ul class="nav navbar-nav">
+              <li class="active"><a href="#">Home</a></li>
+              <li><a href="#about">About</a></li>
+              <li><a href="#contact">Contact</a></li>
+              <li class="dropdown">
+                <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
+                <ul class="dropdown-menu">
+                  <li><a href="#">Action</a></li>
+                  <li><a href="#">Another action</a></li>
+                  <li><a href="#">Something else here</a></li>
+                  <li class="divider"></li>
+                  <li class="dropdown-header">Nav header</li>
+                  <li><a href="#">Separated link</a></li>
+                  <li><a href="#">One more separated link</a></li>
+                </ul>
+              </li>
+            </ul>
+            <ul class="nav navbar-nav navbar-right">
+              <li class="active"><a href="http://examples.getbootstrap.com/navbar/index.html">Default</a></li>
+              <li><a href="http://examples.getbootstrap.com/navbar-static-top/index.html">Static top</a></li>
+              <li><a href="http://examples.getbootstrap.com/navbar-fixed-top/index.html">Fixed top</a></li>
+            </ul>
+          </div><!--/.nav-collapse -->
+        </div>
+      </div>
+
+      <!-- Main component for a primary marketing message or call to action -->
+      <div class="jumbotron">
+        <h1>Navbar example</h1>
+        <p>This example is a quick exercise to illustrate how the default, static navbar and fixed to top navbar work. It includes the responsive CSS and HTML, so it also adapts to your viewport and device.</p>
+        <p>
+          <a class="btn btn-large btn-primary" href="http://getbootstrap.com/components/#navbar">View navbar docs &raquo;</a>
+        </p>
+      </div>
+
+    </div> <!-- /container -->
+
+    <!-- Bootstrap core JavaScript
+    ================================================== -->
+    <!-- Placed at the end of the document so the pages load faster -->
+    <script src="../../assets/js/jquery.js"></script>
+    <script src="../../dist/js/bootstrap.min.js"></script>
+  </body>
+</html>

examples/navbar/navbar.css

@@ -0,0 +1,7 @@
+body {
+padding: 30px;
+}
+
+.navbar {
+margin-bottom: 30px;
+}

examples/offcanvas/index.html

@@ -0,0 +1,116 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="description" content="">
+    <meta name="author" content="">
+
+    <title>Off Canvas Template for Bootstrap</title>
+
+    <!-- Bootstrap core CSS -->
+    <link href="../../dist/css/bootstrap.min.css" rel="stylesheet">
+
+    <!-- Custom styles for this template -->
+    <link href="offcanvas.css" rel="stylesheet">
+  </head>
+
+  <body>
+    <div class="navbar navbar-fixed-top navbar-inverse" role="navigation">
+      <div class="container">
+        <div class="navbar-header">
+          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
+            <span class="icon-bar"></span>
+            <span class="icon-bar"></span>
+            <span class="icon-bar"></span>
+          </button>
+          <a class="navbar-brand" href="#">Project name</a>
+        </div>
+        <div class="collapse navbar-collapse">
+          <ul class="nav navbar-nav">
+            <li class="active"><a href="#">Home</a></li>
+            <li><a href="#about">About</a></li>
+            <li><a href="#contact">Contact</a></li>
+          </ul>
+        </div><!-- /.nav-collapse -->
+      </div><!-- /.container -->
+    </div><!-- /.navbar -->
+
+    <div class="container">
+
+      <div class="row row-offcanvas row-offcanvas-right">
+        <div class="col-xs-12 col-sm-9">
+          <p class="pull-right visible-xs">
+            <button type="button" class="btn btn-primary btn-xs" data-toggle="offcanvas">Toggle nav</button>
+          </p>
+          <div class="jumbotron">
+            <h1>Hello, world!</h1>
+            <p>This is an example to show the potential of an offcanvas layout pattern in Bootstrap. Try some responsive-range viewport sizes to see it in action.</p>
+          </div>
+          <div class="row">
+            <div class="col-6 col-sm-6 col-lg-4">
+              <h2>Heading</h2>
+              <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
+              <p><a class="btn btn-default" href="#">View details &raquo;</a></p>
+            </div><!--/span-->
+            <div class="col-6 col-sm-6 col-lg-4">
+              <h2>Heading</h2>
+              <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
+              <p><a class="btn btn-default" href="#">View details &raquo;</a></p>
+            </div><!--/span-->
+            <div class="col-6 col-sm-6 col-lg-4">
+              <h2>Heading</h2>
+              <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
+              <p><a class="btn btn-default" href="#">View details &raquo;</a></p>
+            </div><!--/span-->
+            <div class="col-6 col-sm-6 col-lg-4">
+              <h2>Heading</h2>
+              <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
+              <p><a class="btn btn-default" href="#">View details &raquo;</a></p>
+            </div><!--/span-->
+            <div class="col-6 col-sm-6 col-lg-4">
+              <h2>Heading</h2>
+              <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
+              <p><a class="btn btn-default" href="#">View details &raquo;</a></p>
+            </div><!--/span-->
+            <div class="col-6 col-sm-6 col-lg-4">
+              <h2>Heading</h2>
+              <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
+              <p><a class="btn btn-default" href="#">View details &raquo;</a></p>
+            </div><!--/span-->
+          </div><!--/row-->
+        </div><!--/span-->
+
+        <div class="col-xs-12 col-sm-3 sidebar-offcanvas" id="sidebar" role="navigation">
+          <div class="well sidebar-nav">
+            <ul class="nav">
+              <li>Sidebar</li>
+              <li class="active"><a href="#">Link</a></li>
+              <li><a href="#">Link</a></li>
+              <li><a href="#">Link</a></li>
+              <li>Sidebar</li>
+              <li><a href="#">Link</a></li>
+              <li><a href="#">Link</a></li>
+              <li><a href="#">Link</a></li>
+              <li>Sidebar</li>
+              <li><a href="#">Link</a></li>
+              <li><a href="#">Link</a></li>
+            </ul>
+          </div><!--/.well -->
+        </div><!--/span-->
+      </div><!--/row-->
+
+      <hr>
+
+      <footer>
+        <p>&copy; Company 2013</p>
+      </footer>
+
+    </div><!--/.container-->
+
+    <!-- jQuery and plugin -->
+    <script src="../../assets/js/jquery.js"></script>
+    <script src="../../dist/js/bootstrap.min.js"></script>
+    <script src="offcanvas.js"></script>
+  </body>
+</html>

examples/offcanvas/offcanvas.css

@@ -0,0 +1,48 @@
+/*
+ * Style twaks
+ * --------------------------------------------------
+ */
+body {
+  padding-top: 70px;
+}
+footer {
+  padding-left: 15px;
+  padding-right: 15px;
+}
+
+/*
+ * Off Canvas
+ * --------------------------------------------------
+ */
+@media screen and (max-width: 768px) {
+  .row-offcanvas {
+    position: relative;
+    overflow: hidden; /* Needed for Internet Explorer */
+    -webkit-transition: all 0.25s ease-out;
+    -moz-transition: all 0.25s ease-out;
+    transition: all 0.25s ease-out;
+  }
+
+  .row-offcanvas-right
+  .sidebar-offcanvas {
+    right: -58.333333333333336%; /* 6 columns */
+  }
+
+  .row-offcanvas-left
+  .sidebar-offcanvas {
+    left: -58.333333333333336%; /* 6 columns */
+  }
+
+  .row-offcanvas-right.active {
+    right: 58.333333333333336%; /* 6 columns */
+  }
+
+  .row-offcanvas-left.active {
+    left: 58.333333333333336%; /* 6 columns */
+  }
+
+  .sidebar-offcanvas {
+    position: absolute;
+    width: 58.333333333333336%; /* 6 columns */
+  }
+}

examples/offcanvas/offcanvas.js

@@ -0,0 +1,5 @@
+$(document).ready(function() {
+  $('[data-toggle=offcanvas]').click(function() {
+    $('.row-offcanvas').toggleClass('active');
+  });
+});

examples/signin/index.html

@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="description" content="">
+    <meta name="author" content="">
+
+    <title>Signin Template for Bootstrap</title>
+
+    <!-- Bootstrap core CSS -->
+    <link href="../../dist/css/bootstrap.css" rel="stylesheet">
+
+    <!-- Custom styles for this template -->
+    <link href="signin.css" rel="stylesheet">
+  </head>
+
+  <body>
+
+    <div class="container">
+
+      <form class="form-signin">
+        <h2 class="form-signin-heading">Please sign in</h2>
+        <input type="text" class="form-control" placeholder="Email address" autofocus>
+        <input type="password" class="form-control" placeholder="Password">
+        <label class="checkbox">
+          <input type="checkbox" value="remember-me"> Remember me
+        </label>
+        <button class="btn btn-large btn-primary btn-block" type="submit">Sign in</button>
+      </form>
+
+    </div> <!-- /container -->
+
+  </body>
+</html>

examples/signin/signin.css

@@ -0,0 +1,40 @@
+body {
+  padding-top: 40px;
+  padding-bottom: 40px;
+  background-color: #eee;
+}
+
+.form-signin {
+  max-width: 330px;
+  padding: 15px;
+  margin: 0 auto;
+}
+.form-signin .form-signin-heading,
+.form-signin .checkbox {
+  margin-bottom: 10px;
+}
+.form-signin .checkbox {
+  font-weight: normal;
+}
+.form-signin .form-control {
+  position: relative;
+  font-size: 16px;
+  height: auto;
+  padding: 10px;
+  -webkit-box-sizing: border-box;
+     -moz-box-sizing: border-box;
+          box-sizing: border-box;
+}
+.form-signin .form-control:focus {
+  z-index: 2;
+}
+.form-signin input[type="text"] {
+  margin-bottom: -1px;
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0;
+}
+.form-signin input[type="password"] {
+  margin-bottom: 10px;
+  border-top-left-radius: 0;
+  border-top-right-radius: 0;
+}

examples/starter-template/index.html

@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="description" content="">
+    <meta name="author" content="">
+
+    <title>Starter Template for Bootstrap</title>
+
+    <!-- Bootstrap core CSS -->
+    <link href="../../dist/css/bootstrap.css" rel="stylesheet">
+
+    <!-- Custom styles for this template -->
+    <link href="starter-template.css" rel="stylesheet">
+  </head>
+
+  <body>
+
+    <div class="navbar navbar-inverse navbar-fixed-top">
+      <div class="container">
+        <div class="navbar-header">
+          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
+            <span class="icon-bar"></span>
+            <span class="icon-bar"></span>
+            <span class="icon-bar"></span>
+          </button>
+          <a class="navbar-brand" href="#">Project name</a>
+        </div>
+        <div class="collapse navbar-collapse">
+          <ul class="nav navbar-nav">
+            <li class="active"><a href="#">Home</a></li>
+            <li><a href="#about">About</a></li>
+            <li><a href="#contact">Contact</a></li>
+          </ul>
+        </div><!--/.nav-collapse -->
+      </div>
+    </div>
+
+    <div class="container">
+
+      <div class="starter-template">
+        <h1>Bootstrap starter template</h1>
+        <p class="lead">Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly barebones HTML document.</p>
+      </div>
+
+    </div><!-- /.container -->
+
+    <script src="../../assets/js/jquery.js"></script>
+    <script src="../../dist/js/bootstrap.min.js"></script>
+  </body>
+</html>

examples/starter-template/starter-template.css

@@ -0,0 +1,7 @@
+body {
+  padding-top: 50px;
+}
+.starter-template {
+  padding: 40px 15px;
+  text-align: center;
+}

examples/sticky-footer-navbar/index.html

@@ -0,0 +1,77 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="description" content="">
+    <meta name="author" content="">
+
+    <title>Sticky Footer Navbar Template for Bootstrap</title>
+
+    <!-- Bootstrap core CSS -->
+    <link href="../../dist/css/bootstrap.css" rel="stylesheet">
+
+    <!-- Custom styles for this template -->
+    <link href="sticky-footer-navbar.css" rel="stylesheet">
+  </head>
+
+  <body>
+
+    <!-- Wrap all page content here -->
+    <div id="wrap">
+
+      <!-- Fixed navbar -->
+      <div class="navbar navbar-fixed-top">
+        <div class="container">
+          <div class="navbar-header">
+            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
+              <span class="icon-bar"></span>
+              <span class="icon-bar"></span>
+              <span class="icon-bar"></span>
+            </button>
+            <a class="navbar-brand" href="#">Project name</a>
+          </div>
+          <div class="collapse navbar-collapse">
+            <ul class="nav navbar-nav">
+              <li class="active"><a href="#">Home</a></li>
+              <li><a href="#about">About</a></li>
+              <li><a href="#contact">Contact</a></li>
+              <li class="dropdown">
+                <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
+                <ul class="dropdown-menu">
+                  <li><a href="#">Action</a></li>
+                  <li><a href="#">Another action</a></li>
+                  <li><a href="#">Something else here</a></li>
+                  <li class="divider"></li>
+                  <li class="dropdown-header">Nav header</li>
+                  <li><a href="#">Separated link</a></li>
+                  <li><a href="#">One more separated link</a></li>
+                </ul>
+              </li>
+            </ul>
+          </div><!--/.nav-collapse -->
+        </div>
+      </div>
+
+      <!-- Begin page content -->
+      <div class="container">
+        <div class="page-header">
+          <h1>Sticky footer with fixed navbar</h1>
+        </div>
+        <p class="lead">Pin a fixed-height footer to the bottom of the viewport in desktop browsers with this custom HTML and CSS. A fixed navbar has been added within <code>#wrap</code> with <code>padding-top: 60px;</code> on the <code>.container</code>.</p>
+        <p>Back to <a href="../sticky-footer">the default sticky footer</a> minus the navbar.</p>
+      </div>
+    </div>
+
+    <div id="footer">
+      <div class="container">
+        <p class="text-muted credit">Example courtesy <a href="http://martinbean.co.uk">Martin Bean</a> and <a href="http://ryanfait.com/sticky-footer/">Ryan Fait</a>.</p>
+      </div>
+    </div>
+
+    <!-- Bootstrap core JavaScript
+    ================================================== -->
+    <script src="../../assets/js/jquery.js"></script>
+    <script src="../../dist/js/bootstrap.min.js"></script>
+  </body>
+</html>

examples/sticky-footer-navbar/sticky-footer-navbar.css

@@ -0,0 +1,52 @@
+/* Sticky footer styles
+-------------------------------------------------- */
+
+html,
+body {
+  height: 100%;
+  /* The html and body elements cannot have any padding or margin. */
+}
+
+/* Wrapper for page content to push down footer */
+#wrap {
+  min-height: 100%;
+  height: auto !important;
+  height: 100%;
+  /* Negative indent footer by its height */
+  margin: 0 auto -60px;
+  /* Pad bottom by footer height */
+  padding: 0 0 60px;
+}
+
+/* Set the fixed height of the footer here */
+#footer {
+  height: 60px;
+  background-color: #f5f5f5;
+}
+
+/* Lastly, apply responsive CSS fixes as necessary */
+@media (max-width: 767px) {
+  #footer {
+    margin-left: -20px;
+    margin-right: -20px;
+    padding-left: 20px;
+    padding-right: 20px;
+  }
+}
+
+
+
+/* Custom page CSS
+-------------------------------------------------- */
+/* Not required for template or sticky footer method. */
+
+#wrap > .container {
+  padding: 60px 15px 0;
+}
+.container .credit {
+  margin: 20px 0;
+}
+
+code {
+  font-size: 80%;
+}

examples/sticky-footer/index.html

@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="description" content="">
+    <meta name="author" content="">
+
+    <title>Sticky Footer Template for Bootstrap</title>
+
+    <!-- Bootstrap core CSS -->
+    <link href="../../dist/css/bootstrap.css" rel="stylesheet">
+
+    <!-- Custom styles for this template -->
+    <link href="sticky-footer.css" rel="stylesheet">
+  </head>
+
+  <body>
+
+    <!-- Wrap all page content here -->
+    <div id="wrap">
+
+      <!-- Begin page content -->
+      <div class="container">
+        <div class="page-header">
+          <h1>Sticky footer</h1>
+        </div>
+        <p class="lead">Pin a fixed-height footer to the bottom of the viewport in desktop browsers with this custom HTML and CSS.</p>
+        <p>Use <a href="../sticky-footer-navbar">the sticky footer with a fixed navbar</a> if need be, too.</p>
+      </div>
+    </div>
+
+    <div id="footer">
+      <div class="container">
+        <p class="text-muted credit">Example courtesy <a href="http://martinbean.co.uk">Martin Bean</a> and <a href="http://ryanfait.com/sticky-footer/">Ryan Fait</a>.</p>
+      </div>
+    </div>
+
+  </body>
+</html>

examples/sticky-footer/sticky-footer.css

@@ -0,0 +1,48 @@
+/* Sticky footer styles
+-------------------------------------------------- */
+
+html,
+body {
+  height: 100%;
+  /* The html and body elements cannot have any padding or margin. */
+}
+
+/* Wrapper for page content to push down footer */
+#wrap {
+  min-height: 100%;
+  height: auto !important;
+  height: 100%;
+  /* Negative indent footer by its height */
+  margin: 0 auto -60px;
+  /* Pad bottom by footer height */
+  padding: 0 0 60px;
+}
+
+/* Set the fixed height of the footer here */
+#footer {
+  height: 60px;
+  background-color: #f5f5f5;
+}
+
+/* Lastly, apply responsive CSS fixes as necessary */
+@media (max-width: 767px) {
+  #footer {
+    margin-left: -20px;
+    margin-right: -20px;
+    padding-left: 20px;
+    padding-right: 20px;
+  }
+}
+
+/* Custom page CSS
+-------------------------------------------------- */
+/* Not required for template or sticky footer method. */
+
+.container {
+  width: auto;
+  max-width: 680px;
+  padding: 0 15px;
+}
+.container .credit {
+  margin: 20px 0;
+}

getting-started.html

@@ -15,11 +15,14 @@ base_url: "../"
     </div>
     <p class="lead">There are a few easy ways to quickly get started with Bootstrap, each one appealing to a different skill level and use case. Read through to see what suits your particular needs.</p>
 
+    <h3>Download latest full source</h3>
+    <p>Until Bootstrap 3.0.0 is finalized, download the latest full source code (includes compiled and minified versions of our CSS and JavaScript under the <code>dist/</code> directory).</p>
+    <p><a class="btn btn-lg btn-primary" href="{{ site.download }}" onclick="_gaq.push(['_trackEvent', 'Getting started', 'Download', 'Download source']);">Download latest Bootstrap 3</a></p>
+    <!--
     <h3>Download compiled CSS and JS</h3>
     <p class="lead">The fastest way to get started is to get the compiled and minified versions of our CSS and JavaScript. No documentation or original source files are included.</p>
-    <p><a class="btn btn-large btn-primary" href="{{ site.download_dist }}" onclick="_gaq.push(['_trackEvent', 'Getting started', 'Download', 'Download compiled']);">Download Bootstrap</a></p>
-
-    <hr>
+    <p><a class="btn btn-lg btn-primary" href="{{ site.download_dist }}" onclick="_gaq.push(['_trackEvent', 'Getting started', 'Download', 'Download compiled']);">Download Bootstrap</a></p>
+    -->
 
     <h3 id="download-options">More download options</h3>
     <div class="bs-docs-dl-options">
@@ -38,8 +41,6 @@ base_url: "../"
       {% highlight bash %}$ bower install bootstrap{% endhighlight %}
     </div>
 
-    <hr>
-
     <h3 id="download-cdn">Use the Bootstrap CDN</h3>
     <p>The folks over at <a href="https://www.netdna.com/">NetDNA</a> have graciously provided CDN support for Bootstrap's CSS and JavaScript. To use, swap your local instances for the <a href="http://www.bootstrapcdn.com/">Bootstrap CDN</a> links listed below.</p>
 {% highlight html linenos %}
@@ -77,7 +78,7 @@ bootstrap/
 │   ├── bootstrap.min.js
 {% endhighlight %}
 
-    <p>This is the most basic form of Bootstrap: compiled files for quick drop-in usage in nearly any web project. We provide compiled CSS and JS (<code>bootstrap.*</code>), as well as compiled and minified CSS and JS (<code>bootstrap.min.*</code>). The image files are compressed using <a href="http://imageoptim.com/">ImageOptim</a>, a Mac app for compressing PNGs.</p>
+    <p>This is the most basic form of Bootstrap: compiled files for quick drop-in usage in nearly any web project. We provide compiled CSS and JS (<code>bootstrap.*</code>), as well as compiled and minified CSS and JS (<code>bootstrap.min.*</code>).</p>
     <div class="bs-callout bs-callout-danger">
       <h4>jQuery required</h4>
       <p>Please note that <strong>all JavaScript plugins require jQuery</strong> to be included, as shown in the <a href="#template">starter template</a>.</p>
@@ -92,7 +93,7 @@ bootstrap/
     <div class="page-header">
       <h1 id="template">Basic template</h1>
     </div>
-    <p class="lead">Make use of a super basic HTML template, or dive into a <a href="{{ site.examples }}">few examples</a> we've started for you. We encourage folks to iterate on these examples and not simply use them as an end result.</p>
+    <p class="lead">Make use of a super basic HTML template, or dive into a <a href="../getting-started#examples">few examples</a> we've started for you. We encourage folks to iterate on these examples and not simply use them as an end result.</p>
 
     <p>Copy and paste the HTML from below to get started with a bare bones Bootstrap document.</p>
 {% highlight html %}
@@ -107,28 +108,196 @@ bootstrap/
   <body>
     <h1>Hello, world!</h1>
 
-    <!-- JavaScript plugins (requires jQuery) -->
-    <script src="http://code.jquery.com/jquery.js"></script>
+    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
+    <script src="//code.jquery.com/jquery.js"></script>
     <!-- Include all compiled plugins (below), or include individual files as needed -->
     <script src="js/bootstrap.min.js"></script>
 
-    <!-- Optionally enable responsive features in IE8 -->
+    <!-- Enable responsive features in IE8 with Respond.js (https://github.com/scottjehl/Respond) -->
     <script src="js/respond.js"></script>
   </body>
 </html>
 {% endhighlight %}
-
-    <h3>Looking for more example templates?</h3>
-    <p>Check out the new <a href="{{ site.examples_repo }}">Examples repository on GitHub</a>, or <a href="{{ site.examples }}">view them in your browser</a>. Included are over a dozen example templates for building with and extending Bootstrap.</p>
   </div>
 
 
 
-  <!-- Browser compatibility
+  <!-- Template
   ================================================== -->
   <div class="bs-docs-section">
     <div class="page-header">
-      <h1 id="browsers">Browser compatibility</h1>
+      <h1 id="examples">Examples</h1>
+    </div>
+    <p class="lead">Build on the basic template above with Bootstrap's many components. Check out some of the more advanced tips for how to customize and build on top of them.</p>
+
+    <div class="row bs-examples">
+      <div class="col-xs-6 col-md-4">
+        <a class="thumbnail" href="../examples/starter-template/">
+          <img src="../examples/screenshots/starter-template.jpg" alt="">
+        </a>
+        <h4>Starter template</h4>
+        <p>Nothing but the basics: compiled CSS and JavaScript along with a container.</p>
+      </div>
+      <div class="col-xs-6 col-md-4">
+        <a class="thumbnail" href="../examples/grid/">
+          <img src="../examples/screenshots/grid.jpg" alt="">
+        </a>
+        <h4>Grids</h4>
+        <p>Multiple examples of grid layouts with all four tiers, nesting, and more.</p>
+      </div>
+      <div class="clearfix visible-xs"></div>
+
+      <div class="col-xs-6 col-md-4">
+        <a class="thumbnail" href="../examples/jumbotron/">
+          <img src="../examples/screenshots/jumbotron.jpg" alt="">
+        </a>
+        <h4>Jumbotron</h4>
+        <p>Build around the jumbotron with a navbar and some basic grid columns.</p>
+      </div>
+      <div class="col-xs-6 col-md-4">
+        <a class="thumbnail" href="../examples/jumbotron-narrow/">
+          <img src="../examples/screenshots/jumbotron-narrow.jpg" alt="">
+        </a>
+        <h4>Narrow jumbotron</h4>
+        <p>Build a more custom page by narrowing the default container and jumbotron.</p>
+      </div>
+      <div class="clearfix visible-xs"></div>
+
+      <div class="col-xs-6 col-md-4">
+        <a class="thumbnail" href="../examples/navbar/">
+          <img src="../examples/screenshots/navbar.jpg" alt="">
+        </a>
+        <h4>Navbar</h4>
+        <p>Super basic template that includes the navbar along with some additional content.</p>
+      </div>
+      <div class="col-xs-6 col-md-4">
+        <a class="thumbnail" href="../examples/navbar-static-top/">
+          <img src="../examples/screenshots/navbar-static.jpg" alt="">
+        </a>
+        <h4>Static top navbar</h4>
+        <p>Super basic template with a static top navbar along with some additional content.</p>
+      </div>
+      <div class="clearfix visible-xs"></div>
+
+      <div class="col-xs-6 col-md-4">
+        <a class="thumbnail" href="../examples/navbar-fixed-top/">
+          <img src="../examples/screenshots/navbar-fixed.jpg" alt="">
+        </a>
+        <h4>Fixed navbar</h4>
+        <p>Super basic template with a fixed top navbar along with some additional content.</p>
+      </div>
+      <div class="col-xs-6 col-md-4">
+        <a class="thumbnail" href="../examples/signin/">
+          <img src="../examples/screenshots/sign-in.jpg" alt="">
+        </a>
+        <h4>Sign-in page</h4>
+        <p>Custom form layout and design for a simple sign in form.</p>
+      </div>
+      <div class="clearfix visible-xs"></div>
+
+      <div class="col-xs-6 col-md-4">
+        <a class="thumbnail" href="../examples/sticky-footer/">
+          <img src="../examples/screenshots/sticky-footer.jpg" alt="">
+        </a>
+        <h4>Sticky footer</h4>
+        <p>Attach a footer to the bottom of the viewport when the content is shorter than it.</p>
+      </div>
+      <div class="col-xs-6 col-md-4">
+        <a class="thumbnail" href="../examples/sticky-footer-navbar/">
+          <img src="../examples/screenshots/sticky-footer-navbar.jpg" alt="">
+        </a>
+        <h4>Sticky footer with navbar</h4>
+        <p>Attach a footer to the bottom of the viewport along with a fixed navbar at the top.</p>
+      </div>
+      <div class="clearfix visible-xs"></div>
+
+      <div class="col-xs-6 col-md-4">
+        <a class="thumbnail" href="../examples/offcanvas/">
+          <img src="../examples/screenshots/offcanvas.jpg" alt="">
+        </a>
+        <h4>Offcanvas</h4>
+        <p>Build a toggleable off-canvas navigation menu for use with Bootstrap.</p>
+      </div>
+      <div class="col-xs-6 col-md-4">
+        <a class="thumbnail" href="../examples/carousel/">
+          <img src="../examples/screenshots/carousel.jpg" alt="">
+        </a>
+        <h4>Carousel</h4>
+        <p>Customize the navbar and carousel, then add some new components.</p>
+      </div>
+
+    </div>
+
+  </div>
+
+
+
+  <!-- Template
+  ================================================== -->
+  <div class="bs-docs-section">
+    <div class="page-header">
+      <h1 id="disable-responsive">Disabling responsiveness</h1>
+    </div>
+    <p class="lead">Don't want your site or application to be scale on different device? With a little bit of work, you can disable the responsive features of Bootstrap so that mobile users see your full desktop-version site.</p>
+
+    <h3>Steps to disable responsive views</h3>
+    <p>To disable responsive features, follow these steps. See it in action in the modified template below.</p>
+    <ol>
+      <li>Remove (or just don't add) the viewport <code>&lt;meta&gt;</code> mentioned in <a href="../css/#overview-mobile">the CSS docs</a></li>
+      <li>Force a single <code>max-width</code> on the <code>.container</code> (e.g., <code>.container { max-width: 940px; }</code>). Be sure that this comes after the default Bootstrap CSS; otherwise, you'll need <code>!important</code>.</li>
+      <li>For grid layouts, make use of <code>.col-xs-*</code> classes in addition to or in place of the medium/large ones. Don't worry, the extra-small device grid scales up to all resolutions, so you're set there.</li>
+    </ol>
+    <p>You'll still need respond.js for IE8 (since our media queries are still there and need to be picked up). This just disables the "mobile site" of Bootstrap.</p>
+
+    <h3>Bootstrap template with disabled responsive</h3>
+    <p>We've taken the above steps and applied them to a basic template here. Note the steps above are called out in comments here, e.g. <code>&lt;-- 1. --&gt;</code>.</p>
+{% highlight html %}
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Disabling responsiveness in Bootstrap</title>
+
+    <!-- 1. Note there is no meta tag here -->
+
+    <!-- Load default Bootstrap -->
+    <link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
+
+    <!-- 2. Add our custom CSS to set the container's fixed width -->
+    <style>
+      .container { max-width: 940px; }
+    </style>
+  </head>
+  <body>
+
+    <h1>Hello, world!</h1>
+
+    <!-- 3. When using grid columns, use the `.col-xs-*` classes -->
+    <div class="row">
+      <div class="col-xs-4">One third</div>
+      <div class="col-xs-4">One third</div>
+      <div class="col-xs-4">One third</div>
+    </div>
+
+    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
+    <script src="//code.jquery.com/jquery.js"></script>
+
+    <!-- Include all compiled plugins (below), or include individual files as needed -->
+    <script src="js/bootstrap.min.js"></script>
+
+    <!-- Enable responsive features in IE8 with Respond.js (https://github.com/scottjehl/Respond) -->
+    <script src="js/respond.js"></script>
+  </body>
+</html>
+{% endhighlight %}
+  </div>
+
+
+
+  <!-- Browser support
+  ================================================== -->
+  <div class="bs-docs-section">
+    <div class="page-header">
+      <h1 id="browsers">Browser support</h1>
     </div>
     <p class="lead">Bootstrap is built to work best in the latest desktop and mobile browsers, meaning older and less advanced browsers might receive a less stylized, though fully functional, version of certain components.</p>
 
@@ -148,11 +317,110 @@ bootstrap/
     <p>In addition, <strong>Internet Explorer 8 requires the use of <a href="https://github.com/scottjehl/Respond">respond.js</a> to enable media query support.</strong></p>
 
     <h3>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>meta</code> tag in your pages.</p>
+    <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>meta</code> tag in your pages:</p>
 {% highlight html %}
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 {% endhighlight %}
     <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>Windows Phone 8 and Internet Explorer 10</h3>
+    <p>Internet Explorer 10 doesn't differentiate device width from viewport width, and thus doesn't properly apply the media queries in Bootstrap's CSS. To address this, you can optionally include the following CSS and JavaScript to work around this problem until Microsoft issues a fix.</p>
+{% highlight css %}
+@-webkit-viewport   { width: device-width; }
+@-moz-viewport      { width: device-width; }
+@-ms-viewport       { width: device-width; }
+@-o-viewport        { width: device-width; }
+@viewport           { width: device-width; }
+{% endhighlight %}
+
+{% highlight js %}
+if (navigator.userAgent.match(/IEMobile\/10\.0/)) {
+  var msViewportStyle = document.createElement("style")
+  msViewportStyle.appendChild(
+    document.createTextNode(
+      "@-ms-viewport{width:auto!important}"
+    )
+  )
+  document.getElementsByTagName("head")[0].appendChild(msViewportStyle)
+}
+{% 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>
+
+    <h3>Safari percent rounding</h3>
+    <p>In the latest Safari for Mac, its rendering engine has a little trouble with the long decimal places of our <code>.col-*-1</code> grid classes, meaning if you have 12 individual columns you'll notice they come up short compared to other rows of columns. There's not much we can do here (<a href="https://github.com/twbs/bootstrap/issues/9282">see #9282</a>) but you do have some options:</p>
+    <ul>
+      <li>Add <code>.pull-right</code> to your last grid column to get the hard-right alignment</li>
+      <li>Tweak your percentages manually to get the perfect rounding for Safari (more difficult than the first option)</li>
+    </ul>
+    <p>We'll keep an eye on this though and update our code if we have an easy solution.</p>
+
+    <h3>Modals and mobile devices</h3>
+    <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>
+
+    <h3>Browser zooming</h3>
+    <p>Page zooming inevitably presents rendering artifacts in some components, both in Bootstrap and the rest of the web. Depending on the issue, we may be able to fix it (search first and then open an issue if need be). However, we tend to ignore these as they often have no direct solution other than hacky workarounds.</p>
+  </div>
+
+
+
+  <!-- Third party support
+  ================================================== -->
+  <div class="bs-docs-section">
+    <div class="page-header">
+      <h1 id="third-parties">Third party support</h1>
+    </div>
+    <p class="lead">While we don't officially support any third party plugins or add-ons, we do offer some useful advice to help avoid potential issues in your projects.</p>
+
+    <h3>Google Maps</h3>
+    <p>If you're using Google Maps on a Bootstrapped project, you might run into some display problems due to our use of <code>* { box-sizing: border-box; }</code>. Previously, you may have also ran into issues with the use of <code>max-width</code> on images. The following snippet should avoid all those problems.</p>
+{% highlight css %}
+/* Fix Google Maps canvas
+ *
+ * Wrap your Google Maps embed in a `.google-map-canvas` to reset Bootstrap's
+ * global `box-sizing` changes. You may optionally need to reset the `max-width`
+ * on images in case you've applied that anywhere else. (That shouldn't be as
+ * necessary with Bootstrap 3 though as that behavior is relegated to the
+ * `.img-responsive` class.)
+ */
+
+.google-map-canvas,
+.google-map-canvas * { .box-sizing(content-box); }
+
+/* Optional responsive image override */
+img { max-width: none; }
+{% endhighlight %}
+  </div>
+
+
+
+  <!-- Accessibility
+  ================================================== -->
+  <div class="bs-docs-section">
+    <div class="page-header">
+      <h1 id="accessibility">Accessibility</h1>
+    </div>
+    <p class="lead">Bootstrap follows common web standards, and with minimal extra effort, can be used to create sites that are accessibile to those using <abbr title="Assistive Technology" class="initialism">AT</abbr>.</p>
+
+    <h3>Skip navigation</h3>
+    <p>If your navigation contains many links and comes before the main content in the DOM, add a <code>Skip to content</code> link immediately after your opening <code>&lt;body&gt;</code> tag. <a href="http://a11yproject.com/posts/skip-nav-links/">(read why)</a></p>
+{% highlight html %}
+<body>
+  <a href="#content" class="sr-only">Skip to content</a>
+  <div class="container" id="content">
+    The main page content.
+  </div>
+</body>
+{% endhighlight %}
+
+    <h3>Nested headers</h3>
+    <p>Another "gotcha" has to do with how you nest your <code>&lt;header&gt;</code> elements. <a href="http://squizlabs.github.io/HTML_CodeSniffer/Standards/Section508/">Section 508</a> states that your largest header must be an <code>h1</code>, and the next header must be an <code>&lt;h2&gt;</code>, etc. This is hard to achieve in practice, but if the largest header on your site is smaller than Bootstrap's default 38px, you should consider modifying your stylesheets before using a smaller header element.</p>
+
+    <h3>Additional resources</h3>
+    <ul>
+      <li><a href="https://github.com/squizlabs/HTML_CodeSniffer">"HTML Codesniffer" bookmarklet for identifying accessibility issues</a></li>
+      <li><a href="http://a11yproject.com/">The A11Y Project</a></li>
+      <li><a href="https://developer.mozilla.org/en-US/docs/Accessibility">MDN accessibility documentation</a></li>
+    </ul>
   </div>
 
 

index.html

@@ -4,12 +4,13 @@ title: Bootstrap
 base_url: "./"
 ---
 
-<div class="bs-masthead">
+<main class="bs-masthead" id="content" role="main">
   <div class="container">
     <h1>Bootstrap 3</h1>
     <p class="lead">Sleek, intuitive, and powerful mobile-first front-end framework for faster and easier web development.</p>
     <p>
-      <a href="{{ site.download_dist }}" class="btn btn-outline btn-large" onclick="_gaq.push(['_trackEvent', 'Jumbotron actions', 'Download', 'Download 3.0.0 RC1']);">Download Bootstrap</a>
+      <a href="{{ site.download }}" class="btn btn-outline btn-lg" onclick="_gaq.push(['_trackEvent', 'Jumbotron actions', 'Download', 'Download 3.0.0 RC2']);">Download latest BS3</a>
     </p>
+    <p><strong>Heads up!</strong> Downloads are pulled directly from the latest committed code on GitHub, and as a result our docs may at times be out of sync.</p>
   </div>
-</div>
+</main>

javascript.html

@@ -15,7 +15,7 @@ base_url: "../"
     </div>
 
     <h3 id="js-individual-compiled">Individual or compiled</h3>
-    <p>Plugins can be included individually (using bootstrap's individual <code>*.js</code> files, or all at once (using <code>bootstrap.js</code> or the minified <code>bootstrap.min.js</code>.</p>
+    <p>Plugins can be included individually (using Bootstrap's individual <code>*.js</code> files), or all at once (using <code>bootstrap.js</code> or the minified <code>bootstrap.min.js</code>).</p>
 
     <div class="bs-callout bs-callout-danger">
       <h4>Do not attempt to include both.</h4>
@@ -24,11 +24,11 @@ base_url: "../"
 
     <div class="bs-callout bs-callout-danger">
       <h4>Plugin dependencies</h4>
-      <p>Some plugins and CSS components depend on other plugins. If you include plugins individually, make sure to check for these dependencies in the docs.</p>
+      <p>Some plugins and CSS components depend on other plugins. If you include plugins individually, make sure to check for these dependencies in the docs. Also note that all plugins depend on jQuery (this means jQuery must be included <strong>before</strong> the plugin files).</p>
     </div>
 
     <h3 id="js-data-attrs">Data attributes</h3>
-    <p>You can use all Bootstrap plugins purely through the markup API without writing a single line of JavaScript. This is Bootstrap's first class API and should be your first consideration when using a plugin.</p>
+    <p>You can use all Bootstrap plugins purely through the markup API without writing a single line of JavaScript. This is Bootstrap's first-class API and should be your first consideration when using a plugin.</p>
 
     <p>That said, in some situations it may be desirable to turn this functionality off. Therefore, we also provide the ability to disable the data attribute API by unbinding all events on the document namespaced with <code>data-api</code>. This looks like this:
 {% highlight js %}
@@ -59,12 +59,12 @@ $("#myModal").modal('show')                // initializes and invokes show immed
     <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>
 {% highlight js %}
 var bootstrapButton = $.fn.button.noConflict() // return $.fn.button to previously assigned value
-$.fn.bootstrapBtn = bootstrapButton            // give $().bootstrapBtn the bootstrap functionality
+$.fn.bootstrapBtn = bootstrapButton            // give $().bootstrapBtn the Bootstrap functionality
 {% endhighlight %}
 
     <h3 id="js-events">Events</h3>
     <p>Bootstrap provides custom events for most plugin's unique actions. Generally, these come in an infinitive and past participle form - where the infinitive (ex. <code>show</code>) is triggered at the start of an event, and its past participle form (ex. <code>shown</code>) is trigger on the completion of an action.</p>
-    <p>As of 3.0.0, all bootstrap events are namespaced.</p>
+    <p>As of 3.0.0, all Bootstrap events are namespaced.</p>
     <p>All infinitive events provide <code>preventDefault</code> functionality. This provides the ability to stop the execution of an action before it starts.</p>
 {% highlight js %}
 $('#myModal').on('show.bs.modal', function (e) {
@@ -89,7 +89,7 @@ $('#myModal').on('show.bs.modal', function (e) {
     <h3>About transitions</h3>
     <p>For simple transition effects, include <code>transition.js</code> once alongside the other JS files. If you're using the compiled (or minified) <code>bootstrap.js</code>, there is no need to include this&mdash;it's already there.</p>
     <h3>What's inside</h3>
-    <p>Transition.js is a basic helper for transitionEnd events as well as a css transition emulator. It's used by the other plugins to check for css transition support and to catch hanging transitions.</p>
+    <p>Transition.js is a basic helper for <code>transitionEnd</code> events as well as a CSS transition emulator. It's used by the other plugins to check for CSS transition support and to catch hanging transitions.</p>
   </div>
 
 
@@ -189,14 +189,14 @@ $('#myModal').on('show.bs.modal', function (e) {
     </div><!-- /.modal -->
 
     <div class="bs-example" style="padding-bottom: 24px;">
-      <a data-toggle="modal" href="#myModal" class="btn btn-primary btn-large">Launch demo modal</a>
+      <a data-toggle="modal" href="#myModal" class="btn btn-primary btn-lg">Launch demo modal</a>
     </div><!-- /example -->
 {% highlight html %}
   <!-- Button trigger modal -->
-  <a data-toggle="modal" href="#myModal" class="btn btn-primary btn-large">Launch demo modal</a>
+  <a data-toggle="modal" href="#myModal" class="btn btn-primary btn-lg">Launch demo modal</a>
 
   <!-- Modal -->
-  <div class="modal fade" id="myModal">
+  <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
     <div class="modal-dialog">
       <div class="modal-content">
         <div class="modal-header">
@@ -207,14 +207,25 @@ $('#myModal').on('show.bs.modal', function (e) {
           ...
         </div>
         <div class="modal-footer">
-          <a href="#" class="btn">Close</a>
-          <a href="#" class="btn btn-primary">Save changes</a>
+          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
+          <button type="button" class="btn btn-primary">Save changes</button>
         </div>
       </div><!-- /.modal-content -->
     </div><!-- /.modal-dialog -->
   </div><!-- /.modal -->
 {% endhighlight %}
 
+
+    <div class="bs-callout bs-callout-warning">
+      <h4>Make modals accessible</h4>
+      <p>
+        Be sure to add <code>role="dialog"</code> to your primary modal div. In the example above, <code>div#myModal</code>.<br>
+        Also, the <code>aria-labelledby</code> attribute references your modal title. In this example, <code>h4#myModalLabel</code>.<br>
+        Finally, <code>aria-hidden="true"</code> tells assistive technologies to skip DOM elements.<br>
+        Additionally, you may give a description of your modal dialog. Use the <code>aria-describedby</code> attribute in the modal's primary <code>&lt;div&gt;</code> to point to this description (this is not shown in the above example).
+      </p>
+    </div>
+
     <h2 id="modals-usage">Usage</h2>
 
     <h3>Via data attributes</h3>
@@ -262,7 +273,7 @@ $('#myModal').on('show.bs.modal', function (e) {
            <td>remote</td>
            <td>path</td>
            <td>false</td>
-           <td><p>If a remote URL is provided, content will be loaded via jQuery's <code>load</code> method and injected into the <code>.modal-body</code>. If you're using the data api, you may alternatively use the <code>href</code> tag to specify the remote source. An example of this is shown below:</p>
+           <td><p>If a remote URL is provided, content will be loaded via jQuery's <code>load</code> method and injected into the root of the modal element. If you're using the data api, you may alternatively use the <code>href</code> attribute to specify the remote source. An example of this is shown below:</p>
 {% highlight html %}
 <a data-toggle="modal" href="remote.html" data-target="#modal">Click me</a>
 {% endhighlight %}
@@ -305,19 +316,19 @@ $('#myModal').modal({
         </thead>
         <tbody>
          <tr>
-           <td>show</td>
+           <td>show.bs.modal</td>
            <td>This event fires immediately when the <code>show</code> instance method is called.</td>
          </tr>
          <tr>
-           <td>shown</td>
+           <td>shown.bs.modal</td>
            <td>This event is fired when the modal has been made visible to the user (will wait for CSS transitions to complete).</td>
          </tr>
          <tr>
-           <td>hide</td>
+           <td>hide.bs.modal</td>
            <td>This event is fired immediately when the <code>hide</code> instance method has been called.</td>
          </tr>
          <tr>
-           <td>hidden</td>
+           <td>hidden.bs.modal</td>
            <td>This event is fired when the modal has finished being hidden from the user (will wait for CSS transitions to complete).</td>
          </tr>
         </tbody>
@@ -344,52 +355,53 @@ $('#myModal').on('hidden.bs.modal', function () {
 
     <h3>Within a navbar</h3>
     <div class="bs-example">
-      <div id="navbar-example" class="navbar navbar-static">
-        <div class="container" style="width: auto;">
-          <a class="navbar-brand" href="#">Project Name</a>
+      <nav id="navbar-example" class="navbar navbar-static" role="navigation">
+        <div class="navbar-header">
           <button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".bs-js-navbar-collapse">
+            <span class="sr-only">Toggle navigation</span>
             <span class="icon-bar"></span>
             <span class="icon-bar"></span>
             <span class="icon-bar"></span>
           </button>
-          <div class="nav-collapse collapse bs-js-navbar-collapse">
-            <ul class="nav navbar-nav" role="navigation">
-              <li class="dropdown">
-                <a id="drop1" href="#" role="button" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
-                <ul class="dropdown-menu" role="menu" aria-labelledby="drop1">
-                  <li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Action</a></li>
-                  <li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Another action</a></li>
-                  <li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Something else here</a></li>
-                  <li role="presentation" class="divider"></li>
-                  <li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Separated link</a></li>
-                </ul>
-              </li>
-              <li class="dropdown">
-                <a href="#" id="drop2" role="button" class="dropdown-toggle" data-toggle="dropdown">Dropdown 2 <b class="caret"></b></a>
-                <ul class="dropdown-menu" role="menu" aria-labelledby="drop2">
-                  <li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Action</a></li>
-                  <li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Another action</a></li>
-                  <li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Something else here</a></li>
-                  <li role="presentation" class="divider"></li>
-                  <li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Separated link</a></li>
-                </ul>
-              </li>
-            </ul>
-            <ul class="nav navbar-nav pull-right">
-              <li id="fat-menu" class="dropdown">
-                <a href="#" id="drop3" role="button" class="dropdown-toggle" data-toggle="dropdown">Dropdown 3 <b class="caret"></b></a>
-                <ul class="dropdown-menu" role="menu" aria-labelledby="drop3">
-                  <li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Action</a></li>
-                  <li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Another action</a></li>
-                  <li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Something else here</a></li>
-                  <li role="presentation" class="divider"></li>
-                  <li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Separated link</a></li>
-                </ul>
-              </li>
-            </ul>
-          </div><!-- /.nav-collapse -->
-        </div><!-- /.container -->
-      </div> <!-- /navbar-example -->
+          <a class="navbar-brand" href="#">Project Name</a>
+        </div>
+        <div class="collapse navbar-collapse bs-js-navbar-collapse">
+          <ul class="nav navbar-nav">
+            <li class="dropdown">
+              <a id="drop1" href="#" role="button" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
+              <ul class="dropdown-menu" role="menu" aria-labelledby="drop1">
+                <li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Action</a></li>
+                <li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Another action</a></li>
+                <li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Something else here</a></li>
+                <li role="presentation" class="divider"></li>
+                <li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Separated link</a></li>
+              </ul>
+            </li>
+            <li class="dropdown">
+              <a href="#" id="drop2" role="button" class="dropdown-toggle" data-toggle="dropdown">Dropdown 2 <b class="caret"></b></a>
+              <ul class="dropdown-menu" role="menu" aria-labelledby="drop2">
+                <li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Action</a></li>
+                <li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Another action</a></li>
+                <li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Something else here</a></li>
+                <li role="presentation" class="divider"></li>
+                <li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Separated link</a></li>
+              </ul>
+            </li>
+          </ul>
+          <ul class="nav navbar-nav navbar-right">
+            <li id="fat-menu" class="dropdown">
+              <a href="#" id="drop3" role="button" class="dropdown-toggle" data-toggle="dropdown">Dropdown 3 <b class="caret"></b></a>
+              <ul class="dropdown-menu" role="menu" aria-labelledby="drop3">
+                <li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Action</a></li>
+                <li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Another action</a></li>
+                <li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Something else here</a></li>
+                <li role="presentation" class="divider"></li>
+                <li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Separated link</a></li>
+              </ul>
+            </li>
+          </ul>
+        </div><!-- /.nav-collapse -->
+      </nav> <!-- /navbar-example -->
     </div> <!-- /example -->
 
     <h3>Within tabs</h3>
@@ -397,7 +409,7 @@ $('#myModal').on('hidden.bs.modal', function () {
       <ul class="nav nav-pills">
         <li class="active"><a href="#">Regular link</a></li>
         <li class="dropdown">
-          <a class="dropdown-toggle" id="drop4" role="button" data-toggle="dropdown" href="#">Dropdown <b class="caret"></b></a>
+          <a id="drop4" role="button" data-toggle="dropdown" href="#">Dropdown <b class="caret"></b></a>
           <ul id="menu1" class="dropdown-menu" role="menu" aria-labelledby="drop4">
             <li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Action</a></li>
             <li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Another action</a></li>
@@ -407,7 +419,7 @@ $('#myModal').on('hidden.bs.modal', function () {
           </ul>
         </li>
         <li class="dropdown">
-          <a class="dropdown-toggle" id="drop5" role="button" data-toggle="dropdown" href="#">Dropdown 2 <b class="caret"></b></a>
+          <a id="drop5" role="button" data-toggle="dropdown" href="#">Dropdown 2 <b class="caret"></b></a>
           <ul id="menu2" class="dropdown-menu" role="menu" aria-labelledby="drop5">
             <li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Action</a></li>
             <li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Another action</a></li>
@@ -417,7 +429,7 @@ $('#myModal').on('hidden.bs.modal', function () {
           </ul>
         </li>
         <li class="dropdown">
-          <a class="dropdown-toggle" id="drop6" role="button" data-toggle="dropdown" href="#">Dropdown 3 <b class="caret"></b></a>
+          <a id="drop6" role="button" data-toggle="dropdown" href="#">Dropdown 3 <b class="caret"></b></a>
           <ul id="menu3" class="dropdown-menu" role="menu" aria-labelledby="drop6">
             <li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Action</a></li>
             <li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Another action</a></li>
@@ -436,7 +448,7 @@ $('#myModal').on('hidden.bs.modal', function () {
     <p>Add <code>data-toggle="dropdown"</code> to a link or button to toggle a dropdown.</p>
 {% highlight html %}
 <div class="dropdown">
-  <a class="dropdown-toggle" data-toggle="dropdown" href="#">Dropdown trigger</a>
+  <a data-toggle="dropdown" href="#">Dropdown trigger</a>
   <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
     ...
   </ul>
@@ -445,7 +457,7 @@ $('#myModal').on('hidden.bs.modal', function () {
           <p>To keep URLs intact, use the <code>data-target</code> attribute instead of <code>href="#"</code>.</p>
 {% highlight html %}
 <div class="dropdown">
-  <a class="dropdown-toggle" id="dLabel" role="button" data-toggle="dropdown" data-target="#" href="/page.html">
+  <a id="dLabel" role="button" data-toggle="dropdown" data-target="#" href="/page.html">
     Dropdown <span class="caret"></span>
   </a>
   <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
@@ -465,11 +477,44 @@ $('.dropdown-toggle').dropdown()
 
     <h3>Methods</h3>
     <h4>$().dropdown('toggle')</h4>
-    <p>A programmatic api for toggling menus for a given navbar or tabbed navigation.</p>
+    <p>Toggles the dropdown menu of a given navbar or tabbed navigation.</p>
+
+    <h3>Events</h3>
+    <div class="bs-table-scrollable">
+      <table class="table table-bordered table-striped">
+        <thead>
+          <tr>
+            <th style="width: 150px;">Event Type</th>
+            <th>Description</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr>
+            <td>show.bs.dropdown</td>
+            <td>This event fires immediately when the show instance method is called.</td>
+          </tr>
+          <tr>
+            <td>shown.bs.dropdown</td>
+            <td>This event is fired when the dropdown has been made visible to the user (will wait for CSS transitions, to complete).</td>
+          </tr>
+          <tr>
+            <td>hide.bs.dropdown</td>
+            <td>This event is fired immediately when the hide instance method has been called.</td>
+          </tr>
+          <tr>
+            <td>hidden.bs.dropdown</td>
+            <td>This event is fired when the dropdown has finished being hidden from the user (will wait for CSS transitions, to complete).</td>
+          </tr>
+        </tbody>
+      </table>
+    </div><!-- ./bs-table-scrollable -->
+{% highlight js %}
+$('#myDropdown').on('show.bs.dropdown', function () {
+  // do something…
+})
+{% endhighlight %}
   </div>
 
-
-
   <!-- ScrollSpy
   ================================================== -->
   <div class="bs-docs-section">
@@ -481,26 +526,32 @@ $('.dropdown-toggle').dropdown()
     <h2 id="scrollspy-examples">Example in navbar</h2>
     <p>The ScrollSpy plugin is for automatically updating nav targets based on scroll position. Scroll the area below the navbar and watch the active class change. The dropdown sub items will be highlighted as well.</p>
     <div class="bs-example">
-      <div id="navbar-example2" class="navbar navbar-static">
-        <div class="navbar-inner">
-          <div class="container" style="width: auto;">
-            <a class="navbar-brand" href="#">Project Name</a>
-            <ul class="nav navbar-nav">
-              <li><a href="#fat">@fat</a></li>
-              <li><a href="#mdo">@mdo</a></li>
-              <li class="dropdown">
-                <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
-                <ul class="dropdown-menu">
-                  <li><a href="#one">one</a></li>
-                  <li><a href="#two">two</a></li>
-                  <li class="divider"></li>
-                  <li><a href="#three">three</a></li>
-                </ul>
-              </li>
-            </ul>
-          </div>
+      <nav id="navbar-example2" class="navbar navbar-static" role="navigation">
+        <div class="navbar-header">
+          <button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".bs-js-navbar-scrollspy">
+            <span class="sr-only">Toggle navigation</span>
+            <span class="icon-bar"></span>
+            <span class="icon-bar"></span>
+            <span class="icon-bar"></span>
+          </button>
+          <a class="navbar-brand" href="#">Project Name</a>
         </div>
-      </div>
+        <div class="collapse navbar-collapse bs-js-navbar-scrollspy">
+          <ul class="nav navbar-nav">
+            <li><a href="#fat">@fat</a></li>
+            <li><a href="#mdo">@mdo</a></li>
+            <li class="dropdown">
+              <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
+              <ul class="dropdown-menu">
+                <li><a href="#one">one</a></li>
+                <li><a href="#two">two</a></li>
+                <li class="divider"></li>
+                <li><a href="#three">three</a></li>
+              </ul>
+            </li>
+          </ul>
+        </div>
+      </nav>
       <div data-spy="scroll" data-target="#navbar-example2" data-offset="0" class="scrollspy-example">
         <h4 id="fat">@fat</h4>
         <p>Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.</p>
@@ -531,7 +582,7 @@ $('.dropdown-toggle').dropdown()
     <h3>Via JavaScript</h3>
     <p>Call the scrollspy via JavaScript:</p>
 {% highlight js %}
-$('#navbar-example').scrollspy(options)
+$('body').scrollspy({ target: '#navbar-example' })
 {% endhighlight %}
 
     <div class="bs-callout bs-callout-danger">
@@ -545,7 +596,7 @@ $('#navbar-example').scrollspy(options)
 {% highlight js %}
 $('[data-spy="scroll"]').each(function () {
   var $spy = $(this).scrollspy('refresh')
-});
+})
 {% endhighlight %}
 
 
@@ -583,7 +634,7 @@ $('[data-spy="scroll"]').each(function () {
         </thead>
         <tbody>
          <tr>
-           <td>activate</td>
+           <td>activate.bs.scrollspy</td>
            <td>This event fires whenever a new item becomes activated by the scrollspy.</td>
         </tr>
         </tbody>
@@ -640,17 +691,17 @@ $('#myScrollspy').on('activate.bs.scrollspy', function () {
     <p>Enable tabbable tabs via JavaScript (each tab needs to be activated individually):</p>
 {% highlight js %}
 $('#myTab a').click(function (e) {
-  e.preventDefault();
-  $(this).tab('show');
+  e.preventDefault()
+  $(this).tab('show')
 })
 {% endhighlight %}
 
           <p>You can activate individual tabs in several ways:</p>
 {% highlight js %}
-$('#myTab a[href="#profile"]').tab('show'); // Select tab by name
-$('#myTab a:first').tab('show'); // Select first tab
-$('#myTab a:last').tab('show'); // Select last tab
-$('#myTab li:eq(2) a').tab('show'); // Select third tab (0-indexed)
+$('#myTab a[href="#profile"]').tab('show') // Select tab by name
+$('#myTab a:first').tab('show') // Select first tab
+$('#myTab a:last').tab('show') // Select last tab
+$('#myTab li:eq(2) a').tab('show') // Select third tab (0-indexed)
 {% endhighlight %}
 
     <h3>Markup</h3>
@@ -688,7 +739,7 @@ $('#myTab li:eq(2) a').tab('show'); // Select third tab (0-indexed)
 
 <script>
   $(function () {
-    $('#myTab a:last').tab('show');
+    $('#myTab a:last').tab('show')
   })
 </script>
 {% endhighlight %}
@@ -704,11 +755,11 @@ $('#myTab li:eq(2) a').tab('show'); // Select third tab (0-indexed)
         </thead>
         <tbody>
          <tr>
-           <td>show</td>
+           <td>show.bs.tab</td>
            <td>This event fires on tab show, but before the new tab has been shown. Use <code>event.target</code> and <code>event.relatedTarget</code> to target the active tab and the previous active tab (if available) respectively.</td>
         </tr>
         <tr>
-           <td>shown</td>
+           <td>shown.bs.tab</td>
            <td>This event fires on tab show after a tab has been shown. Use <code>event.target</code> and <code>event.relatedTarget</code> to target the active tab and the previous active tab (if available) respectively.</td>
          </tr>
         </tbody>
@@ -802,7 +853,7 @@ $('#example').tooltip(options)
            <td>title</td>
            <td>string | function</td>
            <td>''</td>
-           <td>default title value if <code>title</code> tag isn't present</td>
+           <td>default title value if <code>title</code> attribute isn't present</td>
          </tr>
          <tr>
            <td>trigger</td>
@@ -873,19 +924,19 @@ $('#example').tooltip(options)
         </thead>
         <tbody>
          <tr>
-           <td>show</td>
+           <td>show.bs.tooltip</td>
            <td>This event fires immediately when the <code>show</code> instance method is called.</td>
          </tr>
          <tr>
-           <td>shown</td>
+           <td>shown.bs.tooltip</td>
            <td>This event is fired when the tooltip has been made visible to the user (will wait for CSS transitions to complete).</td>
          </tr>
          <tr>
-           <td>hide</td>
+           <td>hide.bs.tooltip</td>
            <td>This event is fired immediately when the <code>hide</code> instance method has been called.</td>
          </tr>
          <tr>
-           <td>hidden</td>
+           <td>hidden.bs.tooltip</td>
            <td>This event is fired when the tooltip has finished being hidden from the user (will wait for CSS transitions to complete).</td>
          </tr>
         </tbody>
@@ -893,7 +944,7 @@ $('#example').tooltip(options)
     </div><!-- /.bs-table-scrollable -->
 {% highlight js %}
 $('#myTooltip').on('hidden.bs.tooltip', function () {
-// do something…
+  // do something…
 })
 {% endhighlight %}
   </div>
@@ -957,22 +1008,22 @@ $('#myTooltip').on('hidden.bs.tooltip', function () {
 
     <h3>Live demo</h3>
     <div class="bs-example" style="padding-bottom: 24px;">
-      <a href="#" class="btn btn-large btn-danger" data-toggle="popover" title="A Title" data-content="And here's some amazing content. It's very engaging. right?">Click to toggle popover</a>
+      <a href="#" class="btn btn-lg btn-danger" data-toggle="popover" title="A Title" data-content="And here's some amazing content. It's very engaging. right?">Click to toggle popover</a>
     </div>
 
     <h4>Four directions</h4>
     <div class="bs-example tooltip-demo">
       <div class="bs-example-tooltips">
-        <button type="button" class="btn btn-default" data-toggle="popover" data-placement="left" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
+        <button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="left" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
           Popover on left
         </button>
-        <button type="button" class="btn btn-default" data-toggle="popover" data-placement="top" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
+        <button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="top" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
           Popover on top
         </button>
-        <button type="button" class="btn btn-default" data-toggle="popover" data-placement="bottom" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
+        <button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="bottom" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
           Popover on bottom
         </button>
-        <button type="button" class="btn btn-default" data-toggle="popover" data-placement="right" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
+        <button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="right" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
           Popover on right
         </button>
       </div>
@@ -1097,19 +1148,19 @@ $('#myTooltip').on('hidden.bs.tooltip', function () {
         </thead>
         <tbody>
          <tr>
-           <td>show</td>
+           <td>show.bs.popover</td>
            <td>This event fires immediately when the <code>show</code> instance method is called.</td>
          </tr>
          <tr>
-           <td>shown</td>
+           <td>shown.bs.popover</td>
            <td>This event is fired when the popover has been made visible to the user (will wait for CSS transitions to complete).</td>
          </tr>
          <tr>
-           <td>hide</td>
+           <td>hide.bs.popover</td>
            <td>This event is fired immediately when the <code>hide</code> instance method has been called.</td>
          </tr>
          <tr>
-           <td>hidden</td>
+           <td>hidden.bs.popover</td>
            <td>This event is fired when the popover has finished being hidden from the user (will wait for CSS transitions to complete).</td>
          </tr>
         </tbody>
@@ -1134,14 +1185,14 @@ $('#myPopover').on('hidden.bs.popover', function () {
     <p>Add dismiss functionality to all alert messages with this plugin.</p>
     <div class="bs-example">
       <div class="alert fade in">
-        <button type="button" class="close" data-dismiss="alert">&times;</button>
+        <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</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-block alert-error fade in">
-        <button type="button" class="close" data-dismiss="alert">&times;</button>
+      <div class="alert alert-block alert-danger fade in">
+        <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</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>
@@ -1157,7 +1208,7 @@ $('#myPopover').on('hidden.bs.popover', function () {
 
     <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 %}<a class="close" data-dismiss="alert" href="#">&times;</a>{% endhighlight %}
+    {% highlight html %}<a class="close" data-dismiss="alert" href="#" aria-hidden="true">&times;</a>{% endhighlight %}
 
     <h3>Methods</h3>
 
@@ -1181,11 +1232,11 @@ $('#myPopover').on('hidden.bs.popover', function () {
         </thead>
         <tbody>
           <tr>
-            <td>close</td>
+            <td>close.bs.alert</td>
             <td>This event fires immediately when the <code>close</code> instance method is called.</td>
           </tr>
           <tr>
-            <td>closed</td>
+            <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>
@@ -1358,42 +1409,48 @@ $('.nav-tabs').button()
     </div>
 
     <h2 id="collapse-examples">Example accordion</h2>
-    <p>Using the collapse plugin, we built a simple accordion style widget:</p>
+    <p>Using the collapse plugin, we built a simple accordion by extending the panel component.</p>
 
     <div class="bs-example">
-      <div class="accordion" id="accordion2">
-        <div class="accordion-group">
-          <div class="accordion-heading">
-            <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne">
-              Collapsible Group Item #1
-            </a>
+      <div class="panel-group" id="accordion">
+        <div class="panel">
+          <div class="panel-heading">
+            <h3 class="panel-title">
+              <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
+                Collapsible Group Item #1
+              </a>
+            </h3>
           </div>
-          <div id="collapseOne" class="accordion-body collapse in">
-            <div class="accordion-inner">
+          <div id="collapseOne" class="panel-collapse collapse in">
+            <div class="panel-body">
               Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
             </div>
           </div>
         </div>
-        <div class="accordion-group">
-          <div class="accordion-heading">
-            <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseTwo">
-              Collapsible Group Item #2
-            </a>
+        <div class="panel">
+          <div class="panel-heading">
+            <h3 class="panel-title">
+              <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">
+                Collapsible Group Item #2
+              </a>
+            </h3>
           </div>
-          <div id="collapseTwo" class="accordion-body collapse">
-            <div class="accordion-inner">
+          <div id="collapseTwo" class="panel-collapse collapse">
+            <div class="panel-body">
               Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
             </div>
           </div>
         </div>
-        <div class="accordion-group">
-          <div class="accordion-heading">
-            <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseThree">
-              Collapsible Group Item #3
-            </a>
+        <div class="panel">
+          <div class="panel-heading">
+            <h3 class="panel-title">
+              <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseThree">
+                Collapsible Group Item #3
+              </a>
+            </h3>
           </div>
-          <div id="collapseThree" class="accordion-body collapse">
-            <div class="accordion-inner">
+          <div id="collapseThree" class="panel-collapse collapse">
+            <div class="panel-body">
               Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
             </div>
           </div>
@@ -1401,40 +1458,46 @@ $('.nav-tabs').button()
       </div>
     </div><!-- /example -->
 {% highlight html %}
-<div class="accordion" id="accordion2">
-  <div class="accordion-group">
-    <div class="accordion-heading">
-      <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne">
-        Collapsible Group Item #1
-      </a>
+<div class="panel-group" id="accordion">
+  <div class="panel">
+    <div class="panel-heading">
+      <h3 class="panel-title">
+        <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
+          Collapsible Group Item #1
+        </a>
+      </h3>
     </div>
-    <div id="collapseOne" class="accordion-body collapse in">
-      <div class="accordion-inner">
-        ...
+    <div id="collapseOne" class="panel-collapse collapse in">
+      <div class="panel-body">
+        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
       </div>
     </div>
   </div>
-  <div class="accordion-group">
-    <div class="accordion-heading">
-      <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseTwo">
-        Collapsible Group Item #2
-      </a>
+  <div class="panel">
+    <div class="panel-heading">
+      <h3 class="panel-title">
+        <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">
+          Collapsible Group Item #2
+        </a>
+      </h3>
     </div>
-    <div id="collapseTwo" class="accordion-body collapse">
-      <div class="accordion-inner">
-        ...
+    <div id="collapseTwo" class="panel-collapse collapse">
+      <div class="panel-body">
+        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
       </div>
     </div>
   </div>
-  <div class="accordion-group">
-    <div class="accordion-heading">
-      <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseThree">
-        Collapsible Group Item #3
-      </a>
+  <div class="panel">
+    <div class="panel-heading">
+      <h3 class="panel-title">
+        <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseThree">
+          Collapsible Group Item #3
+        </a>
+      </h3>
     </div>
-    <div id="collapseThree" class="accordion-body collapse">
-      <div class="accordion-inner">
-        ...
+    <div id="collapseThree" class="panel-collapse collapse">
+      <div class="panel-body">
+        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
       </div>
     </div>
   </div>
@@ -1480,7 +1543,7 @@ $(".collapse").collapse()
            <td>parent</td>
            <td>selector</td>
            <td>false</td>
-           <td>If selector then all collapsible elements under the specified parent will be closed when this collapsible item is shown. (similar to traditional accordion behavior)</td>
+           <td>If selector then all collapsible elements under the specified parent will be closed when this collapsible item is shown. (similar to traditional accordion behavior - this dependent on the <code>accordion-group</code> class)</td>
          </tr>
          <tr>
            <td>toggle</td>
@@ -1523,21 +1586,21 @@ $('#myCollapsible').collapse({
         </thead>
         <tbody>
          <tr>
-           <td>show</td>
+           <td>show.bs.collapse</td>
            <td>This event fires immediately when the <code>show</code> instance method is called.</td>
          </tr>
          <tr>
-           <td>shown</td>
+           <td>shown.bs.collapse</td>
            <td>This event is fired when a collapse element has been made visible to the user (will wait for CSS transitions to complete).</td>
          </tr>
          <tr>
-           <td>hide</td>
+           <td>hide.bs.collapse</td>
            <td>
             This event is fired immediately when the <code>hide</code> method has been called.
            </td>
          </tr>
          <tr>
-           <td>hidden</td>
+           <td>hidden.bs.collapse</td>
            <td>This event is fired when a collapse element has been hidden from the user (will wait for CSS transitions to complete).</td>
          </tr>
         </tbody>
@@ -1570,13 +1633,13 @@ $('#myCollapsible').on('hidden.bs.collapse', function () {
         </ol>
         <div class="carousel-inner">
           <div class="item active">
-            <img data-src="holder.js/900x500/auto/#777:#555/text:First slide" alt="">
+            <img src="data:image/png;base64," data-src="holder.js/900x500/auto/#777:#555/text:First slide" alt="First slide">
           </div>
           <div class="item">
-            <img data-src="holder.js/900x500/auto/#666:#444/text:Second slide" alt="">
+            <img src="data:image/png;base64," data-src="holder.js/900x500/auto/#666:#444/text:Second slide" alt="Second slide">
           </div>
           <div class="item">
-            <img data-src="holder.js/900x500/auto/#555:#333/text:Third slide" alt="">
+            <img src="data:image/png;base64," data-src="holder.js/900x500/auto/#555:#333/text:Third slide" alt="Third slide">
           </div>
         </div>
         <a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
@@ -1599,7 +1662,7 @@ $('#myCollapsible').on('hidden.bs.collapse', function () {
   <!-- Wrapper for slides -->
   <div class="carousel-inner">
     <div class="item active">
-      <img src="..." alt="">
+      <img src="..." alt="...">
       <div class="carousel-caption">
         ...
       </div>
@@ -1632,21 +1695,21 @@ $('#myCollapsible').on('hidden.bs.collapse', function () {
         </ol>
         <div class="carousel-inner">
           <div class="item active">
-            <img data-src="holder.js/900x500/auto/#777:#777" alt="">
+            <img data-src="holder.js/900x500/auto/#777:#777" src="data:image/png;base64," alt="First slide image">
             <div class="carousel-caption">
               <h3>First slide label</h3>
               <p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
             </div>
           </div>
           <div class="item">
-            <img data-src="holder.js/900x500/auto/#666:#666" alt="">
+            <img data-src="holder.js/900x500/auto/#666:#666" src="data:image/png;base64," alt="Second slide image">
             <div class="carousel-caption">
               <h3>Second slide label</h3>
               <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
             </div>
           </div>
           <div class="item">
-            <img data-src="holder.js/900x500/auto/#555:#5555" alt="">
+            <img data-src="holder.js/900x500/auto/#555:#5555" src="data:image/png;base64," alt="Third slide image">
             <div class="carousel-caption">
               <h3>Third slide label</h3>
               <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p>
@@ -1663,7 +1726,7 @@ $('#myCollapsible').on('hidden.bs.collapse', function () {
     </div><!-- /example -->
 {% highlight html %}
 <div class="item active">
-  <img src="..." alt="">
+  <img src="..." alt="...">
   <div class="carousel-caption">
     <h3>...</h3>
     <p>...</p>
@@ -1671,6 +1734,10 @@ $('#myCollapsible').on('hidden.bs.collapse', function () {
 </div>
 {% endhighlight %}
 
+<div class="bs-callout bs-callout-danger">
+  <h4>Accessibility issue</h4>
+  <p>The carousel component is generally not compliant with accessibility standards. If you need to be compliant, please consider other options for presenting your content.</p>
+</div>
 
     <h2 id="carousel-usage">Usage</h2>
 
@@ -1708,6 +1775,12 @@ $('.carousel').carousel()
            <td>"hover"</td>
            <td>Pauses the cycling of the carousel on mouseenter and resumes the cycling of the carousel on mouseleave.</td>
          </tr>
+         <tr>
+           <td>wrap</td>
+           <td>boolean</td>
+           <td>true</td>
+           <td>Whether the carousel should cycle continuously or have hard stops.</td>
+         </tr>
         </tbody>
       </table>
     </div><!-- /.bs-table-scrollable -->
@@ -1716,7 +1789,7 @@ $('.carousel').carousel()
 
     <h4>.carousel(options)</h4>
     <p>Initializes the carousel with an optional options <code>object</code> and starts cycling through items.</p>
-{% highlight html %}
+{% highlight js %}
 $('.carousel').carousel({
   interval: 2000
 })
@@ -1750,11 +1823,11 @@ $('.carousel').carousel({
         </thead>
         <tbody>
          <tr>
-           <td>slide</td>
+           <td>slide.bs.carousel</td>
            <td>This event fires immediately when the <code>slide</code> instance method is invoked.</td>
          </tr>
          <tr>
-           <td>slid</td>
+           <td>slid.bs.carousel</td>
            <td>This event is fired when the carousel has completed its slide transition.</td>
          </tr>
         </tbody>
@@ -1794,7 +1867,7 @@ $('#myCarousel').on('slide.bs.carousel', function () {
       <h4>Requires independent styling ;)</h4>
       <p>
         Affix toggles between three states/classes: <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).
-        The <code>affix-top</code> class should be in the regular flow of the document. The <code>affix</code> class should be fixed to the page. And <code>affix-bottom</code> should be positioned absolute. Note, <code>affix-bottom</code> is special in that the plugin will place the element with js relative to the <code>offset: { bottom: number }</code> option you've provided.
+        The <code>affix-top</code> class should be in the regular flow of the document. The <code>affix</code> class should be fixed to the page. And <code>affix-bottom</code> should be positioned absolute. Note, <code>affix-bottom</code> is special in that the plugin will place the element with JS relative to the <code>offset: { bottom: number }</code> option you've provided.
       </p>
     </div>
 

js/button.js

@@ -56,7 +56,9 @@
     var $parent = this.$element.closest('[data-toggle="buttons"]')
 
     if ($parent.length) {
-      var $input = this.$element.find('input').prop('checked', !this.$element.hasClass('active'))
+      var $input = this.$element.find('input')
+        .prop('checked', !this.$element.hasClass('active'))
+        .trigger('change')
       if ($input.prop('type') === 'radio') $parent.find('.active').removeClass('active')
     }
 

js/carousel.js

@@ -41,6 +41,7 @@
   Carousel.DEFAULTS = {
     interval: 5000
   , pause: 'hover'
+  , wrap: true
   }
 
   Carousel.prototype.cycle =  function (e) {
@@ -105,12 +106,15 @@
     var fallback  = type == 'next' ? 'first' : 'last'
     var that      = this
 
+    if (!$next.length) {
+      if (!this.options.wrap) return
+      $next = this.$element.find('.item')[fallback]()
+    }
+
     this.sliding = true
 
     isCycling && this.pause()
 
-    $next = $next.length ? $next : this.$element.find('.item')[fallback]()
-
     var e = $.Event('slide.bs.carousel', { relatedTarget: $next[0], direction: direction })
 
     if ($next.hasClass('active')) return

js/collapse.js

@@ -48,7 +48,7 @@
     this.$element.trigger(startEvent)
     if (startEvent.isDefaultPrevented()) return
 
-    var actives   = this.$parent && this.$parent.find('> .accordion-group > .in')
+    var actives = this.$parent && this.$parent.find('> .panel > .in')
 
     if (actives && actives.length) {
       var hasData = actives.data('bs.collapse')
@@ -169,7 +169,7 @@
     var $parent = parent && $(parent)
 
     if (!data || !data.transitioning) {
-      if ($parent) $parent.find('[data-toggle=collapse][data-parent=' + parent + ']').not($this).addClass('collapsed')
+      if ($parent) $parent.find('[data-toggle=collapse][data-parent="' + parent + '"]').not($this).addClass('collapsed')
       $this[$target.hasClass('in') ? 'addClass' : 'removeClass']('collapsed')
     }
 

js/modal.js

@@ -29,7 +29,7 @@
     this.$backdrop =
     this.isShown   = null
 
-    if (this.options.remote) this.$element.find('.modal-body').load(this.options.remote)
+    if (this.options.remote) this.$element.load(this.options.remote)
   }
 
   Modal.DEFAULTS = {
@@ -38,13 +38,13 @@
     , show: true
   }
 
-  Modal.prototype.toggle = function () {
-    return this[!this.isShown ? 'show' : 'hide']()
+  Modal.prototype.toggle = function (_relatedTarget) {
+    return this[!this.isShown ? 'show' : 'hide'](_relatedTarget)
   }
 
-  Modal.prototype.show = function () {
+  Modal.prototype.show = function (_relatedTarget) {
     var that = this
-    var e    = $.Event('show.bs.modal')
+    var e    = $.Event('show.bs.modal', { relatedTarget: _relatedTarget })
 
     this.$element.trigger(e)
 
@@ -73,13 +73,15 @@
 
       that.enforceFocus()
 
+      var e = $.Event('shown.bs.modal', { relatedTarget: _relatedTarget })
+
       transition ?
         that.$element
           .one($.support.transition.end, function () {
-            that.$element.focus().trigger('shown.bs.modal')
+            that.$element.focus().trigger(e)
           })
           .emulateTransitionEnd(300) :
-        that.$element.focus().trigger('shown.bs.modal')
+        that.$element.focus().trigger(e)
     })
   }
 
@@ -101,6 +103,7 @@
     this.$element
       .removeClass('in')
       .attr('aria-hidden', true)
+      .off('click.dismiss.modal')
 
     $.support.transition && this.$element.hasClass('fade') ?
       this.$element
@@ -153,7 +156,7 @@
       this.$backdrop = $('<div class="modal-backdrop ' + animate + '" />')
         .appendTo(document.body)
 
-      this.$element.on('click', $.proxy(function (e) {
+      this.$element.on('click.dismiss.modal', $.proxy(function (e) {
         if (e.target !== e.currentTarget) return
         this.options.backdrop == 'static'
           ? this.$element[0].focus.call(this.$element[0])
@@ -192,15 +195,15 @@
 
   var old = $.fn.modal
 
-  $.fn.modal = function (option) {
+  $.fn.modal = function (option, _relatedTarget) {
     return this.each(function () {
       var $this   = $(this)
       var data    = $this.data('bs.modal')
       var options = $.extend({}, Modal.DEFAULTS, $this.data(), typeof option == 'object' && option)
 
       if (!data) $this.data('bs.modal', (data = new Modal(this, options)))
-      if (typeof option == 'string') data[option]()
-      else if (options.show) data.show()
+      if (typeof option == 'string') data[option](_relatedTarget)
+      else if (options.show) data.show(_relatedTarget)
     })
   }
 
@@ -223,21 +226,19 @@
     var $this   = $(this)
     var href    = $this.attr('href')
     var $target = $($this.attr('data-target') || (href && href.replace(/.*(?=#[^\s]+$)/, ''))) //strip for ie7
-    var option  = $target.data('modal') ? 'toggle' : $.extend({ remote:!/#/.test(href) && href }, $target.data(), $this.data())
+    var option  = $target.data('modal') ? 'toggle' : $.extend({ remote: !/#/.test(href) && href }, $target.data(), $this.data())
 
     e.preventDefault()
 
     $target
-      .modal(option)
+      .modal(option, this)
       .one('hide', function () {
         $this.is(':visible') && $this.focus()
       })
   })
 
-  $(function () {
-    var $body = $(document.body)
-      .on('shown.bs.modal',  '.modal', function () { $body.addClass('modal-open') })
-      .on('hidden.bs.modal', '.modal', function () { $body.removeClass('modal-open') })
-  })
+  $(document)
+    .on('shown.bs.modal',  '.modal', function () { $(document.body).addClass('modal-open') })
+    .on('hidden.bs.modal', '.modal', function () { $(document.body).removeClass('modal-open') })
 
 }(window.jQuery);

js/popover.js

@@ -58,7 +58,9 @@
 
     $tip.removeClass('fade top bottom left right in')
 
-    $tip.find('.popover-title:empty').hide()
+    // IE8 doesn't accept hiding via the `:empty` pseudo selector, we have to do
+    // this manually by checking the contents.
+    if (!$tip.find('.popover-title').html()) $tip.find('.popover-title').hide()
   }
 
   Popover.prototype.hasContent = function () {
@@ -75,6 +77,10 @@
             o.content)
   }
 
+  Popover.prototype.arrow = function () {
+    return this.$arrow = this.$arrow || this.tip().find('.arrow')
+  }
+
   Popover.prototype.tip = function () {
     if (!this.$tip) this.$tip = $(this.options.template)
     return this.$tip

js/tests/unit/collapse.js

@@ -126,4 +126,39 @@ $(function () {
         target3.click()
       })
 
+      test("should allow dots in data-parent", function () {
+        $.support.transition = false
+        stop()
+
+        var accordion = $('<div class="accordion"><div class="accordion-group"></div><div class="accordion-group"></div><div class="accordion-group"></div></div>')
+          .appendTo($('#qunit-fixture'))
+
+        var target1 = $('<a data-toggle="collapse" href="#body1" data-parent=".accordion"></a>')
+          .appendTo(accordion.find('.accordion-group').eq(0))
+
+        var collapsible1 = $('<div id="body1" class="in"></div>')
+          .appendTo(accordion.find('.accordion-group').eq(0))
+
+        var target2 = $('<a class="collapsed" data-toggle="collapse" href="#body2" data-parent=".accordion"></a>')
+          .appendTo(accordion.find('.accordion-group').eq(1))
+
+        var collapsible2 = $('<div id="body2"></div>')
+          .appendTo(accordion.find('.accordion-group').eq(1))
+
+        var target3 = $('<a class="collapsed" data-toggle="collapse" href="#body3" data-parent=".accordion"></a>')
+          .appendTo(accordion.find('.accordion-group').eq(2))
+
+        var collapsible3 = $('<div id="body3"></div>')
+          .appendTo(accordion.find('.accordion-group').eq(2))
+          .on('show.bs.collapse', function () {
+            ok(target1.hasClass('collapsed'))
+            ok(target2.hasClass('collapsed'))
+            ok(!target3.hasClass('collapsed'))
+
+            start()
+          })
+
+        target3.click()
+      })
+
 })

js/tests/unit/modal.js

@@ -1,156 +1,177 @@
 $(function () {
 
-    module("modal")
+  module("modal")
 
-      test("should provide no conflict", function () {
-        var modal = $.fn.modal.noConflict()
-        ok(!$.fn.modal, 'modal was set back to undefined (org value)')
-        $.fn.modal = modal
-      })
+    test("should provide no conflict", function () {
+      var modal = $.fn.modal.noConflict()
+      ok(!$.fn.modal, 'modal was set back to undefined (org value)')
+      $.fn.modal = modal
+    })
 
-      test("should be defined on jquery object", function () {
-        var div = $("<div id='modal-test'></div>")
-        ok(div.modal, 'modal method is defined')
-      })
+    test("should be defined on jquery object", function () {
+      var div = $("<div id='modal-test'></div>")
+      ok(div.modal, 'modal method is defined')
+    })
 
-      test("should return element", function () {
-        var div = $("<div id='modal-test'></div>")
-        ok(div.modal() == div, 'document.body returned')
-        $('#modal-test').remove()
-      })
+    test("should return element", function () {
+      var div = $("<div id='modal-test'></div>")
+      ok(div.modal() == div, 'document.body returned')
+      $('#modal-test').remove()
+    })
 
-      test("should expose defaults var for settings", function () {
-        ok($.fn.modal.Constructor.DEFAULTS, 'default object exposed')
-      })
+    test("should expose defaults var for settings", function () {
+      ok($.fn.modal.Constructor.DEFAULTS, 'default object exposed')
+    })
 
-      test("should insert into dom when show method is called", function () {
-        stop()
-        $.support.transition = false
-        $("<div id='modal-test'></div>")
-          .on("shown.bs.modal", function () {
-            ok($('#modal-test').length, 'modal inserted into dom')
-            $(this).remove()
-            start()
-          })
-          .modal("show")
-      })
+    test("should insert into dom when show method is called", function () {
+      stop()
+      $.support.transition = false
+      $("<div id='modal-test'></div>")
+        .on("shown.bs.modal", function () {
+          ok($('#modal-test').length, 'modal inserted into dom')
+          $(this).remove()
+          start()
+        })
+        .modal("show")
+    })
 
-      test("should fire show event", function () {
-        stop()
-        $.support.transition = false
-        $("<div id='modal-test'></div>")
-          .on("show.bs.modal", function () {
-            ok(true, "show was called")
-          })
-          .on("shown.bs.modal", function () {
-            $(this).remove()
-            start()
-          })
-          .modal("show")
-      })
+    test("should fire show event", function () {
+      stop()
+      $.support.transition = false
+      $("<div id='modal-test'></div>")
+        .on("show.bs.modal", function () {
+          ok(true, "show was called")
+        })
+        .on("shown.bs.modal", function () {
+          $(this).remove()
+          start()
+        })
+        .modal("show")
+    })
 
-      test("should not fire shown when default prevented", function () {
-        stop()
-        $.support.transition = false
-        $("<div id='modal-test'></div>")
-          .on("show.bs.modal", function (e) {
-            e.preventDefault()
-            ok(true, "show was called")
-            start()
-          })
-          .on("shown.bs.modal", function () {
-            ok(false, "shown was called")
-          })
-          .modal("show")
-      })
+    test("should not fire shown when default prevented", function () {
+      stop()
+      $.support.transition = false
+      $("<div id='modal-test'></div>")
+        .on("show.bs.modal", function (e) {
+          e.preventDefault()
+          ok(true, "show was called")
+          start()
+        })
+        .on("shown.bs.modal", function () {
+          ok(false, "shown was called")
+        })
+        .modal("show")
+    })
 
-      test("should hide modal when hide is called", function () {
-        stop()
-        $.support.transition = false
+    test("should hide modal when hide is called", function () {
+      stop()
+      $.support.transition = false
 
-        $("<div id='modal-test'></div>")
-          .on("shown.bs.modal", function () {
-            ok($('#modal-test').is(":visible"), 'modal visible')
-            ok($('#modal-test').length, 'modal inserted into dom')
-            $(this).modal("hide")
-          })
-          .on("hidden.bs.modal", function() {
-            ok(!$('#modal-test').is(":visible"), 'modal hidden')
-            $('#modal-test').remove()
-            start()
-          })
-          .modal("show")
-      })
+      $("<div id='modal-test'></div>")
+        .on("shown.bs.modal", function () {
+          ok($('#modal-test').is(":visible"), 'modal visible')
+          ok($('#modal-test').length, 'modal inserted into dom')
+          $(this).modal("hide")
+        })
+        .on("hidden.bs.modal", function() {
+          ok(!$('#modal-test').is(":visible"), 'modal hidden')
+          $('#modal-test').remove()
+          start()
+        })
+        .modal("show")
+    })
 
-      test("should toggle when toggle is called", function () {
-        stop()
-        $.support.transition = false
-        var div = $("<div id='modal-test'></div>")
-        div
-          .on("shown.bs.modal", function () {
-            ok($('#modal-test').is(":visible"), 'modal visible')
-            ok($('#modal-test').length, 'modal inserted into dom')
-            div.modal("toggle")
-          })
-          .on("hidden.bs.modal", function() {
-            ok(!$('#modal-test').is(":visible"), 'modal hidden')
-            div.remove()
-            start()
-          })
-          .modal("toggle")
-      })
+    test("should toggle when toggle is called", function () {
+      stop()
+      $.support.transition = false
+      var div = $("<div id='modal-test'></div>")
+      div
+        .on("shown.bs.modal", function () {
+          ok($('#modal-test').is(":visible"), 'modal visible')
+          ok($('#modal-test').length, 'modal inserted into dom')
+          div.modal("toggle")
+        })
+        .on("hidden.bs.modal", function() {
+          ok(!$('#modal-test').is(":visible"), 'modal hidden')
+          div.remove()
+          start()
+        })
+        .modal("toggle")
+    })
 
-      test("should remove from dom when click [data-dismiss=modal]", function () {
-        stop()
-        $.support.transition = false
-        var div = $("<div id='modal-test'><span class='close' data-dismiss='modal'></span></div>")
-        div
-          .on("shown.bs.modal", function () {
-            ok($('#modal-test').is(":visible"), 'modal visible')
-            ok($('#modal-test').length, 'modal inserted into dom')
-            div.find('.close').click()
-          })
-          .on("hidden.bs.modal", function() {
-            ok(!$('#modal-test').is(":visible"), 'modal hidden')
-            div.remove()
-            start()
-          })
-          .modal("toggle")
-      })
+    test("should remove from dom when click [data-dismiss=modal]", function () {
+      stop()
+      $.support.transition = false
+      var div = $("<div id='modal-test'><span class='close' data-dismiss='modal'></span></div>")
+      div
+        .on("shown.bs.modal", function () {
+          ok($('#modal-test').is(":visible"), 'modal visible')
+          ok($('#modal-test').length, 'modal inserted into dom')
+          div.find('.close').click()
+        })
+        .on("hidden.bs.modal", function() {
+          ok(!$('#modal-test').is(":visible"), 'modal hidden')
+          div.remove()
+          start()
+        })
+        .modal("toggle")
+    })
 
-      test("should allow modal close with 'backdrop:false'", function () {
-        stop()
-        $.support.transition = false
-        var div = $("<div>", { id: 'modal-test', "data-backdrop": false })
-        div
-          .on("shown.bs.modal", function () {
-            ok($('#modal-test').is(":visible"), 'modal visible')
-            div.modal("hide")
-          })
-          .on("hidden.bs.modal", function() {
-            ok(!$('#modal-test').is(":visible"), 'modal hidden')
-            div.remove()
-            start()
-          })
-          .modal("show")
-      })
+    test("should allow modal close with 'backdrop:false'", function () {
+      stop()
+      $.support.transition = false
+      var div = $("<div>", { id: 'modal-test', "data-backdrop": false })
+      div
+        .on("shown.bs.modal", function () {
+          ok($('#modal-test').is(":visible"), 'modal visible')
+          div.modal("hide")
+        })
+        .on("hidden.bs.modal", function() {
+          ok(!$('#modal-test').is(":visible"), 'modal hidden')
+          div.remove()
+          start()
+        })
+        .modal("show")
+    })
 
-      test("should close modal when clicking outside of modal-content", function () {
-        stop()
-        $.support.transition = false
-        var div = $("<div id='modal-test'><div class='contents'></div></div>")
-        div
-          .bind("shown.bs.modal", function () {
-            ok($('#modal-test').length, 'modal insterted into dom')
-            $('.contents').click()
-            ok($('#modal-test').is(":visible"), 'modal visible')
-            $('#modal-test').click()
-          })
-          .bind("hidden.bs.modal", function() {
-            ok(!$('#modal-test').is(":visible"), 'modal hidden')
-            div.remove()
-            start()
-          })
-          .modal("show")
-      })
+    test("should close modal when clicking outside of modal-content", function () {
+      stop()
+      $.support.transition = false
+      var div = $("<div id='modal-test'><div class='contents'></div></div>")
+      div
+        .bind("shown.bs.modal", function () {
+          ok($('#modal-test').length, 'modal insterted into dom')
+          $('.contents').click()
+          ok($('#modal-test').is(":visible"), 'modal visible')
+          $('#modal-test').click()
+        })
+        .bind("hidden.bs.modal", function() {
+          ok(!$('#modal-test').is(":visible"), 'modal hidden')
+          div.remove()
+          start()
+        })
+        .modal("show")
+    })
+
+    test("should trigger hide event once when clicking outside of modal-content", function () {
+      stop()
+      $.support.transition = false
+      var div = $("<div id='modal-test'><div class='contents'></div></div>")
+      var triggered
+      div
+        .bind("shown.bs.modal", function () {
+          triggered = 0
+          $('#modal-test').click()
+        })
+        .one("hidden.bs.modal", function() {
+          div.modal("show")
+        })
+        .bind("hide.bs.modal", function () {
+          triggered += 1
+          ok(triggered === 1, 'modal hide triggered once')
+          start()
+        })
+        .modal("show")
+    })
 })

js/tooltip.js

@@ -1,6 +1,6 @@
 /* ========================================================================
  * Bootstrap: tooltip.js v3.0.0
- * http://twbs.github.com/bootstrap/javascript.html#affix
+ * http://twbs.github.com/bootstrap/javascript.html#tooltip
  * Inspired by the original jQuery.tipsy by Jason Frame
  * ========================================================================
  * Copyright 2012 Twitter, Inc.
@@ -64,7 +64,7 @@
         var eventIn  = trigger == 'hover' ? 'mouseenter' : 'focus'
         var eventOut = trigger == 'hover' ? 'mouseleave' : 'blur'
 
-        this.$element.on(eventIn + '.' + this.type, this.options.selector, $.proxy(this.enter, this))
+        this.$element.on(eventIn  + '.' + this.type, this.options.selector, $.proxy(this.enter, this))
         this.$element.on(eventOut + '.' + this.type, this.options.selector, $.proxy(this.leave, this))
       }
     }
@@ -91,16 +91,20 @@
     return options
   }
 
-  Tooltip.prototype.enter = function (obj) {
-    var defaults = this.getDefaults()
+  Tooltip.prototype.getDelegateOptions = function () {
     var options  = {}
+    var defaults = this.getDefaults()
 
     this._options && $.each(this._options, function (key, value) {
       if (defaults[key] != value) options[key] = value
     })
 
+    return options
+  }
+
+  Tooltip.prototype.enter = function (obj) {
     var self = obj instanceof this.constructor ?
-      obj : $(obj.currentTarget)[this.type](options).data('bs.' + this.type)
+      obj : $(obj.currentTarget)[this.type](this.getDelegateOptions()).data('bs.' + this.type)
 
     clearTimeout(self.timeout)
 
@@ -114,7 +118,7 @@
 
   Tooltip.prototype.leave = function (obj) {
     var self = obj instanceof this.constructor ?
-      obj : $(obj.currentTarget)[this.type](this._options).data('bs.' + this.type)
+      obj : $(obj.currentTarget)[this.type](this.getDelegateOptions()).data('bs.' + this.type)
 
     clearTimeout(self.timeout)
 
@@ -179,12 +183,9 @@
           .addClass(placement)
       }
 
-      var tp = placement == 'bottom' ? { top: pos.top + pos.height,   left: pos.left + pos.width / 2 - actualWidth / 2  } :
-               placement == 'top'    ? { top: pos.top - actualHeight, left: pos.left + pos.width / 2 - actualWidth / 2  } :
-               placement == 'left'   ? { top: pos.top + pos.height / 2 - actualHeight / 2, left: pos.left - actualWidth } :
-            /* placement == 'right' */ { top: pos.top + pos.height / 2 - actualHeight / 2, left: pos.left + pos.width   }
+      var calculatedOffset = this.getCalculatedOffset(placement, pos, actualWidth, actualHeight)
 
-      this.applyPlacement(tp, placement)
+      this.applyPlacement(calculatedOffset, placement)
       this.$element.trigger('shown.bs.' + this.type)
     }
   }
@@ -196,25 +197,33 @@
     var height = $tip[0].offsetHeight
 
     // manually read margins because getBoundingClientRect includes difference
-    offset.top  = offset.top  + parseInt($tip.css('margin-top'), 10)
-    offset.left = offset.left + parseInt($tip.css('margin-left'), 10)
+    var marginTop = parseInt($tip.css('margin-top'), 10)
+    var marginLeft = parseInt($tip.css('margin-left'), 10)
+
+    // we must check for NaN for ie 8/9
+    if (isNaN(marginTop))  marginTop  = 0
+    if (isNaN(marginLeft)) marginLeft = 0
+
+    offset.top  = offset.top  + marginTop
+    offset.left = offset.left + marginLeft
 
     $tip
       .offset(offset)
       .addClass('in')
 
+    // check to see if placing tip in new offset caused the tip to resize itself
     var actualWidth  = $tip[0].offsetWidth
     var actualHeight = $tip[0].offsetHeight
 
     if (placement == 'top' && actualHeight != height) {
       replace = true
-      offset.top  = offset.top + height - actualHeight
+      offset.top = offset.top + height - actualHeight
     }
 
-    if (placement == 'bottom' || placement == 'top') {
+    if (/bottom|top/.test(placement)) {
       var delta = 0
 
-      if (offset.left < 0){
+      if (offset.left < 0) {
         delta       = offset.left * -2
         offset.left = 0
 
@@ -249,6 +258,8 @@
     var $tip = this.tip()
     var e    = $.Event('hide.bs.' + this.type)
 
+    function complete() { $tip.detach() }
+
     this.$element.trigger(e)
 
     if (e.isDefaultPrevented()) return
@@ -257,9 +268,9 @@
 
     $.support.transition && this.$tip.hasClass('fade') ?
       $tip
-        .one($.support.transition.end, $tip.detach)
+        .one($.support.transition.end, complete)
         .emulateTransitionEnd(150) :
-      $tip.detach()
+      complete()
 
     this.$element.trigger('hidden.bs.' + this.type)
 
@@ -285,6 +296,13 @@
     }, this.$element.offset())
   }
 
+  Tooltip.prototype.getCalculatedOffset = function (placement, pos, actualWidth, actualHeight) {
+    return placement == 'bottom' ? { top: pos.top + pos.height,   left: pos.left + pos.width / 2 - actualWidth / 2  } :
+           placement == 'top'    ? { top: pos.top - actualHeight, left: pos.left + pos.width / 2 - actualWidth / 2  } :
+           placement == 'left'   ? { top: pos.top + pos.height / 2 - actualHeight / 2, left: pos.left - actualWidth } :
+        /* placement == 'right' */ { top: pos.top + pos.height / 2 - actualHeight / 2, left: pos.left + pos.width   }
+  }
+
   Tooltip.prototype.getTitle = function () {
     var title
     var $e = this.$element
@@ -300,8 +318,8 @@
     return this.$tip = this.$tip || $(this.options.template)
   }
 
-  Tooltip.prototype.arrow =function(){
-    return this.$arrow = this.$arrow || this.tip().find(".tooltip-arrow")
+  Tooltip.prototype.arrow = function () {
+    return this.$arrow = this.$arrow || this.tip().find('.tooltip-arrow')
   }
 
   Tooltip.prototype.validate = function () {
@@ -325,7 +343,7 @@
   }
 
   Tooltip.prototype.toggle = function (e) {
-    var self = e ? $(e.currentTarget)[this.type](this._options).data('bs.' + this.type) : this
+    var self = e ? $(e.currentTarget)[this.type](this.getDelegateOptions()).data('bs.' + this.type) : this
     self.tip().hasClass('in') ? self.leave(self) : self.enter(self)
   }
 

less/accordion.less

@@ -1,31 +0,0 @@
-//
-// Accordion
-// --------------------------------------------------
-
-
-// Parent container
-.accordion {
-  margin-bottom: @line-height-computed;
-}
-
-// Group == heading + body
-.accordion-group {
-  margin-bottom: 2px;
-  border: 1px solid @accordion-border-color;
-  border-radius: @border-radius-base;
-}
-.accordion-heading {
-  border-bottom: 0;
-
-  .accordion-toggle {
-    display: block;
-    padding: 8px 15px;
-    cursor: pointer;
-  }
-}
-
-// Inner needs the styles because you can't animate properly with any styles on the element
-.accordion-inner {
-  padding: 9px 15px;
-  border-top: 1px solid @accordion-border-color;
-}

less/alerts.less

@@ -7,7 +7,7 @@
 // -------------------------
 
 .alert {
-  padding: 10px 35px 10px 15px;
+  padding: @alert-padding;
   margin-bottom: @line-height-computed;
   color: @alert-text;
   background-color: @alert-bg;
@@ -26,10 +26,27 @@
   }
   // Provide class for links that match alerts
   .alert-link {
-    font-weight: 500;
+    font-weight: @alert-link-font-weight;
     color: darken(@alert-text, 10%);
   }
 
+  // Improve alignment and spacing of inner content
+  > p,
+  > ul {
+    margin-bottom: 0;
+  }
+  > p + p {
+    margin-top: 5px;
+  }
+}
+
+// Dismissable alerts
+//
+// Expand the right padding and account for the close button's positioning.
+
+.alert-dismissable {
+ padding-right: (@alert-padding + 20);
+
   // Adjust close link position
   .close {
     position: relative;
@@ -40,30 +57,15 @@
 }
 
 // Alternate styles
-// -------------------------
+//
+// Generate contextual modifier classes for colorizing the alert.
 
 .alert-success {
-  .alert-variant(@alert-success-bg, @alert-success-border, @alert-success-text);
+  .alert-variant(@alert-success-bg; @alert-success-border; @alert-success-text);
 }
 .alert-danger {
-  .alert-variant(@alert-danger-bg, @alert-danger-border, @alert-danger-text);
+  .alert-variant(@alert-danger-bg; @alert-danger-border; @alert-danger-text);
 }
 .alert-info {
-  .alert-variant(@alert-info-bg, @alert-info-border, @alert-info-text);
-}
-
-// Block alerts
-// -------------------------
-
-.alert-block {
-  padding-top: 15px;
-  padding-bottom: 15px;
-
-  > p,
-  > ul {
-    margin-bottom: 0;
-  }
-  p + p {
-    margin-top: 5px;
-  }
+  .alert-variant(@alert-info-bg; @alert-info-border; @alert-info-text);
 }

less/badges.less

@@ -9,16 +9,16 @@
   min-width: 10px;
   padding: 3px 7px;
   font-size: @font-size-small;
-  font-weight: bold;
+  font-weight: @badge-font-weight;
   color: @badge-color;
-  line-height: 1;
+  line-height: @badge-line-height;
   vertical-align: baseline;
   white-space: nowrap;
   text-align: center;
   background-color: @badge-bg;
-  border-radius: 10px;
+  border-radius: @badge-border-radius;
 
-  // Empty labels/badges collapse
+  // Empty badges collapse automatically (not available in IE8)
   &:empty {
     display: none;
   }

less/bootstrap.less

@@ -55,7 +55,6 @@
 @import "labels.less";
 @import "badges.less";
 @import "progress-bars.less";
-@import "accordion.less";
 @import "carousel.less";
 @import "jumbotron.less";
 

less/button-groups.less

@@ -3,11 +3,34 @@
 // --------------------------------------------------
 
 // Button carets
-.btn .caret {
-  border-top-color: @btn-default-color;
+//
+// Match the button text color to the arrow/caret for indicating dropdown-ness.
+
+.caret {
+  .btn-default & {
+    border-top-color: @btn-default-color;
+  }
+  .btn-primary &,
+  .btn-success &,
+  .btn-warning &,
+  .btn-danger &,
+  .btn-info & {
+    border-top-color: #fff;
+  }
 }
-.dropup .btn .caret {
-  border-bottom-color: @btn-default-color;
+.dropup {
+  & .btn-default .caret {
+    border-bottom-color: @btn-default-color;
+  }
+  & .btn-primary,
+  & .btn-success,
+  & .btn-warning,
+  & .btn-danger,
+  & .btn-info {
+   .caret {
+      border-bottom-color: #fff;
+    }
+  }
 }
 
 // Make the div behave like a button
@@ -22,15 +45,25 @@
     // Bring the "active" button to the front
     &:hover,
     &:focus,
-    &:active {
+    &:active,
+    &.active {
       z-index: 2;
     }
+    &:focus {
+      // Remove focus outline when dropdown JS adds it after closing the menu
+      outline: none;
+    }
   }
 }
 
 // Prevent double borders when buttons are next to each other
-.btn-group .btn + .btn {
-  margin-left: -1px;
+.btn-group {
+  .btn + .btn,
+  .btn + .btn-group,
+  .btn-group + .btn,
+  .btn-group + .btn-group {
+    margin-left: -1px;
+  }
 }
 
 // Optional: Group multiple button groups together for a toolbar
@@ -91,6 +124,14 @@
 }
 
 
+// Sizing
+//
+// Remix the default button sizing classes into new ones for easier manipulation.
+
+.btn-group-xs > .btn { .btn-xs(); }
+.btn-group-sm > .btn { .btn-sm(); }
+.btn-group-lg > .btn { .btn-lg(); }
+
 
 // Split button dropdowns
 // ----------------------
@@ -100,7 +141,7 @@
   padding-left: 8px;
   padding-right: 8px;
 }
-.btn-group > .btn-large + .dropdown-toggle {
+.btn-group > .btn-lg + .dropdown-toggle {
   padding-left: 12px;
   padding-right: 12px;
 }
@@ -117,38 +158,70 @@
   margin-left: 0;
 }
 // Carets in other button sizes
-.btn-large .caret {
-  border-width: 5px;
+.btn-lg .caret {
+  border-width: @caret-width-large;
 }
 // Upside down carets for .dropup
-.dropup .btn-large .caret {
-  border-bottom-width: 5px;
+.dropup .btn-lg .caret {
+  border-bottom-width: @caret-width-large;
 }
 
 
 // Vertical button groups
 // ----------------------
 
-.btn-group-vertical > .btn {
-  display: block;
-  float: none;
-  width: 100%;
-  max-width: 100%;
-  + .btn {
+.btn-group-vertical {
+  > .btn,
+  > .btn-group {
+    display: block;
+    float: none;
+    width: 100%;
+    max-width: 100%;
+  }
+
+  // Clear floats so dropdown menus can be properly placed
+  > .btn-group {
+    .clearfix();
+    > .btn {
+      float: none;
+    }
+  }
+
+  > .btn + .btn,
+  > .btn + .btn-group,
+  > .btn-group + .btn,
+  > .btn-group + .btn-group {
     margin-top: -1px;
+    margin-left: 0;
   }
 }
-.btn-group-vertical .btn {
+
+.btn-group-vertical > .btn {
   &:not(:first-child):not(:last-child) {
     border-radius: 0;
   }
-  &:first-child {
+  &:first-child:not(:last-child) {
+    border-top-right-radius: @border-radius-base;
     .border-bottom-radius(0);
   }
-  &:last-child {
+  &:last-child:not(:first-child) {
+    border-bottom-left-radius: @border-radius-base;
     .border-top-radius(0);
   }
 }
+.btn-group-vertical > .btn-group:not(:first-child):not(:last-child) > .btn {
+  border-radius: 0;
+}
+.btn-group-vertical > .btn-group:first-child {
+  > .btn:last-child,
+  > .dropdown-toggle {
+    .border-bottom-radius(0);
+  }
+}
+.btn-group-vertical > .btn-group:last-child > .btn:first-child {
+  .border-top-radius(0);
+}
+
 
 
 // Justified button groups
@@ -157,6 +230,8 @@
 .btn-group-justified {
   display: table;
   width: 100%;
+  table-layout: fixed;
+  border-collapse: separate;
   .btn {
     float: none;
     display: table-cell;
@@ -166,7 +241,7 @@
 
 
 // Checkbox and radio options
-.btn-group[data-toggle="buttons"] > .btn > input[type="radio"],
-.btn-group[data-toggle="buttons"] > .btn > input[type="checkbox"] {
+[data-toggle="buttons"] > .btn > input[type="radio"],
+[data-toggle="buttons"] > .btn > input[type="checkbox"] {
   display: none;
 }

less/buttons.less

@@ -12,7 +12,7 @@
   padding: @padding-base-vertical @padding-base-horizontal;
   margin-bottom: 0; // For input.btn
   font-size: @font-size-base;
-  font-weight: 500;
+  font-weight: @btn-font-weight;
   line-height: @line-height-base;
   text-align: center;
   vertical-align: middle;
@@ -28,20 +28,21 @@
 
   &:hover,
   &:focus {
-    color: @btn-hover-color;
+    color: @btn-default-color;
     text-decoration: none;
   }
 
   &:active,
   &.active {
     outline: 0;
+    background-image: none;
     .box-shadow(inset 0 3px 5px rgba(0,0,0,.125));
   }
 
   &.disabled,
   &[disabled],
   fieldset[disabled] & {
-    cursor: default;
+    cursor: not-allowed;
     pointer-events: none; // Future-proof disabling of clicks
     .opacity(.65);
     .box-shadow(none);
@@ -54,26 +55,26 @@
 // --------------------------------------------------
 
 .btn-default {
-  .btn-pseudo-states(@btn-default-color, @btn-default-bg, @btn-default-border);
+  .button-variant(@btn-default-color; @btn-default-bg; @btn-default-border);
 }
 .btn-primary {
-  .btn-pseudo-states(@btn-primary-color, @btn-primary-bg, @btn-primary-border);
+  .button-variant(@btn-primary-color; @btn-primary-bg; @btn-primary-border);
 }
 // Warning appears as orange
 .btn-warning {
-  .btn-pseudo-states(@btn-warning-color, @btn-warning-bg, @btn-warning-border);
+  .button-variant(@btn-warning-color; @btn-warning-bg; @btn-warning-border);
 }
 // Danger and error appear as red
 .btn-danger {
-  .btn-pseudo-states(@btn-danger-color, @btn-danger-bg, @btn-danger-border);
+  .button-variant(@btn-danger-color; @btn-danger-bg; @btn-danger-border);
 }
 // Success appears as green
 .btn-success {
-  .btn-pseudo-states(@btn-success-color, @btn-success-bg, @btn-success-border);
+  .button-variant(@btn-success-color; @btn-success-bg; @btn-success-border);
 }
 // Info appears as blue-green
 .btn-info {
-  .btn-pseudo-states(@btn-info-color, @btn-info-bg, @btn-info-border);
+  .button-variant(@btn-info-color; @btn-info-bg; @btn-info-border);
 }
 
 
@@ -110,7 +111,7 @@
   fieldset[disabled] & {
     &:hover,
     &:focus {
-      color: @gray-dark;
+      color: @btn-link-disabled-color;
       text-decoration: none;
     }
   }
@@ -120,19 +121,16 @@
 // Button Sizes
 // --------------------------------------------------
 
-.btn-large {
-  padding: @padding-large-vertical @padding-large-horizontal;
-  font-size: @font-size-large;
-  border-radius: @border-radius-large;
+.btn-lg {
+  // line-height: ensure even-numbered height of button next to large input
+  .button-size(@padding-large-vertical; @padding-large-horizontal; @font-size-large; @line-height-large; @border-radius-large);
 }
-.btn-small,
-.btn-mini {
-  padding: @padding-small-vertical @padding-small-horizontal;
-  font-size: @font-size-small;
-  line-height: 1.5; // ensure proper height of button next to small input
-  border-radius: @border-radius-small;
+.btn-sm,
+.btn-xs {
+  // line-height: ensure proper height of button next to small input
+  .button-size(@padding-small-vertical; @padding-small-horizontal; @font-size-small; @line-height-small; @border-radius-small);
 }
-.btn-mini {
+.btn-xs {
   padding: 3px 5px;
 }
 

less/carousel.less

@@ -69,9 +69,9 @@
   top: 0;
   left: 0;
   bottom: 0;
-  width: 15%;
-  .opacity(.5);
-  font-size: 20px;
+  width: @carousel-control-width;
+  .opacity(@carousel-control-opacity);
+  font-size: @carousel-control-font-size;
   color: @carousel-control-color;
   text-align: center;
   text-shadow: @carousel-text-shadow;
@@ -81,13 +81,11 @@
   // Set gradients for backgrounds
   &.left {
     #gradient > .horizontal(@start-color: rgba(0,0,0,.5); @end-color: rgba(0,0,0,.0001));
-    background-color: transparent;
   }
   &.right {
     left: auto;
     right: 0;
     #gradient > .horizontal(@start-color: rgba(0,0,0,.0001); @end-color: rgba(0,0,0,.5));
-    background-color: transparent;
   }
 
   // Hover/focus state
@@ -99,7 +97,6 @@
   }
 
   // Toggles
-  .glyphicon,
   .icon-prev,
   .icon-next {
     position: absolute;
@@ -113,7 +110,7 @@
     margin-left: -10px;
     font-family: serif;
   }
-  // Non-glyphicon toggles
+
   .icon-prev {
     &:before {
       content: '\2039';// SINGLE LEFT-POINTING ANGLE QUOTATION MARK (U+2039)
@@ -127,14 +124,17 @@
 }
 
 // Optional indicator pips
-// -----------------------------
+//
+// Add an unordered list with the following class and add a list item for each
+// slide your carousel holds.
+
 .carousel-indicators {
   position: absolute;
   bottom: 10px;
   left: 50%;
   z-index: 15;
-  width: 120px;
-  margin-left: -60px;
+  width: 60%;
+  margin-left: -30%;
   padding-left: 0;
   list-style: none;
   text-align: center;
@@ -181,7 +181,6 @@
 @media screen and (min-width: @screen-tablet) {
 
   // Scale up the controls a smidge
-  .carousel-control .glyphicon,
   .carousel-control .icon-prev,
   .carousel-control .icon-next {
     width: 30px;

less/close.less

@@ -6,7 +6,7 @@
 .close {
   float: right;
   font-size: (@font-size-base * 1.5);
-  font-weight: bold;
+  font-weight: @close-font-weight;
   line-height: 1;
   color: @close-color;
   text-shadow: @close-text-shadow;

less/code.less

@@ -16,7 +16,7 @@ code {
   color: @code-color;
   background-color: @code-bg;
   white-space: nowrap;
-  border-radius: 4px;
+  border-radius: @border-radius-base;
 }
 
 // Blocks of code
@@ -28,7 +28,7 @@ pre {
   line-height: @line-height-base;
   word-break: break-all;
   word-wrap: break-word;
-  color: @gray-dark;
+  color: @pre-color;
   background-color: @pre-bg;
   border: 1px solid @pre-border-color;
   border-radius: @border-radius-base;
@@ -41,6 +41,7 @@ pre {
   // Account for some code outputs that place code tags in pre tags
   code {
     padding: 0;
+    font-size: inherit;
     color: inherit;
     white-space: pre-wrap;
     background-color: transparent;
@@ -50,6 +51,6 @@ pre {
 
 // Enable scrollable blocks of code
 .pre-scrollable {
-  max-height: 340px;
+  max-height: @pre-scrollable-max-height;
   overflow-y: scroll;
 }

less/dropdowns.less

@@ -4,21 +4,29 @@
 
 
 // Dropdown arrow/caret
-// --------------------
 .caret {
   display: inline-block;
   width: 0;
   height: 0;
   margin-left: 2px;
   vertical-align: middle;
-  border-top:   4px solid @dropdown-caret-color;
-  border-right: 4px solid transparent;
-  border-left:  4px solid transparent;
+  border-top:   @caret-width-base solid @dropdown-caret-color;
+  border-right: @caret-width-base solid transparent;
+  border-left:  @caret-width-base solid transparent;
   content: "";
 }
 
+// The dropdown wrapper (div)
+.dropdown {
+  position: relative;
+}
+
+// Prevent the focus on the dropdown toggle when closing dropdowns
+.dropdown-toggle:focus {
+  outline: 0;
+}
+
 // The dropdown menu (ul)
-// ----------------------
 .dropdown-menu {
   position: absolute;
   top: 100%;
@@ -30,12 +38,13 @@
   padding: 5px 0;
   margin: 2px 0 0; // override default ul
   list-style: none;
+  font-size: @font-size-base;
   background-color: @dropdown-bg;
   border: 1px solid @dropdown-fallback-border; // IE8 fallback
   border: 1px solid @dropdown-border;
   border-radius: @border-radius-base;
   .box-shadow(0 6px 12px rgba(0,0,0,.175));
-  .background-clip(padding-box);
+  background-clip: padding-box;
 
   // Aligns the dropdown menu to right
   &.pull-right {
@@ -61,18 +70,16 @@
 }
 
 // Hover/Focus state
-// -----------
 .dropdown-menu > li > a {
   &:hover,
   &:focus {
     text-decoration: none;
     color: @dropdown-link-hover-color;
-    #gradient > .vertical(@start-color: @dropdown-link-hover-bg; @end-color: darken(@dropdown-link-hover-bg, 5%));
+    background-color: @dropdown-link-hover-bg;
   }
 }
 
 // Active state
-// ------------
 .dropdown-menu > .active > a {
   &,
   &:hover,
@@ -80,18 +87,19 @@
     color: @dropdown-link-active-color;
     text-decoration: none;
     outline: 0;
-    #gradient > .vertical(@start-color: @dropdown-link-active-bg; @end-color: darken(@dropdown-link-active-bg, 5%));
+    background-color: @dropdown-link-active-bg;
   }
 }
 
 // Disabled state
-// --------------
+//
 // Gray out text and ensure the hover/focus state remains gray
+
 .dropdown-menu > .disabled > a {
   &,
   &:hover,
   &:focus {
-    color: @gray-light;
+    color: @dropdown-link-disabled-color;
   }
 }
 // Nuke hover/focus effects
@@ -107,7 +115,6 @@
 }
 
 // Open state for the dropdown
-// ---------------------------
 .open {
   // Show the menu
   > .dropdown-menu {
@@ -121,19 +128,15 @@
 }
 
 // Dropdown section headers
-// ---------------------------
 .dropdown-header {
   display: block;
   padding: 3px 20px;
   font-size: @font-size-small;
   line-height: @line-height-base;
-  color: @gray-light;
+  color: @dropdown-header-color;
 }
 
-
-
 // Backdrop to catch body clicks on mobile, etc.
-// ---------------------------
 .dropdown-backdrop {
   position: fixed;
   left: 0;
@@ -144,16 +147,16 @@
 }
 
 // Right aligned dropdowns
-// ---------------------------
 .pull-right > .dropdown-menu {
   right: 0;
   left: auto;
 }
 
 // Allow for dropdowns to go bottom up (aka, dropup-menu)
-// ------------------------------------------------------
+//
 // Just add .dropup after the standard .dropdown class and you're set, bro.
 // TODO: abstract this so that the navbar fixed styles are not placed here?
+
 .dropup,
 .navbar-fixed-bottom .dropdown {
   // Reverse the caret

less/forms.less

@@ -20,7 +20,7 @@ legend {
   margin-bottom: @line-height-computed;
   font-size: (@font-size-base * 1.5);
   line-height: inherit;
-  color: @gray-dark;
+  color: @legend-color;
   border: 0;
   border-bottom: 1px solid @legend-border-color;
 }
@@ -121,7 +121,7 @@ input[type="number"] {
   padding: @padding-base-vertical @padding-base-horizontal;
   font-size: @font-size-base;
   line-height: @line-height-base;
-  color: @gray;
+  color: @input-color;
   vertical-align: middle;
   background-color: @input-bg;
   border: 1px solid @input-border;
@@ -129,16 +129,13 @@ input[type="number"] {
   .box-shadow(inset 0 1px 1px rgba(0,0,0,.075));
   .transition(~"border-color ease-in-out .15s, box-shadow ease-in-out .15s");
 
-  &:focus {
-    border-color: rgba(82,168,236,.8);
-    outline: 0;
-    .box-shadow(~"inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(82,168,236,.6)");
-  }
+  // Customize the `:focus` state to imitate native WebKit styles.
+  .form-control-focus();
 
   // Disabled and read-only inputs
-  // Note: HTML5 says that inputs under a fieldset > legend:first-child won't be
-  //   disabled if the fieldset is disabled. Due to implementation difficulty,
-  //   we don't honor that edge case; we style them as disabled anyway.
+  // Note: HTML5 says that controls under a fieldset > legend:first-child won't
+  // be disabled if the fieldset is disabled. Due to implementation difficulty,
+  // we don't honor that edge case; we style them as disabled anyway.
   &[disabled],
   &[readonly],
   fieldset[disabled] & {
@@ -210,42 +207,28 @@ input[type="number"] {
   margin-left: 10px; // space out consecutive inline controls
 }
 
-
+// Apply same disabled cursor tweak as for inputs
+//
+// Note: Neither radios nor checkboxes can be readonly.
+input[type="radio"],
+input[type="checkbox"],
+.radio,
+.radio-inline,
+.checkbox,
+.checkbox-inline {
+  &[disabled],
+  fieldset[disabled] & {
+    cursor: not-allowed;
+  }
+}
 
 // Form control sizing
-//
-// Relative text size, padding, and border-radii changes for form controls. For
-// horizontal sizing, wrap controls in the predefined grid classes. `<select>`
-// element gets special love because it's special, and that's a fact!
-
-.input-large {
-  height: @input-height-large;
-  padding: @padding-large-vertical @padding-large-horizontal;
-  font-size: @font-size-large;
-  border-radius: @border-radius-large;
-}
-.input-small {
-  height: @input-height-small;
-  padding: @padding-small-vertical @padding-small-horizontal;
-  font-size: @font-size-small;
-  border-radius: @border-radius-small;
+.input-sm {
+  .input-size(@input-height-small; @padding-small-vertical; @padding-small-horizontal; @font-size-small; @line-height-small; @border-radius-small);
 }
 
-select {
-  &.input-large {
-    height: @input-height-large;
-    line-height: @input-height-large;
-  }
-  &.input-small {
-    height: @input-height-small;
-    line-height: @input-height-small;
-  }
-}
-textarea {
-  &.input-large,
-  &.input-small {
-    height: auto;
-  }
+.input-lg {
+  .input-size(@input-height-large; @padding-large-vertical; @padding-large-horizontal; @font-size-large; @line-height-large; @border-radius-large);
 }
 
 
@@ -255,15 +238,26 @@ textarea {
 
 // Warning
 .has-warning {
-  .form-control-validation(@state-warning-text, @state-warning-text, @state-warning-bg);
+  .form-control-validation(@state-warning-text; @state-warning-text; @state-warning-bg);
 }
 // Error
 .has-error {
-  .form-control-validation(@state-danger-text, @state-danger-text, @state-danger-bg);
+  .form-control-validation(@state-danger-text; @state-danger-text; @state-danger-bg);
 }
 // Success
 .has-success {
-  .form-control-validation(@state-success-text, @state-success-text, @state-success-bg);
+  .form-control-validation(@state-success-text; @state-success-text; @state-success-bg);
+}
+
+
+// Static form control text
+//
+// Apply class to a `p` element to make any string of text align with labels in
+// a horizontal form layout.
+
+.form-control-static {
+  margin-bottom: 0; // Remove default margin from `p`
+  padding-top: @padding-base-vertical;
 }
 
 
@@ -278,3 +272,75 @@ textarea {
   margin-bottom: 10px;
   color: lighten(@text-color, 25%); // lighten the text some for contrast
 }
+
+
+
+// Inline forms
+//
+// Make forms appear inline(-block) by adding the `.form-inline` class. Inline
+// forms begin stacked on extra small (mobile) devices and then go inline when
+// viewports reach <768px.
+//
+// Requires wrapping inputs and labels with `.form-group` for proper display of
+// default HTML form controls and our custom form controls (e.g., input groups).
+//
+// Heads up! This is mixin-ed into `.navbar-form` in navbars.less.
+
+.form-inline {
+
+  // Kick in the inline
+  @media (min-width: @screen-tablet) {
+    // Inline-block all the things for "inline"
+    .form-group  {
+      display: inline-block;
+      margin-bottom: 0;
+      vertical-align: middle;
+    }
+
+    // In navbar-form, allow folks to *not* use `.form-group`
+    .form-control {
+      display: inline-block;
+    }
+
+    // Remove default margin on radios/checkboxes that were used for stacking, and
+    // then undo the floating of radios and checkboxes to match (which also avoids
+    // a bug in WebKit: https://github.com/twbs/bootstrap/issues/1969).
+    .radio,
+    .checkbox {
+      display: inline-block;
+      margin-top: 0;
+      margin-bottom: 0;
+      padding-left: 0;
+    }
+    .radio input[type="radio"],
+    .checkbox input[type="checkbox"] {
+      float: none;
+      margin-left: 0;
+    }
+  }
+}
+
+
+// Horizontal forms
+//
+// Horizontal forms are built on grid classes and allow you to create forms with
+// labels on the left and inputs on the right.
+
+.form-horizontal .control-label,
+.form-horizontal .radio-inline,
+.form-horizontal .checkbox-inline {
+  padding-top: @padding-base-vertical;
+}
+
+.form-horizontal {
+  .form-group {
+    .make-row();
+  }
+}
+
+// Only right align form labels here when the columns stop stacking
+@media (min-width: @screen-tablet) {
+  .form-horizontal .control-label {
+    text-align: right;
+  }
+}

less/grid.less

@@ -2,6 +2,7 @@
 // Grid system
 // --------------------------------------------------
 
+
 // Set the container width, and override it for fixed navbars in media queries
 .container {
   .container-fixed();
@@ -13,18 +14,18 @@
 }
 
 // Common styles for small and large grid columns
-.col-1,
-.col-2,
-.col-3,
-.col-4,
-.col-5,
-.col-6,
-.col-7,
-.col-8,
-.col-9,
-.col-10,
-.col-11,
-.col-12,
+.col-xs-1,
+.col-xs-2,
+.col-xs-3,
+.col-xs-4,
+.col-xs-5,
+.col-xs-6,
+.col-xs-7,
+.col-xs-8,
+.col-xs-9,
+.col-xs-10,
+.col-xs-11,
+.col-xs-12,
 .col-sm-1,
 .col-sm-2,
 .col-sm-3,
@@ -37,6 +38,18 @@
 .col-sm-10,
 .col-sm-11,
 .col-sm-12,
+.col-md-1,
+.col-md-2,
+.col-md-3,
+.col-md-4,
+.col-md-5,
+.col-md-6,
+.col-md-7,
+.col-md-8,
+.col-md-9,
+.col-md-10,
+.col-md-11,
+.col-md-12,
 .col-lg-1,
 .col-lg-2,
 .col-lg-3,
@@ -58,40 +71,49 @@
 }
 
 
-
+// Extra small grid
 //
-// Container and grid column sizing
+// Grid classes for extra small devices like smartphones. No offset, push, or
+// pull classes are present here due to the size of the target.
 //
+// Note that `.col-xs-12` doesn't get floated on purpose—there's no need since
+// it's full-width.
 
-// Tiny device columns (smartphones)
-.col-1,
-.col-2,
-.col-3,
-.col-4,
-.col-5,
-.col-6,
-.col-7,
-.col-8,
-.col-9,
-.col-10,
-.col-11,
-.col-12 {
+.col-xs-1,
+.col-xs-2,
+.col-xs-3,
+.col-xs-4,
+.col-xs-5,
+.col-xs-6,
+.col-xs-7,
+.col-xs-8,
+.col-xs-9,
+.col-xs-10,
+.col-xs-11 {
   float: left;
 }
-.col-1  { width: percentage((1 / @grid-columns)); }
-.col-2  { width: percentage((2 / @grid-columns)); }
-.col-3  { width: percentage((3 / @grid-columns)); }
-.col-4  { width: percentage((4 / @grid-columns)); }
-.col-5  { width: percentage((5 / @grid-columns)); }
-.col-6  { width: percentage((6 / @grid-columns)); }
-.col-7  { width: percentage((7 / @grid-columns)); }
-.col-8  { width: percentage((8 / @grid-columns)); }
-.col-9  { width: percentage((9 / @grid-columns)); }
-.col-10 { width: percentage((10/ @grid-columns)); }
-.col-11 { width: percentage((11/ @grid-columns)); }
-.col-12 { width: 100%; }
+.col-xs-1  { width: percentage((1 / @grid-columns)); }
+.col-xs-2  { width: percentage((2 / @grid-columns)); }
+.col-xs-3  { width: percentage((3 / @grid-columns)); }
+.col-xs-4  { width: percentage((4 / @grid-columns)); }
+.col-xs-5  { width: percentage((5 / @grid-columns)); }
+.col-xs-6  { width: percentage((6 / @grid-columns)); }
+.col-xs-7  { width: percentage((7 / @grid-columns)); }
+.col-xs-8  { width: percentage((8 / @grid-columns)); }
+.col-xs-9  { width: percentage((9 / @grid-columns)); }
+.col-xs-10 { width: percentage((10/ @grid-columns)); }
+.col-xs-11 { width: percentage((11/ @grid-columns)); }
+.col-xs-12 { width: 100%; }
+
+
+// Small grid
+//
+// Columns, offsets, pushes, and pulls for the small device range, from phones
+// to tablets.
+//
+// Note that `.col-sm-12` doesn't get floated on purpose—there's no need since
+// it's full-width.
 
-// Small device columns (phones to tablets)
 @media (min-width: @screen-tablet) {
   .container {
     max-width: @container-tablet;
@@ -107,8 +129,7 @@
   .col-sm-8,
   .col-sm-9,
   .col-sm-10,
-  .col-sm-11,
-  .col-sm-12 {
+  .col-sm-11 {
     float: left;
   }
   .col-sm-1  { width: percentage((1 / @grid-columns)); }
@@ -125,36 +146,137 @@
   .col-sm-12 { width: 100%; }
 
   // Push and pull columns for source order changes
-  .col-push-1  { left: percentage((1 / @grid-columns)); }
-  .col-push-2  { left: percentage((2 / @grid-columns)); }
-  .col-push-3  { left: percentage((3 / @grid-columns)); }
-  .col-push-4  { left: percentage((4 / @grid-columns)); }
-  .col-push-5  { left: percentage((5 / @grid-columns)); }
-  .col-push-6  { left: percentage((6 / @grid-columns)); }
-  .col-push-7  { left: percentage((7 / @grid-columns)); }
-  .col-push-8  { left: percentage((8 / @grid-columns)); }
-  .col-push-9  { left: percentage((9 / @grid-columns)); }
-  .col-push-10 { left: percentage((10/ @grid-columns)); }
-  .col-push-11 { left: percentage((11/ @grid-columns)); }
+  .col-sm-push-1  { left: percentage((1 / @grid-columns)); }
+  .col-sm-push-2  { left: percentage((2 / @grid-columns)); }
+  .col-sm-push-3  { left: percentage((3 / @grid-columns)); }
+  .col-sm-push-4  { left: percentage((4 / @grid-columns)); }
+  .col-sm-push-5  { left: percentage((5 / @grid-columns)); }
+  .col-sm-push-6  { left: percentage((6 / @grid-columns)); }
+  .col-sm-push-7  { left: percentage((7 / @grid-columns)); }
+  .col-sm-push-8  { left: percentage((8 / @grid-columns)); }
+  .col-sm-push-9  { left: percentage((9 / @grid-columns)); }
+  .col-sm-push-10 { left: percentage((10/ @grid-columns)); }
+  .col-sm-push-11 { left: percentage((11/ @grid-columns)); }
 
-  .col-pull-1  { right: percentage((1 / @grid-columns)); }
-  .col-pull-2  { right: percentage((2 / @grid-columns)); }
-  .col-pull-3  { right: percentage((3 / @grid-columns)); }
-  .col-pull-4  { right: percentage((4 / @grid-columns)); }
-  .col-pull-5  { right: percentage((5 / @grid-columns)); }
-  .col-pull-6  { right: percentage((6 / @grid-columns)); }
-  .col-pull-7  { right: percentage((7 / @grid-columns)); }
-  .col-pull-8  { right: percentage((8 / @grid-columns)); }
-  .col-pull-9  { right: percentage((9 / @grid-columns)); }
-  .col-pull-10 { right: percentage((10/ @grid-columns)); }
-  .col-pull-11 { right: percentage((11/ @grid-columns)); }
+  .col-sm-pull-1  { right: percentage((1 / @grid-columns)); }
+  .col-sm-pull-2  { right: percentage((2 / @grid-columns)); }
+  .col-sm-pull-3  { right: percentage((3 / @grid-columns)); }
+  .col-sm-pull-4  { right: percentage((4 / @grid-columns)); }
+  .col-sm-pull-5  { right: percentage((5 / @grid-columns)); }
+  .col-sm-pull-6  { right: percentage((6 / @grid-columns)); }
+  .col-sm-pull-7  { right: percentage((7 / @grid-columns)); }
+  .col-sm-pull-8  { right: percentage((8 / @grid-columns)); }
+  .col-sm-pull-9  { right: percentage((9 / @grid-columns)); }
+  .col-sm-pull-10 { right: percentage((10/ @grid-columns)); }
+  .col-sm-pull-11 { right: percentage((11/ @grid-columns)); }
+
+  // Offsets
+  .col-sm-offset-1  { margin-left: percentage((1 / @grid-columns)); }
+  .col-sm-offset-2  { margin-left: percentage((2 / @grid-columns)); }
+  .col-sm-offset-3  { margin-left: percentage((3 / @grid-columns)); }
+  .col-sm-offset-4  { margin-left: percentage((4 / @grid-columns)); }
+  .col-sm-offset-5  { margin-left: percentage((5 / @grid-columns)); }
+  .col-sm-offset-6  { margin-left: percentage((6 / @grid-columns)); }
+  .col-sm-offset-7  { margin-left: percentage((7 / @grid-columns)); }
+  .col-sm-offset-8  { margin-left: percentage((8 / @grid-columns)); }
+  .col-sm-offset-9  { margin-left: percentage((9 / @grid-columns)); }
+  .col-sm-offset-10 { margin-left: percentage((10/ @grid-columns)); }
+  .col-sm-offset-11 { margin-left: percentage((11/ @grid-columns)); }
 }
 
-// Medium and large device columns (desktop and up)
+
+// Medium grid
+//
+// Columns, offsets, pushes, and pulls for the desktop device range.
+//
+// Note that `.col-md-12` doesn't get floated on purpose—there's no need since
+// it's full-width.
+
 @media (min-width: @screen-desktop) {
   .container {
     max-width: @container-desktop;
   }
+  .col-md-1,
+  .col-md-2,
+  .col-md-3,
+  .col-md-4,
+  .col-md-5,
+  .col-md-6,
+  .col-md-7,
+  .col-md-8,
+  .col-md-9,
+  .col-md-10,
+  .col-md-11 {
+    float: left;
+  }
+  .col-md-1  { width: percentage((1 / @grid-columns)); }
+  .col-md-2  { width: percentage((2 / @grid-columns)); }
+  .col-md-3  { width: percentage((3 / @grid-columns)); }
+  .col-md-4  { width: percentage((4 / @grid-columns)); }
+  .col-md-5  { width: percentage((5 / @grid-columns)); }
+  .col-md-6  { width: percentage((6 / @grid-columns)); }
+  .col-md-7  { width: percentage((7 / @grid-columns)); }
+  .col-md-8  { width: percentage((8 / @grid-columns)); }
+  .col-md-9  { width: percentage((9 / @grid-columns)); }
+  .col-md-10 { width: percentage((10/ @grid-columns)); }
+  .col-md-11 { width: percentage((11/ @grid-columns)); }
+  .col-md-12 { width: 100%; }
+
+  // Push and pull columns for source order changes
+  .col-md-push-0  { left: auto; }
+  .col-md-push-1  { left: percentage((1 / @grid-columns)); }
+  .col-md-push-2  { left: percentage((2 / @grid-columns)); }
+  .col-md-push-3  { left: percentage((3 / @grid-columns)); }
+  .col-md-push-4  { left: percentage((4 / @grid-columns)); }
+  .col-md-push-5  { left: percentage((5 / @grid-columns)); }
+  .col-md-push-6  { left: percentage((6 / @grid-columns)); }
+  .col-md-push-7  { left: percentage((7 / @grid-columns)); }
+  .col-md-push-8  { left: percentage((8 / @grid-columns)); }
+  .col-md-push-9  { left: percentage((9 / @grid-columns)); }
+  .col-md-push-10 { left: percentage((10/ @grid-columns)); }
+  .col-md-push-11 { left: percentage((11/ @grid-columns)); }
+
+  .col-md-pull-0  { right: auto; }
+  .col-md-pull-1  { right: percentage((1 / @grid-columns)); }
+  .col-md-pull-2  { right: percentage((2 / @grid-columns)); }
+  .col-md-pull-3  { right: percentage((3 / @grid-columns)); }
+  .col-md-pull-4  { right: percentage((4 / @grid-columns)); }
+  .col-md-pull-5  { right: percentage((5 / @grid-columns)); }
+  .col-md-pull-6  { right: percentage((6 / @grid-columns)); }
+  .col-md-pull-7  { right: percentage((7 / @grid-columns)); }
+  .col-md-pull-8  { right: percentage((8 / @grid-columns)); }
+  .col-md-pull-9  { right: percentage((9 / @grid-columns)); }
+  .col-md-pull-10 { right: percentage((10/ @grid-columns)); }
+  .col-md-pull-11 { right: percentage((11/ @grid-columns)); }
+
+  // Offsets
+  .col-md-offset-0  { margin-left: 0; }
+  .col-md-offset-1  { margin-left: percentage((1 / @grid-columns)); }
+  .col-md-offset-2  { margin-left: percentage((2 / @grid-columns)); }
+  .col-md-offset-3  { margin-left: percentage((3 / @grid-columns)); }
+  .col-md-offset-4  { margin-left: percentage((4 / @grid-columns)); }
+  .col-md-offset-5  { margin-left: percentage((5 / @grid-columns)); }
+  .col-md-offset-6  { margin-left: percentage((6 / @grid-columns)); }
+  .col-md-offset-7  { margin-left: percentage((7 / @grid-columns)); }
+  .col-md-offset-8  { margin-left: percentage((8 / @grid-columns)); }
+  .col-md-offset-9  { margin-left: percentage((9 / @grid-columns)); }
+  .col-md-offset-10 { margin-left: percentage((10/ @grid-columns)); }
+  .col-md-offset-11 { margin-left: percentage((11/ @grid-columns)); }
+}
+
+
+// Large grid
+//
+// Columns, offsets, pushes, and pulls for the large desktop device range.
+//
+// Note that `.col-lg-12` doesn't get floated on purpose—there's no need since
+// it's full-width.
+
+@media (min-width: @screen-large-desktop) {
+  .container {
+    max-width: @container-large-desktop;
+  }
+
   .col-lg-1,
   .col-lg-2,
   .col-lg-3,
@@ -165,8 +287,7 @@
   .col-lg-8,
   .col-lg-9,
   .col-lg-10,
-  .col-lg-11,
-  .col-lg-12 {
+  .col-lg-11 {
     float: left;
   }
   .col-lg-1  { width: percentage((1 / @grid-columns)); }
@@ -182,23 +303,44 @@
   .col-lg-11 { width: percentage((11/ @grid-columns)); }
   .col-lg-12 { width: 100%; }
 
-  // Offsets
-  .col-offset-1  { margin-left: percentage((1 / @grid-columns)); }
-  .col-offset-2  { margin-left: percentage((2 / @grid-columns)); }
-  .col-offset-3  { margin-left: percentage((3 / @grid-columns)); }
-  .col-offset-4  { margin-left: percentage((4 / @grid-columns)); }
-  .col-offset-5  { margin-left: percentage((5 / @grid-columns)); }
-  .col-offset-6  { margin-left: percentage((6 / @grid-columns)); }
-  .col-offset-7  { margin-left: percentage((7 / @grid-columns)); }
-  .col-offset-8  { margin-left: percentage((8 / @grid-columns)); }
-  .col-offset-9  { margin-left: percentage((9 / @grid-columns)); }
-  .col-offset-10 { margin-left: percentage((10/ @grid-columns)); }
-  .col-offset-11 { margin-left: percentage((11/ @grid-columns)); }
-}
+  // Push and pull columns for source order changes
+  .col-lg-push-0  { left: auto; }
+  .col-lg-push-1  { left: percentage((1 / @grid-columns)); }
+  .col-lg-push-2  { left: percentage((2 / @grid-columns)); }
+  .col-lg-push-3  { left: percentage((3 / @grid-columns)); }
+  .col-lg-push-4  { left: percentage((4 / @grid-columns)); }
+  .col-lg-push-5  { left: percentage((5 / @grid-columns)); }
+  .col-lg-push-6  { left: percentage((6 / @grid-columns)); }
+  .col-lg-push-7  { left: percentage((7 / @grid-columns)); }
+  .col-lg-push-8  { left: percentage((8 / @grid-columns)); }
+  .col-lg-push-9  { left: percentage((9 / @grid-columns)); }
+  .col-lg-push-10 { left: percentage((10/ @grid-columns)); }
+  .col-lg-push-11 { left: percentage((11/ @grid-columns)); }
 
-// Large desktops and up
-@media (min-width: @screen-large-desktop) {
-  .container {
-    max-width: @container-large-desktop;
-  }
+  .col-lg-pull-0  { right: auto; }
+  .col-lg-pull-1  { right: percentage((1 / @grid-columns)); }
+  .col-lg-pull-2  { right: percentage((2 / @grid-columns)); }
+  .col-lg-pull-3  { right: percentage((3 / @grid-columns)); }
+  .col-lg-pull-4  { right: percentage((4 / @grid-columns)); }
+  .col-lg-pull-5  { right: percentage((5 / @grid-columns)); }
+  .col-lg-pull-6  { right: percentage((6 / @grid-columns)); }
+  .col-lg-pull-7  { right: percentage((7 / @grid-columns)); }
+  .col-lg-pull-8  { right: percentage((8 / @grid-columns)); }
+  .col-lg-pull-9  { right: percentage((9 / @grid-columns)); }
+  .col-lg-pull-10 { right: percentage((10/ @grid-columns)); }
+  .col-lg-pull-11 { right: percentage((11/ @grid-columns)); }
+
+  // Offsets
+  .col-lg-offset-0  { margin-left: 0; }
+  .col-lg-offset-1  { margin-left: percentage((1 / @grid-columns)); }
+  .col-lg-offset-2  { margin-left: percentage((2 / @grid-columns)); }
+  .col-lg-offset-3  { margin-left: percentage((3 / @grid-columns)); }
+  .col-lg-offset-4  { margin-left: percentage((4 / @grid-columns)); }
+  .col-lg-offset-5  { margin-left: percentage((5 / @grid-columns)); }
+  .col-lg-offset-6  { margin-left: percentage((6 / @grid-columns)); }
+  .col-lg-offset-7  { margin-left: percentage((7 / @grid-columns)); }
+  .col-lg-offset-8  { margin-left: percentage((8 / @grid-columns)); }
+  .col-lg-offset-9  { margin-left: percentage((9 / @grid-columns)); }
+  .col-lg-offset-10 { margin-left: percentage((10/ @grid-columns)); }
+  .col-lg-offset-11 { margin-left: percentage((11/ @grid-columns)); }
 }

less/input-groups.less

@@ -5,6 +5,7 @@
 // Base styles
 // -------------------------
 .input-group {
+  position: relative; // For dropdowns
   display: table;
   border-collapse: separate; // prevent input groups from inheriting border styles from table cells when placed within a table
 
@@ -21,6 +22,19 @@
   }
 }
 
+// Sizing options
+//
+// Remix the default form control sizing classes into new ones for easier
+// manipulation.
+
+.input-group-lg > .form-control,
+.input-group-lg > .input-group-addon,
+.input-group-lg > .input-group-btn > .btn { .input-lg(); }
+.input-group-sm > .form-control,
+.input-group-sm > .input-group-addon,
+.input-group-sm > .input-group-btn > .btn { .input-sm(); }
+
+
 // Display as table-cell
 // -------------------------
 .input-group-addon,
@@ -43,23 +57,22 @@
 // Text input groups
 // -------------------------
 .input-group-addon {
-  .box-sizing(border-box);
   padding: @padding-base-vertical @padding-base-horizontal;
   font-size: @font-size-base;
   font-weight: normal;
-  line-height: @line-height-base;
+  line-height: 1;
   text-align: center;
-  background-color: @gray-lighter;
+  background-color: @input-group-addon-bg;
   border: 1px solid @input-group-addon-border-color;
   border-radius: @border-radius-base;
 
   // Sizing
-  &.input-small {
+  &.input-sm {
     padding: @padding-small-vertical @padding-small-horizontal;
     font-size: @font-size-small;
     border-radius: @border-radius-small;
   }
-  &.input-large {
+  &.input-lg {
     padding: @padding-large-vertical @padding-large-horizontal;
     font-size: @font-size-large;
     border-radius: @border-radius-large;
@@ -112,42 +125,3 @@
     z-index: 2;
   }
 }
-
-
-// Inline forms
-// --------------------------------------------------
-
-.form-inline {
-  .form-control,
-  .radio,
-  .checkbox {
-    display: inline-block;
-  }
-  .radio,
-  .checkbox {
-    margin-top: 0;
-    margin-bottom: 0;
-  }
-}
-
-
-// Horizontal forms
-// --------------------------------------------------
-// Horizontal forms are built on grid classes.
-
-.form-horizontal .control-label {
-  padding-top: 9px;
-}
-
-.form-horizontal {
-  .form-group {
-    .make-row();
-  }
-}
-
-// Only right align form labels here when the columns stop stacking
-@media (min-width: @screen-tablet) {
-  .form-horizontal .control-label {
-    text-align: right;
-  }
-}

less/labels.less

@@ -6,13 +6,12 @@
   display: inline;
   padding: .25em .6em;
   font-size: 75%;
-  font-weight: 500;
+  font-weight: bold;
   line-height: 1;
   color: @label-color;
   text-align: center;
   white-space: nowrap;
   vertical-align: baseline;
-  background-color: @gray-light;
   border-radius: .25em;
 
   // Add hover effects, but only for links
@@ -22,25 +21,38 @@
       color: @label-link-hover-color;
       text-decoration: none;
       cursor: pointer;
-      background-color: darken(@gray-light, 10%);
     }
   }
+
+  // Empty labels collapse automatically (not available in IE8)
+  &:empty {
+    display: none;
+  }
 }
 
 // Colors
 // Contextual variations (linked labels get darker on :hover)
-.label-danger {
-  .label-variant(@label-danger-bg);
+
+.label-default {
+  .label-variant(@label-default-bg);
+}
+
+.label-primary {
+  .label-variant(@label-primary-bg);
 }
 
 .label-success {
   .label-variant(@label-success-bg);
 }
 
+.label-info {
+  .label-variant(@label-info-bg);
+}
+
 .label-warning {
   .label-variant(@label-warning-bg);
 }
 
-.label-info {
-  .label-variant(@label-info-bg);
+.label-danger {
+  .label-variant(@label-danger-bg);
 }

less/list-group.less

@@ -17,7 +17,7 @@
 .list-group-item {
   position: relative;
   display: block;
-  padding: 10px 30px 10px 15px;
+  padding: 10px 15px;
   // Place the border on the list items and negative margin up for better styling
   margin-bottom: -1px;
   background-color: @list-group-bg;
@@ -25,54 +25,41 @@
 
   // Round the first and last items
   &:first-child {
-    .border-top-radius(@border-radius-base);
+    .border-top-radius(@list-group-border-radius);
   }
   &:last-child {
     margin-bottom: 0;
-    .border-bottom-radius(@border-radius-base);
+    .border-bottom-radius(@list-group-border-radius);
   }
 
   // Align badges within list items
   > .badge {
     float: right;
-    margin-right: -15px;
   }
-}
-
-// Custom content options
-// -------------------------
-
-.list-group-item-heading {
-  margin-top: 0;
-  margin-bottom: 5px;
-}
-.list-group-item-text {
-  margin-bottom: 0;
-  line-height: 1.3;
-}
-
-// Linked list items
-// -------------------------
-
-// Custom content within linked items
-a.list-group-item {
-  // Colorize content accordingly
-  .list-group-item-heading {
-    color: @list-group-link-heading-color;
+  > .badge + .badge {
+    margin-right: 5px;
   }
-  .list-group-item-text {
+
+  // Linked list items
+  a& {
     color: @list-group-link-color;
-  }
 
-  // Hover state
-  &:hover,
-  &:focus {
-    text-decoration: none;
-    background-color: @list-group-hover-bg;
+    .list-group-item-heading {
+      color: @list-group-link-heading-color;
+    }
+
+    // Hover state
+    &:hover,
+    &:focus {
+      text-decoration: none;
+      background-color: @list-group-hover-bg;
+    }
   }
 
   // Active class on item itself, not parent
-  &.active {
+  &.active,
+  &.active:hover,
+  &.active:focus {
     z-index: 2; // Place active items above their siblings for proper border styling
     color: @list-group-active-color;
     background-color: @list-group-active-bg;
@@ -87,3 +74,15 @@ a.list-group-item {
     }
   }
 }
+
+// Custom content options
+// -------------------------
+
+.list-group-item-heading {
+  margin-top: 0;
+  margin-bottom: 5px;
+}
+.list-group-item-text {
+  margin-bottom: 0;
+  line-height: 1.3;
+}

less/mixins.less

@@ -44,12 +44,12 @@
 }
 
 // Sizing shortcuts
-.size(@width, @height) {
+.size(@width; @height) {
   width: @width;
   height: @height;
 }
 .square(@size) {
-  .size(@size, @size);
+  .size(@size; @size);
 }
 
 // Placeholder text
@@ -130,25 +130,25 @@
 // Transformations
 .rotate(@degrees) {
   -webkit-transform: rotate(@degrees);
-      -ms-transform: rotate(@degrees);
+      -ms-transform: rotate(@degrees); // IE9+
           transform: rotate(@degrees);
 }
 .scale(@ratio) {
   -webkit-transform: scale(@ratio);
-      -ms-transform: scale(@ratio);
+      -ms-transform: scale(@ratio); // IE9+
           transform: scale(@ratio);
 }
-.translate(@x, @y) {
+.translate(@x; @y) {
   -webkit-transform: translate(@x, @y);
-      -ms-transform: translate(@x, @y);
+      -ms-transform: translate(@x, @y); // IE9+
           transform: translate(@x, @y);
 }
-.skew(@x, @y) {
+.skew(@x; @y) {
   -webkit-transform: skew(@x, @y);
-      -ms-transform: skewX(@x) skewY(@y); // See https://github.com/twbs/bootstrap/issues/4885
+      -ms-transform: skewX(@x) skewY(@y); // See https://github.com/twbs/bootstrap/issues/4885; IE9+
           transform: skew(@x, @y);
 }
-.translate3d(@x, @y, @z) {
+.translate3d(@x; @y; @z) {
   -webkit-transform: translate3d(@x, @y, @z);
           transform: translate3d(@x, @y, @z);
 }
@@ -163,16 +163,6 @@
           backface-visibility: @visibility;
 }
 
-// Background clipping
-.background-clip(@clip) {
-          background-clip: @clip;
-}
-
-// Background sizing
-.background-size(@size) {
-          background-size: @size;
-}
-
 // Box sizing
 .box-sizing(@boxmodel) {
   -webkit-box-sizing: @boxmodel;
@@ -185,7 +175,7 @@
 .user-select(@select) {
   -webkit-user-select: @select;
      -moz-user-select: @select;
-      -ms-user-select: @select;
+      -ms-user-select: @select; // IE10+
        -o-user-select: @select;
           user-select: @select;
 }
@@ -197,7 +187,7 @@
 }
 
 // CSS3 Content Columns
-.content-columns(@column-count, @column-gap: @grid-gutter-width) {
+.content-columns(@column-count; @column-gap: @grid-gutter-width) {
   -webkit-column-count: @column-count;
      -moz-column-count: @column-count;
           column-count: @column-count;
@@ -211,7 +201,7 @@
   word-wrap: break-word;
   -webkit-hyphens: @mode;
      -moz-hyphens: @mode;
-      -ms-hyphens: @mode;
+      -ms-hyphens: @mode; // IE10+
        -o-hyphens: @mode;
           hyphens: @mode;
 }
@@ -235,8 +225,7 @@
   //
   // Creates two color stops, start and end, by specifying a color and position for each color stop.
   // Color stops are not available in IE9 and below.
-  .horizontal(@start-color: #555; @start-percent: 0%; @end-color: #333; @end-percent: 100%) {
-    background-color: @end-color;
+  .horizontal(@start-color: #555; @end-color: #333; @start-percent: 0%; @end-percent: 100%) {
     background-image: -webkit-gradient(linear, @start-percent top, @end-percent top, from(@start-color), to(@end-color)); // Safari 4+, Chrome 2+
     background-image: -webkit-linear-gradient(left, color-stop(@start-color @start-percent), color-stop(@end-color @end-percent)); // Safari 5.1+, Chrome 10+
     background-image: -moz-linear-gradient(left, @start-color @start-percent, @end-color @end-percent); // FF 3.6+
@@ -249,8 +238,7 @@
   //
   // Creates two color stops, start and end, by specifying a color and position for each color stop.
   // Color stops are not available in IE9 and below.
-  .vertical(@start-color: #555; @start-percent: 0%; @end-color: #333; @end-percent: 100%) {
-    background-color: @end-color;
+  .vertical(@start-color: #555; @end-color: #333; @start-percent: 0%; @end-percent: 100%) {
     background-image: -webkit-gradient(linear, left @start-percent, left @end-percent, from(@start-color), to(@end-color)); // Safari 4+, Chrome 2+
     background-image: -webkit-linear-gradient(top, @start-color, @start-percent, @end-color, @end-percent); // Safari 5.1+, Chrome 10+
     background-image:  -moz-linear-gradient(top, @start-color @start-percent, @end-color @end-percent); // FF 3.6+
@@ -259,15 +247,13 @@
     filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",argb(@start-color),argb(@end-color))); // IE9 and down
   }
 
-  .directional(@start-color: #555, @end-color: #333, @deg: 45deg) {
-    background-color: @end-color;
+  .directional(@start-color: #555; @end-color: #333; @deg: 45deg) {
     background-repeat: repeat-x;
     background-image: -webkit-linear-gradient(@deg, @start-color, @end-color); // Safari 5.1+, Chrome 10+
     background-image: -moz-linear-gradient(@deg, @start-color, @end-color); // FF 3.6+
     background-image: linear-gradient(@deg, @start-color, @end-color); // Standard, IE10
   }
-  .horizontal-three-colors(@start-color: #00b3ee, @mid-color: #7a43b6, @color-stop: 50%, @end-color: #c3325f) {
-    background-color: mix(@mid-color, @end-color, 80%);
+  .horizontal-three-colors(@start-color: #00b3ee; @mid-color: #7a43b6; @color-stop: 50%; @end-color: #c3325f) {
     background-image: -webkit-gradient(left, linear, 0 0, 0 100%, from(@start-color), color-stop(@color-stop, @mid-color), to(@end-color));
     background-image: -webkit-linear-gradient(left, @start-color, @mid-color @color-stop, @end-color);
     background-image: -moz-linear-gradient(left, @start-color, @mid-color @color-stop, @end-color);
@@ -275,9 +261,7 @@
     background-repeat: no-repeat;
     filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)",argb(@start-color),argb(@end-color))); // IE9 and down, gets no color-stop at all for proper fallback
   }
-
-  .vertical-three-colors(@start-color: #00b3ee, @mid-color: #7a43b6, @color-stop: 50%, @end-color: #c3325f) {
-    background-color: mix(@mid-color, @end-color, 80%);
+  .vertical-three-colors(@start-color: #00b3ee; @mid-color: #7a43b6; @color-stop: 50%; @end-color: #c3325f) {
     background-image: -webkit-gradient(linear, 0 0, 0 100%, from(@start-color), color-stop(@color-stop, @mid-color), to(@end-color));
     background-image: -webkit-linear-gradient(@start-color, @mid-color @color-stop, @end-color);
     background-image: -moz-linear-gradient(top, @start-color, @mid-color @color-stop, @end-color);
@@ -285,16 +269,14 @@
     background-repeat: no-repeat;
     filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",argb(@start-color),argb(@end-color))); // IE9 and down, gets no color-stop at all for proper fallback
   }
-  .radial(@inner-color: #555, @outer-color: #333) {
-    background-color: @outer-color;
+  .radial(@inner-color: #555; @outer-color: #333) {
     background-image: -webkit-gradient(radial, center center, 0, center center, 460, from(@inner-color), to(@outer-color));
     background-image: -webkit-radial-gradient(circle, @inner-color, @outer-color);
     background-image: -moz-radial-gradient(circle, @inner-color, @outer-color);
     background-image: radial-gradient(circle, @inner-color, @outer-color);
     background-repeat: no-repeat;
   }
-  .striped(@color: #555, @angle: 45deg) {
-    background-color: @color;
+  .striped(@color: #555; @angle: 45deg) {
     background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(.25, rgba(255,255,255,.15)), color-stop(.25, transparent), color-stop(.5, transparent), color-stop(.5, rgba(255,255,255,.15)), color-stop(.75, rgba(255,255,255,.15)), color-stop(.75, transparent), to(transparent));
     background-image: -webkit-linear-gradient(@angle, 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: -moz-linear-gradient(@angle, 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);
@@ -312,11 +294,11 @@
 
 
 
-// RETINA IMAGE SUPPORT
-// --------------------------------------------------
-
+// Retina images
+//
 // Short retina mixin for setting background-image and -size
-.img-retina(@file-1x, @file-2x, @width-1x, @height-1x) {
+
+.img-retina(@file-1x; @file-2x; @width-1x; @height-1x) {
   background-image: url("@{file-1x}");
 
   @media
@@ -332,6 +314,17 @@
 }
 
 
+// Responsive image
+//
+// Keep images from scaling beyond the width of their parents.
+
+.img-responsive(@display: block;) {
+  display: @display;
+  max-width: 100%; // Part 1: Set a maximum relative to the parent
+  height: auto; // Part 2: Scale the height according to the width, otherwise you get stretching
+}
+
+
 // COMPONENT MIXINS
 // --------------------------------------------------
 
@@ -345,9 +338,28 @@
   background-color: @color;
 }
 
+// Panels
+// -------------------------
+.panel-variant(@border; @heading-text-color; @heading-bg-color; @heading-border) {
+  border-color: @border;
+  & > .panel-heading {
+    color: @heading-text-color;
+    background-color: @heading-bg-color;
+    border-color: @heading-border;
+    + .panel-collapse .panel-body {
+      border-top-color: @border;
+    }
+  }
+  & > .panel-footer {
+    + .panel-collapse .panel-body {
+      border-bottom-color: @border;
+    }
+  }
+}
+
 // Alerts
 // -------------------------
-.alert-variant(@background, @border, @text-color) {
+.alert-variant(@background; @border; @text-color) {
   background-color: @background;
   border-color: @border;
   color: @text-color;
@@ -359,11 +371,40 @@
   }
 }
 
-// Button pseudo states
+// Tables
+// -------------------------
+.table-row-variant(@state; @background; @border) {
+  // Exact selectors below required to override `.table-striped` and prevent
+  // inheritance to nested tables.
+  .table > thead > tr,
+  .table > tbody > tr,
+  .table > tfoot > tr {
+    > td.@{state},
+    > th.@{state},
+    &.@{state} > td,
+    &.@{state} > th {
+      background-color: @background;
+      border-color: @border;
+    }
+  }
+
+  // Hover states for `.table-hover`
+  // Note: this is not available for cells or rows within `thead` or `tfoot`.
+  .table-hover > tbody > tr {
+    > td.@{state}:hover,
+    > th.@{state}:hover,
+    &.@{state}:hover > td {
+      background-color: darken(@background, 5%);
+      border-color: darken(@border, 5%);
+    }
+  }
+}
+
+// Button variants
 // -------------------------
 // Easily pump out default styles, as well as :hover, :focus, :active,
 // and disabled options for all buttons
-.btn-pseudo-states(@color, @background, @border) {
+.button-variant(@color; @background; @border) {
   color: @color;
   background-color: @background;
   border-color: @border;
@@ -371,11 +412,17 @@
   &:hover,
   &:focus,
   &:active,
-  &.active {
-    background-color: darken(@background, 5%);
-        border-color: darken(@border, 10%);
+  &.active,
+  .open .dropdown-toggle& {
+    color: @color;
+    background-color: darken(@background, 8%);
+        border-color: darken(@border, 12%);
+  }
+  &:active,
+  &.active,
+  .open .dropdown-toggle& {
+    background-image: none;
   }
-
   &.disabled,
   &[disabled],
   fieldset[disabled] & {
@@ -390,6 +437,39 @@
   }
 }
 
+// Button sizes
+// -------------------------
+.button-size(@padding-vertical; @padding-horizontal; @font-size; @line-height; @border-radius) {
+  padding: @padding-vertical @padding-horizontal;
+  font-size: @font-size;
+  line-height: @line-height;
+  border-radius: @border-radius;
+}
+
+// Pagination
+// -------------------------
+.pagination-size(@padding-vertical; @padding-horizontal; @font-size; @border-radius) {
+  > li {
+    > a,
+    > span {
+      padding: @padding-vertical @padding-horizontal;
+      font-size: @font-size;
+    }
+    &:first-child {
+      > a,
+      > span {
+        .border-left-radius(@border-radius);
+      }
+    }
+    &:last-child {
+      > a,
+      > span {
+        .border-right-radius(@border-radius);
+      }
+    }
+  }
+}
+
 // Labels
 // -------------------------
 .label-variant(@color) {
@@ -405,7 +485,7 @@
 // Navbar vertical align
 // -------------------------
 // Vertically center elements in the navbar.
-// Example: an element has a height of 30px, so write out `.navbarVerticalAlign(30px);` to calculate the appropriate top margin.
+// Example: an element has a height of 30px, so write out `.navbar-vertical-align(30px);` to calculate the appropriate top margin.
 .navbar-vertical-align(@element-height) {
   margin-top: ((@navbar-height - @element-height) / 2);
   margin-bottom: ((@navbar-height - @element-height) / 2);
@@ -448,79 +528,142 @@
 }
 
 // Creates a wrapper for a series of columns
-.make-row() {
+.make-row(@gutter: @grid-gutter-width) {
   // Then clear the floated columns
   .clearfix();
 
-  @media (min-width: @screen-small) {
-    margin-left:  (@grid-gutter-width / -2);
-    margin-right: (@grid-gutter-width / -2);
+  .container & {
+    @media (min-width: @screen-small) {
+      margin-left:  (@gutter / -2);
+      margin-right: (@gutter / -2);
+    }
   }
 
   // Negative margin nested rows out to align the content of columns
   .row {
-    margin-left:  (@grid-gutter-width / -2);
-    margin-right: (@grid-gutter-width / -2);
+    margin-left:  (@gutter / -2);
+    margin-right: (@gutter / -2);
   }
 }
 
-// Generate the columns
-.make-column(@columns) {
+// Generate the extra small columns
+.make-xs-column(@columns; @gutter: @grid-gutter-width) {
+  position: relative;
+  float: left;
+  width: percentage((@columns / @grid-columns));
+  // Prevent columns from collapsing when empty
+  min-height: 1px;
+  // Inner gutter via padding
+  padding-left:  (@gutter / 2);
+  padding-right: (@gutter / 2);
+}
+
+// Generate the small columns
+.make-sm-column(@columns; @gutter: @grid-gutter-width) {
   position: relative;
   // Prevent columns from collapsing when empty
   min-height: 1px;
   // Inner gutter via padding
-  padding-left:  (@grid-gutter-width / 2);
-  padding-right: (@grid-gutter-width / 2);
+  padding-left:  (@gutter / 2);
+  padding-right: (@gutter / 2);
 
   // Calculate width based on number of columns available
-  @media (min-width: @grid-float-breakpoint) {
+  @media (min-width: @screen-small) {
     float: left;
     width: percentage((@columns / @grid-columns));
   }
 }
 
-// Generate the column offsets
-.make-column-offset(@columns) {
-  @media (min-width: @grid-float-breakpoint) {
+// Generate the small column offsets
+.make-sm-column-offset(@columns) {
+  @media (min-width: @screen-small) {
     margin-left: percentage((@columns / @grid-columns));
   }
 }
-.make-column-push(@columns) {
-  @media (min-width: @grid-float-breakpoint) {
+.make-sm-column-push(@columns) {
+  @media (min-width: @screen-small) {
     left: percentage((@columns / @grid-columns));
   }
 }
-.make-column-pull(@columns) {
-  @media (min-width: @grid-float-breakpoint) {
+.make-sm-column-pull(@columns) {
+  @media (min-width: @screen-small) {
     right: percentage((@columns / @grid-columns));
   }
 }
 
-// Generate the small columns
-.make-small-column(@columns) {
+// Generate the medium columns
+.make-md-column(@columns; @gutter: @grid-gutter-width) {
   position: relative;
-  float: left;
   // Prevent columns from collapsing when empty
   min-height: 1px;
   // Inner gutter via padding
-  padding-left:  (@grid-gutter-width / 2);
-  padding-right: (@grid-gutter-width / 2);
-  @max-width: (@grid-float-breakpoint - 1);
+  padding-left:  (@gutter / 2);
+  padding-right: (@gutter / 2);
 
   // Calculate width based on number of columns available
-  @media (max-width: @max-width) {
+  @media (min-width: @screen-medium) {
+    float: left;
     width: percentage((@columns / @grid-columns));
   }
 }
 
+// Generate the large column offsets
+.make-md-column-offset(@columns) {
+  @media (min-width: @screen-medium) {
+    margin-left: percentage((@columns / @grid-columns));
+  }
+}
+.make-md-column-push(@columns) {
+  @media (min-width: @screen-medium) {
+    left: percentage((@columns / @grid-columns));
+  }
+}
+.make-md-column-pull(@columns) {
+  @media (min-width: @screen-medium) {
+    right: percentage((@columns / @grid-columns));
+  }
+}
+
+// Generate the large columns
+.make-lg-column(@columns; @gutter: @grid-gutter-width) {
+  position: relative;
+  // Prevent columns from collapsing when empty
+  min-height: 1px;
+  // Inner gutter via padding
+  padding-left:  (@gutter / 2);
+  padding-right: (@gutter / 2);
+
+  // Calculate width based on number of columns available
+  @media (min-width: @screen-large) {
+    float: left;
+    width: percentage((@columns / @grid-columns));
+  }
+}
+
+// Generate the large column offsets
+.make-lg-column-offset(@columns) {
+  @media (min-width: @screen-large) {
+    margin-left: percentage((@columns / @grid-columns));
+  }
+}
+.make-lg-column-push(@columns) {
+  @media (min-width: @screen-large) {
+    left: percentage((@columns / @grid-columns));
+  }
+}
+.make-lg-column-pull(@columns) {
+  @media (min-width: @screen-large) {
+    right: percentage((@columns / @grid-columns));
+  }
+}
+
 
 // Form validation states
 //
 // Used in forms.less to generate the form validation CSS for warnings, errors,
 // and successes.
 
-.form-control-validation(@text-color: #555, @border-color: #ccc, @background-color: #f5f5f5) {
+.form-control-validation(@text-color: #555; @border-color: #ccc; @background-color: #f5f5f5) {
   // Color the label and help text
   .help-block,
   .control-label {
@@ -528,7 +671,6 @@
   }
   // Set the border and box shadow on specific inputs to match
   .form-control {
-    padding-right: 32px; // to account for the feedback icon
     border-color: @border-color;
     .box-shadow(inset 0 1px 1px rgba(0,0,0,.075)); // Redeclare so transitions work
     &:focus {
@@ -544,3 +686,48 @@
     background-color: @background-color;
   }
 }
+
+// Form control focus state
+//
+// Generate a customized focus state and for any input with the specified color,
+// which defaults to the `@input-focus-border` variable.
+//
+// We highly encourage you to not customize the default value, but instead use
+// this to tweak colors on an as-needed basis. This aesthetic change is based on
+// WebKit's default styles, but applicable to a wider range of browsers. Its
+// usability and accessibility should be taken into account with any change.
+//
+// Example usage: change the default blue border and shadow to white for better
+// contrast against a dark gray background.
+
+.form-control-focus(@color: @input-border-focus) {
+  @color-rgba: rgba(red(@color), green(@color), blue(@color), .6);
+  &:focus {
+    border-color: @color;
+    outline: 0;
+    .box-shadow(~"inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px @{color-rgba}");
+  }
+}
+
+// Form control sizing
+//
+// Relative text size, padding, and border-radii changes for form controls. For
+// horizontal sizing, wrap controls in the predefined grid classes. `<select>`
+// element gets special love because it's special, and that's a fact!
+
+.input-size(@input-height; @padding-vertical; @padding-horizontal; @font-size; @line-height; @border-radius) {
+  height: @input-height;
+  padding: @padding-vertical @padding-horizontal;
+  font-size: @font-size;
+  line-height: @line-height;
+  border-radius: @border-radius;
+
+  select& {
+    height: @input-height;
+    line-height: @input-height;
+  }
+
+  textarea& {
+    height: auto;
+  }
+}

less/modals.less

@@ -29,7 +29,7 @@
     .translate(0, -25%);
     .transition-transform(~"0.3s ease-out");
   }
-  &.fade.in  .modal-dialog { .translate(0, 0)}
+  &.in .modal-dialog { .translate(0, 0)}
 }
 
 // Shell div to position the modal with bottom padding
@@ -49,7 +49,7 @@
   border: 1px solid @modal-content-border-color;
   border-radius: @border-radius-large;
   .box-shadow(0 3px 9px rgba(0,0,0,.5));
-  .background-clip(padding-box);
+  background-clip: padding-box;
   // Remove focus outline from opened modal
   outline: none;
 }
@@ -65,7 +65,7 @@
   background-color: @modal-backdrop-bg;
   // Fade for backdrop
   &.fade { .opacity(0); }
-  &.fade.in { .opacity(.5); }
+  &.in { .opacity(.5); }
 }
 
 // Modal header