Merge branch 'master' into pr/11162

Conflicts:
	less/modals.less

.csscomb.json

+{
+    "always-semicolon": true,
+    "block-indent": 2,
+    "colon-space": true,
+    "color-case": "lower",
+    "color-shorthand": true,
+    "combinator-space": true,
+    "element-case": "lower",
+    "eof-newline": true,
+    "leading-zero": false,
+    "remove-empty-rulesets": true,
+    "rule-indent": 2,
+    "stick-brace": true,
+    "strip-spaces": true,
+    "unitless-zero": true,
+    "vendor-prefix-align": true,
+    "sort-order": [
+        [
+            "position",
+            "top",
+            "right",
+            "bottom",
+            "left",
+            "z-index",
+            "display",
+            "float",
+            "width",
+            "min-width",
+            "max-width",
+            "height",
+            "min-height",
+            "max-height",
+            "-webkit-box-sizing",
+            "-moz-box-sizing",
+            "box-sizing",
+            "padding",
+            "padding-top",
+            "padding-right",
+            "padding-bottom",
+            "padding-left",
+            "margin",
+            "margin-top",
+            "margin-right",
+            "margin-bottom",
+            "margin-left",
+            "overflow",
+            "overflow-x",
+            "overflow-y",
+            "-ms-overflow-x",
+            "-ms-overflow-y",
+            "clip",
+            "clear",
+            "font",
+            "font-family",
+            "font-size",
+            "font-style",
+            "font-weight",
+            "font-variant",
+            "font-size-adjust",
+            "font-stretch",
+            "font-effect",
+            "font-emphasize",
+            "font-emphasize-position",
+            "font-emphasize-style",
+            "font-smooth",
+            "-webkit-hyphens",
+            "-moz-hyphens",
+            "hyphens",
+            "line-height",
+            "color",
+            "text-align",
+            "-webkit-text-align-last",
+            "-moz-text-align-last",
+            "-ms-text-align-last",
+            "text-align-last",
+            "text-emphasis",
+            "text-emphasis-color",
+            "text-emphasis-style",
+            "text-emphasis-position",
+            "text-decoration",
+            "text-indent",
+            "text-justify",
+            "text-outline",
+            "-ms-text-overflow",
+            "text-overflow",
+            "text-overflow-ellipsis",
+            "text-overflow-mode",
+            "text-shadow",
+            "text-transform",
+            "text-wrap",
+            "letter-spacing",
+            "-ms-word-break",
+            "word-break",
+            "word-spacing",
+            "-ms-word-wrap",
+            "word-wrap",
+            "-moz-tab-size",
+            "-o-tab-size",
+            "tab-size",
+            "white-space",
+            "vertical-align",
+            "list-style",
+            "list-style-position",
+            "list-style-type",
+            "list-style-image",
+            "pointer-events",
+            "cursor",
+            "visibility",
+            "zoom",
+            "flex-direction",
+            "flex-order",
+            "flex-pack",
+            "flex-align",
+            "table-layout",
+            "empty-cells",
+            "caption-side",
+            "border-spacing",
+            "border-collapse",
+            "content",
+            "quotes",
+            "counter-reset",
+            "counter-increment",
+            "resize",
+            "-webkit-user-select",
+            "-moz-user-select",
+            "-ms-user-select",
+            "user-select",
+            "nav-index",
+            "nav-up",
+            "nav-right",
+            "nav-down",
+            "nav-left",
+            "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader",
+            "background",
+            "background-color",
+            "-ms-filter:\\'progid:DXImageTransform.Microsoft.gradient",
+            "filter:progid:DXImageTransform.Microsoft.gradient",
+            "background-image",
+            "background-repeat",
+            "background-attachment",
+            "background-position",
+            "background-position-x",
+            "background-position-y",
+            "-webkit-background-clip",
+            "-moz-background-clip",
+            "background-clip",
+            "background-origin",
+            "-webkit-background-size",
+            "-moz-background-size",
+            "-o-background-size",
+            "background-size",
+            "border",
+            "border-color",
+            "border-style",
+            "border-width",
+            "border-top",
+            "border-top-color",
+            "border-top-style",
+            "border-top-width",
+            "border-right",
+            "border-right-color",
+            "border-right-style",
+            "border-right-width",
+            "border-bottom",
+            "border-bottom-color",
+            "border-bottom-style",
+            "border-bottom-width",
+            "border-left",
+            "border-left-color",
+            "border-left-style",
+            "border-left-width",
+            "border-radius",
+            "border-top-left-radius",
+            "border-top-right-radius",
+            "border-bottom-right-radius",
+            "border-bottom-left-radius",
+            "-webkit-border-image",
+            "-moz-border-image",
+            "-o-border-image",
+            "border-image",
+            "-webkit-border-image-source",
+            "-moz-border-image-source",
+            "-o-border-image-source",
+            "border-image-source",
+            "-webkit-border-image-slice",
+            "-moz-border-image-slice",
+            "-o-border-image-slice",
+            "border-image-slice",
+            "-webkit-border-image-width",
+            "-moz-border-image-width",
+            "-o-border-image-width",
+            "border-image-width",
+            "-webkit-border-image-outset",
+            "-moz-border-image-outset",
+            "-o-border-image-outset",
+            "border-image-outset",
+            "-webkit-border-image-repeat",
+            "-moz-border-image-repeat",
+            "-o-border-image-repeat",
+            "border-image-repeat",
+            "outline",
+            "outline-width",
+            "outline-style",
+            "outline-color",
+            "outline-offset",
+            "-webkit-box-shadow",
+            "-moz-box-shadow",
+            "box-shadow",
+            "filter:progid:DXImageTransform.Microsoft.Alpha(Opacity",
+            "-ms-filter:\\'progid:DXImageTransform.Microsoft.Alpha",
+            "opacity",
+            "-ms-interpolation-mode",
+            "-webkit-transition",
+            "-moz-transition",
+            "-ms-transition",
+            "-o-transition",
+            "transition",
+            "-webkit-transition-delay",
+            "-moz-transition-delay",
+            "-ms-transition-delay",
+            "-o-transition-delay",
+            "transition-delay",
+            "-webkit-transition-timing-function",
+            "-moz-transition-timing-function",
+            "-ms-transition-timing-function",
+            "-o-transition-timing-function",
+            "transition-timing-function",
+            "-webkit-transition-duration",
+            "-moz-transition-duration",
+            "-ms-transition-duration",
+            "-o-transition-duration",
+            "transition-duration",
+            "-webkit-transition-property",
+            "-moz-transition-property",
+            "-ms-transition-property",
+            "-o-transition-property",
+            "transition-property",
+            "-webkit-transform",
+            "-moz-transform",
+            "-ms-transform",
+            "-o-transform",
+            "transform",
+            "-webkit-transform-origin",
+            "-moz-transform-origin",
+            "-ms-transform-origin",
+            "-o-transform-origin",
+            "transform-origin",
+            "-webkit-animation",
+            "-moz-animation",
+            "-ms-animation",
+            "-o-animation",
+            "animation",
+            "-webkit-animation-name",
+            "-moz-animation-name",
+            "-ms-animation-name",
+            "-o-animation-name",
+            "animation-name",
+            "-webkit-animation-duration",
+            "-moz-animation-duration",
+            "-ms-animation-duration",
+            "-o-animation-duration",
+            "animation-duration",
+            "-webkit-animation-play-state",
+            "-moz-animation-play-state",
+            "-ms-animation-play-state",
+            "-o-animation-play-state",
+            "animation-play-state",
+            "-webkit-animation-timing-function",
+            "-moz-animation-timing-function",
+            "-ms-animation-timing-function",
+            "-o-animation-timing-function",
+            "animation-timing-function",
+            "-webkit-animation-delay",
+            "-moz-animation-delay",
+            "-ms-animation-delay",
+            "-o-animation-delay",
+            "animation-delay",
+            "-webkit-animation-iteration-count",
+            "-moz-animation-iteration-count",
+            "-ms-animation-iteration-count",
+            "-o-animation-iteration-count",
+            "animation-iteration-count",
+            "-webkit-animation-direction",
+            "-moz-animation-direction",
+            "-ms-animation-direction",
+            "-o-animation-direction",
+            "animation-direction"
+        ]
+    ]
+}

.csslintrc

+{
+  "adjoining-classes": false,
+  "box-sizing": false,
+  "box-model": false,
+  "compatible-vendor-prefixes": false,
+  "floats": false,
+  "font-sizes": false,
+  "gradients": false,
+  "important": false,
+  "known-properties": false,
+  "outline-none": false,
+  "qualified-headings": false,
+  "regex-selectors": false,
+  "text-indent": false,
+  "unique-headings": false,
+  "universal-selector": false,
+  "unqualified-attributes": false
+}

.gitattributes

+# Enforce Unix newlines
+*.css   text eol=lf
+*.html  text eol=lf
+*.js    text eol=lf
+*.json  text eol=lf
+*.less  text eol=lf
+*.md    text eol=lf
+*.yml   text eol=lf

.gitignore

@@ -39,3 +39,4 @@ validation-report.json
 
 # Folders to ignore
 node_modules
+bower_components

.travis.yml

 language: node_js
 node_js:
-  - 0.8
-before_script:
-  - gem install jekyll
-  - npm install -g grunt-cli
+  - 0.10
+before_install:
+  - time sudo pip install --use-mirrors -r ./test-infra/requirements.txt
+install:
+  - time gem install jekyll
+  - time npm install -g grunt-cli
+  - time ./test-infra/node_modules_cache.py download || time npm install
+after_script:
+  - time ./test-infra/node_modules_cache.py upload
 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: ""
+  - SAUCE_USERNAME: bootstrap
+  - secure: "pJkBwnuae9dKU5tEcCqccfS1QQw7/meEcfz63fM7ba7QJNjoA6BaXj08L5Z3Vb5vBmVPwBawxo5Hp0jC0r/Z/O0hGnAmz/Cz09L+cy7dSAZ9x4hvZePSja/UAusaB5ogMoO8l2b773MzgQeSmrLbExr9BWLeqEfjC2hFgdgHLaQ="
+  - secure: "gqjqISbxBJK6byFbsmr1AyP1qoWH+rap06A2gI7v72+Tn2PU2nYkIMUkCvhZw6K889jv+LhQ/ybcBxDOXHpNCExCnSgB4dcnmYp+9oeNZb37jSP0rQ+Ib4OTLjzc3/FawE/fUq5kukZTC7porzc/k0qJNLAZRx3YLALmK1GIdUY="
+  - secure: "Gghh/e3Gsbj1+4RR9Lh2aR/xJl35HWiHqlPIeSUqE9D7uDCVTAwNce/dGL3Ew7uJPfJ6Pgr70wD3zgu3stw0Zmzayax0hiDtGwcQCxVIER08wqGANK9C2Q7PYJkNTNtiTo6ehKWbdV4Z+/U+TEYyQfpQTDbAFYk/vVpsdjp0Lmc="
+  - secure: "RTbRdx4G/2OTLfrZtP1VbRljxEmd6A1F3GqXboeQTldsnAlwpsES65es5CE3ub/rmixLApOY9ot7OPmNixFgC2Y8xOsV7lNCC62QVpmqQEDyGFFQKb3yO6/dmwQxdsCqGfzf9Np6Wh5V22QFvr50ZLKLd7Uhd9oXMDIk/z1MJ3o="

CONTRIBUTING.md

@@ -17,7 +17,7 @@ We only accept issues that are bug reports or feature requests. Bugs must be iso
 
 ## Pull requests
 
-- CSS changes must be done in `.less` files first, never just the compiled `.css` files
+- CSS changes must be done in `.less` files first, never just in the compiled `.css` files
 - If modifying the `.less` files, always recompile and commit the compiled files `bootstrap.css` and `bootstrap.min.css`
 - Try not to pollute your pull request with unintended changes--keep them simple and small
 - Try to share which browsers your code has been tested in before submitting a pull request
@@ -58,4 +58,22 @@ We only accept issues that are bug reports or feature requests. Bugs must be iso
 
 With v3.1, we're moving from the Apache 2 to the MIT license for the Bootstrap code (not the docs). We're in the process of collecting permissions from all Bootstrap contributors with code still part of the project to make this happen. For details, please see [#2054](https://github.com/twbs/bootstrap/issues/2054).
 
-By contributing your code, you agree to dual-license your contribution under the [Apache 2](https://github.com/twbs/bootstrap/blob/master/LICENSE) and [MIT](https://github.com/twbs/bootstrap/blob/master/MIT) licenses.
+By contributing your code, you agree to dual-license your contribution under the [Apache 2](https://github.com/twbs/bootstrap/blob/master/LICENSE) and [MIT](https://github.com/twbs/bootstrap/blob/master/LICENSE-MIT) licenses.
+
+
+
+## Release checklist
+
+1. Close ship list issue for the release.
+2. Close the milestone for the release.
+3. Open new release issue that includes this checklist.
+4. Ping folks to coordinate release (mainly @jdorfman for BootstrapCDN).
+5. Update version numbers using `grunt change-version-number --oldver=A.B.C --newver=X.Y.Z`. Review the changes and stage them manually.
+6. Run `grunt` one last time.
+7. Push to `master` branch.
+8. Merge `master` into `gh-pages`.
+9. Generate `bootstrap-X.Y.Z-dist.zip` file for release.
+10. Create release on GitHub with `/dist/` folder and release notes.
+11. Push `gh-pages`.
+12. Publish blog post.
+13. Tweet tweet.

Gruntfile.js

 /* jshint node: true */
 
-module.exports = function(grunt) {
-  "use strict";
+module.exports = function (grunt) {
+  'use strict';
 
+  // Force use of Unix newlines
+  grunt.util.linefeed = '\n';
+
+  RegExp.quote = require('regexp-quote')
   var btoa = require('btoa')
   // Project configuration.
   grunt.initConfig({
@@ -10,12 +14,10 @@ module.exports = function(grunt) {
     // Metadata.
     pkg: grunt.file.readJSON('package.json'),
     banner: '/*!\n' +
-              ' * Bootstrap v<%= pkg.version %> by @fat and @mdo\n' +
+              ' * Bootstrap v<%= pkg.version %> (<%= pkg.homepage %>)\n' +
               ' * Copyright <%= grunt.template.today("yyyy") %> <%= pkg.author %>\n' +
               ' * Licensed under <%= _.pluck(pkg.licenses, "url").join(", ") %>\n' +
-              ' *\n' +
-              ' * Designed and built with all the love in the world by @mdo and @fat.\n' +
-              ' */\n',
+              ' */\n\n',
     jqueryCheck: 'if (typeof jQuery === "undefined") { throw new Error("Bootstrap requires jQuery") }\n\n',
 
     // Task configuration.
@@ -35,9 +37,34 @@ module.exports = function(grunt) {
       },
       test: {
         src: ['js/tests/unit/*.js']
+      },
+      assets: {
+        src: ['docs-assets/js/application.js', 'docs-assets/js/customizer.js']
       }
     },
 
+    jscs: {
+      options: {
+        config: 'js/.jscs.json',
+      },
+      gruntfile: {
+        src: ['Gruntfile.js']
+      },
+      src: {
+        src: ['js/*.js']
+      },
+      test: {
+        src: ['js/tests/unit/*.js']
+      }
+    },
+
+    csslint: {
+      options: {
+        csslintrc: '.csslintrc'
+      },
+      src: ['dist/css/bootstrap.css', 'dist/css/bootstrap-theme.css']
+    },
+
     concat: {
       options: {
         banner: '<%= banner %><%= jqueryCheck %>',
@@ -70,42 +97,74 @@ module.exports = function(grunt) {
       bootstrap: {
         src: ['<%= concat.bootstrap.dest %>'],
         dest: 'dist/js/<%= pkg.name %>.min.js'
+      },
+      customize: {
+        src: [
+          'docs-assets/js/less.js',
+          'docs-assets/js/jszip.js',
+          'docs-assets/js/uglify.js',
+          'docs-assets/js/filesaver.js',
+          'docs-assets/js/customizer.js'
+        ],
+        dest: 'docs-assets/js/customize.js'
       }
     },
 
-    recess: {
-      options: {
-        compile: true,
-        banner: '<%= banner %>'
-      },
-      bootstrap: {
-        src: ['less/bootstrap.less'],
-        dest: 'dist/css/<%= pkg.name %>.css'
-      },
-      min: {
+    less: {
+      compile: {
         options: {
-          compress: true
+          strictMath: true
         },
-        src: ['less/bootstrap.less'],
-        dest: 'dist/css/<%= pkg.name %>.min.css'
-      },
-      theme: {
-        src: ['less/theme.less'],
-        dest: 'dist/css/<%= pkg.name %>-theme.css'
+        files: {
+          'dist/css/<%= pkg.name %>.css': 'less/bootstrap.less',
+          'dist/css/<%= pkg.name %>-theme.css': 'less/theme.less'
+        }
       },
-      theme_min: {
+      minify: {
         options: {
-          compress: true
+          cleancss: true,
+          report: 'min'
         },
-        src: ['less/theme.less'],
-        dest: 'dist/css/<%= pkg.name %>-theme.min.css'
+        files: {
+          'dist/css/<%= pkg.name %>.min.css': 'dist/css/<%= pkg.name %>.css',
+          'dist/css/<%= pkg.name %>-theme.min.css': 'dist/css/<%= pkg.name %>-theme.css'
+        }
+      }
+    },
+
+    usebanner: {
+      dist: {
+        options: {
+          position: 'top',
+          banner: '<%= banner %>'
+        },
+        files: {
+          src: [
+            'dist/css/<%= pkg.name %>.css',
+            'dist/css/<%= pkg.name %>.min.css',
+            'dist/css/<%= pkg.name %>-theme.css',
+            'dist/css/<%= pkg.name %>-theme.min.css',
+          ]
+        }
+      }
+    },
+
+    csscomb: {
+      sort: {
+        options: {
+          sortOrder: '.csscomb.json'
+        },
+        files: {
+          'dist/css/<%= pkg.name %>.css': ['dist/css/<%= pkg.name %>.css'],
+          'dist/css/<%= pkg.name %>-theme.css': ['dist/css/<%= pkg.name %>-theme.css'],
+        }
       }
     },
 
     copy: {
       fonts: {
         expand: true,
-        src: ["fonts/*"],
+        src: ['fonts/*'],
         dest: 'dist/'
       }
     },
@@ -132,10 +191,14 @@ module.exports = function(grunt) {
 
     validation: {
       options: {
-        reset: true
+        reset: true,
+        relaxerror: [
+          'Bad value X-UA-Compatible for attribute http-equiv on element meta.',
+          'Element img is missing required attribute src.'
+        ]
       },
       files: {
-        src: ["_gh_pages/**/*.html"]
+        src: ['_gh_pages/**/*.html']
       }
     },
 
@@ -148,39 +211,131 @@ module.exports = function(grunt) {
         files: '<%= jshint.test.src %>',
         tasks: ['jshint:test', 'qunit']
       },
-      recess: {
+      less: {
         files: 'less/*.less',
-        tasks: ['recess']
+        tasks: ['less']
+      }
+    },
+
+    sed: {
+      versionNumber: {
+        pattern: (function () {
+          var old = grunt.option('oldver')
+          return old ? RegExp.quote(old) : old
+        })(),
+        replacement: grunt.option('newver'),
+        recursive: true
+      }
+    },
+
+    'saucelabs-qunit': {
+      all: {
+        options: {
+          build: process.env.TRAVIS_JOB_ID,
+          concurrency: 3,
+          urls: ['http://127.0.0.1:3000/js/tests/index.html'],
+          browsers: [
+            // See https://saucelabs.com/docs/platforms/webdriver
+            {
+              browserName: 'safari',
+              version: '7',
+              platform: 'OS X 10.9'
+            },
+            {
+              browserName: 'chrome',
+              version: '31',
+              platform: 'OS X 10.9'
+            },
+            /* FIXME: currently fails 1 tooltip test
+            {
+              browserName: 'firefox',
+              version: '25',
+              platform: 'OS X 10.6'
+            },*/
+            // Mac Opera not currently supported by Sauce Labs
+            /* FIXME: currently fails 1 tooltip test
+            {
+              browserName: 'internet explorer',
+              version: '11',
+              platform: 'Windows 8.1'
+            },*/
+            /*
+            {
+              browserName: 'internet explorer',
+              version: '10',
+              platform: 'Windows 8'
+            },
+            {
+              browserName: 'internet explorer',
+              version: '9',
+              platform: 'Windows 7'
+            },
+            {
+              browserName: 'internet explorer',
+              version: '8',
+              platform: 'Windows 7'
+            },
+            {// unofficial
+              browserName: 'internet explorer',
+              version: '7',
+              platform: 'Windows XP'
+            },
+            */
+            {
+              browserName: 'chrome',
+              version: '31',
+              platform: 'Windows 8.1'
+            },
+            {
+              browserName: 'firefox',
+              version: '25',
+              platform: 'Windows 8.1'
+            },
+            // Win Opera 15+ not currently supported by Sauce Labs
+            {
+              browserName: 'iphone',
+              version: '6.1',
+              platform: 'OS X 10.8'
+            },
+            // iOS Chrome not currently supported by Sauce Labs
+            // Linux (unofficial)
+            {
+              browserName: 'chrome',
+              version: '30',
+              platform: 'Linux'
+            },
+            {
+              browserName: 'firefox',
+              version: '25',
+              platform: 'Linux'
+            }
+            // Android Chrome not currently supported by Sauce Labs
+            /* Android Browser (super-unofficial)
+            {
+              browserName: 'android',
+              version: '4.0',
+              platform: 'Linux'
+            }
+            */
+          ],
+        }
       }
     }
   });
 
 
   // These plugins provide necessary tasks.
-  grunt.loadNpmTasks('browserstack-runner');
-  grunt.loadNpmTasks('grunt-contrib-clean');
-  grunt.loadNpmTasks('grunt-contrib-concat');
-  grunt.loadNpmTasks('grunt-contrib-connect');
-  grunt.loadNpmTasks('grunt-contrib-copy');
-  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');
+  require('load-grunt-tasks')(grunt, {scope: 'devDependencies'});
 
   // Docs HTML validation task
   grunt.registerTask('validate-html', ['jekyll', 'validation']);
 
   // Test task.
-  var testSubtasks = ['dist-css', 'jshint', 'qunit', 'validate-html'];
-  // 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');
-    }
+  var testSubtasks = ['dist-css', 'jshint', 'jscs', 'qunit', 'validate-html'];
+  // Only run Sauce Labs tests if there's a Sauce access key
+  if (typeof process.env.SAUCE_ACCESS_KEY !== 'undefined') {
+    testSubtasks.push('connect');
+    testSubtasks.push('saucelabs-qunit');
   }
   grunt.registerTask('test', testSubtasks);
 
@@ -188,7 +343,7 @@ module.exports = function(grunt) {
   grunt.registerTask('dist-js', ['concat', 'uglify']);
 
   // CSS distribution task.
-  grunt.registerTask('dist-css', ['recess']);
+  grunt.registerTask('dist-css', ['less', 'csscomb', 'usebanner']);
 
   // Fonts distribution task.
   grunt.registerTask('dist-fonts', ['copy']);
@@ -199,6 +354,11 @@ module.exports = function(grunt) {
   // Default task.
   grunt.registerTask('default', ['test', 'dist', 'build-customizer']);
 
+  // Version numbering task.
+  // grunt change-version-number --oldver=A.B.C --newver=X.Y.Z
+  // This can be overzealous, so its changes should always be manually reviewed!
+  grunt.registerTask('change-version-number', ['sed']);
+
   // task for building customizer
   grunt.registerTask('build-customizer', 'Add scripts/less files to customizer.', function () {
     var fs = require('fs')

README.md

 # [Bootstrap](http://getbootstrap.com) [![Build Status](https://secure.travis-ci.org/twbs/bootstrap.png)](http://travis-ci.org/twbs/bootstrap) [![devDependency Status](https://david-dm.org/twbs/bootstrap/dev-status.png)](https://david-dm.org/twbs/bootstrap#info=devDependencies)
+[![Selenium Test Status](https://saucelabs.com/browser-matrix/bootstrap.svg)](https://saucelabs.com/u/bootstrap)
 
 Bootstrap is a sleek, intuitive, and powerful front-end framework for faster and easier web development, created and maintained by [Mark Otto](http://twitter.com/mdo) and [Jacob Thornton](http://twitter.com/fat).
 
-To get started, check out [http://getbootstrap.com](http://getbootstrap.com)!
+To get started, check out <http://getbootstrap.com>!
 
 
 
@@ -10,7 +11,7 @@ To get started, check out [http://getbootstrap.com](http://getbootstrap.com)!
 
 Three quick start options are available:
 
-* [Download the latest release](https://github.com/twbs/bootstrap/releases/tag/v3.0.0).
+* [Download the latest release](https://github.com/twbs/bootstrap/archive/v3.0.3.zip).
 * Clone the repo: `git clone https://github.com/twbs/bootstrap.git`.
 * Install with [Bower](http://bower.io): `bower install bootstrap`.
 
@@ -51,20 +52,21 @@ You may use [this JS Bin](http://jsbin.com/aKiCIDO/1/edit) as a template for you
 
 ## Documentation
 
-Bootstrap's documentation, included in this repo in the root directory, is built with [Jekyll](http://jekyllrb.com) and publicly hosted on GitHub Pages at [http://getbootstrap.com](http://getbootstrap.com). The docs may also be run locally.
+Bootstrap's documentation, included in this repo in the root directory, is built with [Jekyll](http://jekyllrb.com) and publicly hosted on GitHub Pages at <http://getbootstrap.com>. The docs may also be run locally.
 
 ### Running documentation locally
 
 1. If necessary, [install Jekyll](http://jekyllrb.com/docs/installation) (requires v1.x).
+  - **Windows users:** read [this unofficial guide](https://github.com/juthilo/run-jekyll-on-windows/) to get Jekyll up and running without problems.
 2. From the root `/bootstrap` directory, run `jekyll serve` in the command line.
-  - **Windows users:** run `chcp 65001` first to change the command prompt's character encoding ([code page](http://en.wikipedia.org/wiki/Windows_code_page)) to UTF-8 so Jekyll runs without errors.
-3. Open [http://localhost:9001](http://localhost:9001) in your browser, and voilà.
+  - **Windows users:** For Ruby 2.0.0 run `chcp 65001` first to change the command prompt's character encoding ([code page](http://en.wikipedia.org/wiki/Windows_code_page)) to UTF-8 so Jekyll runs without errors. For Ruby 1.9.3 you can alternatively do `SET LANG=en_EN.UTF-8`. In addition, ensure you have Python installed and added in your `PATH` or the build will fail due to our Pygments dependency.
+3. Open <http://localhost:9001> in your browser, and voilà.
 
 Learn more about using Jekyll by reading its [documentation](http://jekyllrb.com/docs/home/).
 
 ### Documentation for previous releases
 
-Documentation for v2.3.2 has been made available for the time being at [http://getbootstrap.com/2.3.2/](http://getbootstrap.com/2.3.2/) while folks transition to Bootstrap 3.
+Documentation for v2.3.2 has been made available for the time being at <http://getbootstrap.com/2.3.2/> while folks transition to Bootstrap 3.
 
 [Previous releases](https://github.com/twbs/bootstrap/releases) and their documentation are also available for download.
 
@@ -111,7 +113,7 @@ Please read through our [contributing guidelines](https://github.com/twbs/bootst
 
 More over, if your pull request contains JavaScript patches or features, you must include relevant unit tests. All HTML and CSS should conform to the [Code Guide](http://github.com/mdo/code-guide), maintained by [Mark Otto](http://github.com/mdo).
 
-Editor preferences are available in the [editor config](.editorconfig) for easy use in common text editors. Read more and download plugins at [http://editorconfig.org](http://editorconfig.org).
+Editor preferences are available in the [editor config](.editorconfig) for easy use in common text editors. Read more and download plugins at <http://editorconfig.org>.
 
 With v3.1, we're moving from the Apache 2 to the MIT license for the Bootstrap code (not the docs). Please see the [contributing guidelines](https://github.com/twbs/bootstrap/blob/master/CONTRIBUTING.md) for more information.
 
@@ -122,7 +124,6 @@ Keep track of development and community news.
 
 * Follow [@twbootstrap on Twitter](http://twitter.com/twbootstrap).
 * Read and subscribe to [The Official Bootstrap Blog](http://blog.getbootstrap.com).
-* Have a question that's not a feature request or bug report? [Ask on the mailing list.](http://groups.google.com/group/twitter-bootstrap)
 * Chat with fellow Bootstrappers in IRC. On the `irc.freenode.net` server, in the `##twitter-bootstrap` channel.
 
 
@@ -142,7 +143,7 @@ And constructed with the following guidelines:
 * New additions without breaking backward compatibility bumps the minor (and resets the patch)
 * Bug fixes and misc changes bumps the patch
 
-For more information on SemVer, please visit [http://semver.org/](http://semver.org/).
+For more information on SemVer, please visit <http://semver.org/>.
 
 
 
@@ -150,13 +151,13 @@ For more information on SemVer, please visit [http://semver.org/](http://semver.
 
 **Mark Otto**
 
-+ [http://twitter.com/mdo](http://twitter.com/mdo)
-+ [http://github.com/mdo](http://github.com/mdo)
++ <http://twitter.com/mdo>
++ <http://github.com/mdo>
 
 **Jacob Thornton**
 
-+ [http://twitter.com/fat](http://twitter.com/fat)
-+ [http://github.com/fat](http://github.com/fat)
++ <http://twitter.com/fat>
++ <http://github.com/fat>
 
 
 

_config.yml

@@ -11,15 +11,15 @@ exclude:          [".editorconfig", ".gitignore", "bower.json", "composer.json",
 port:             9001
 
 # Custom vars
-current_version:  3.0.0
+current_version:  3.0.3
 repo:             https://github.com/twbs/bootstrap
 
-download_source:  https://github.com/twbs/bootstrap/archive/v3.0.0.zip
-download_dist:    https://github.com/twbs/bootstrap/releases/download/v3.0.0/bootstrap-3.0.0-dist.zip
+download_source:  https://github.com/twbs/bootstrap/archive/v3.0.3.zip
+download_dist:    https://github.com/twbs/bootstrap/releases/download/v3.0.3/bootstrap-3.0.3-dist.zip
 
 blog:             http://blog.getbootstrap.com
 expo:             http://expo.getbootstrap.com
 
-cdn_css:          //netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css
-cdn_theme_css:    //netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css
-cdn_js:           //netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js
+cdn_css:          //netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css
+cdn_theme_css:    //netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap-theme.min.css
+cdn_js:           //netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js

_includes/footer.html

 <!-- Bootstrap core JavaScript
 ================================================== -->
 <!-- Placed at the end of the document so the pages load faster -->
-<script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
-<script src="{{ page.base_url }}dist/js/bootstrap.js"></script>
+<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
+<script src="{{ page.base_url }}dist/js/bootstrap.min.js"></script>
 
-<script src="http://platform.twitter.com/widgets.js"></script>
 <script src="{{ page.base_url }}docs-assets/js/holder.js"></script>
 
 <script src="{{ page.base_url }}docs-assets/js/application.js"></script>
 
 {% if page.slug == "customize" %}
-<script src="{{ page.base_url }}docs-assets/js/less.js"></script>
-<script src="{{ page.base_url }}docs-assets/js/jszip.js"></script>
-<script src="{{ page.base_url }}docs-assets/js/uglify.js"></script>
-<script src="{{ page.base_url }}docs-assets/js/filesaver.js"></script>
 <script src="{{ page.base_url }}docs-assets/js/raw-files.js"></script>
-<script src="{{ page.base_url }}docs-assets/js/customizer.js"></script>
+<script src="{{ page.base_url }}docs-assets/js/customize.js"></script>
 {% endif %}
 
+{% comment %}
+  Inject Twitter widgets asynchronously. Snippet snipped from Twitter's
+  JS interface site: https://dev.twitter.com/docs/tfw-javascript
+
+  * "js.async=1;" added to add async attribute to the generated script tag.
+{% endcomment %}
+<script>
+  window.twttr = (function (d,s,id) {
+    var t, js, fjs = d.getElementsByTagName(s)[0];
+    if (d.getElementById(id)) return; js=d.createElement(s); js.id=id; js.async=1;
+    js.src="https://platform.twitter.com/widgets.js"; fjs.parentNode.insertBefore(js, fjs);
+    return window.twttr || (t = { _e: [], ready: function(f){ t._e.push(f) } });
+  }(document, "script", "twitter-wjs"));
+</script>
+
 <!-- Analytics
 ================================================== -->
 <script>

_includes/header.html

 <meta charset="utf-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
-<meta name="description" content="">
-<meta name="author" content="">
+<meta name="description" content="Bootstrap, a sleek, intuitive, and powerful mobile first front-end framework for faster and easier web development.">
+<meta name="keywords" content="HTML, CSS, JS, JavaScript, framework, bootstrap, front-end, frontend, web development">
+<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
 
 <title>
   {% if page.title == "Bootstrap" %}

_includes/nav-components.html

@@ -121,6 +121,7 @@
     <li><a href="#list-group-basic">Basic example</a></li>
     <li><a href="#list-group-badges">Badges</a></li>
     <li><a href="#list-group-linked">Linked items</a></li>
+    <li><a href="#list-group-contextual-classes">Contextual classes</a></li>
     <li><a href="#list-group-custom-content">Custom content</a></li>
   </ul>
 </li>

_includes/nav-css.html

@@ -16,6 +16,7 @@
     <li><a href="#grid-media-queries">Media queries</a></li>
     <li><a href="#grid-options">Grid options</a></li>
     <li><a href="#grid-example-basic">Ex: Stacked-to-horizonal</a></li>
+    <li><a href="#grid-example-fluid">Ex: Fluid container</a></li>
     <li><a href="#grid-example-mixed">Ex: Mobile and desktops</a></li>
     <li><a href="#grid-example-mixed-complete">Ex: Mobile, tablet, desktops</a></li>
     <li><a href="#grid-responsive-resets">Responsive column resets</a></li>
@@ -37,7 +38,14 @@
     <li><a href="#type-lists">Lists</a></li>
   </ul>
 </li>
-<li><a href="#code">Code</a></li>
+<li>
+  <a href="#code">Code</a>
+  <ul class="nav">
+    <li><a href="#code-inline">Inline code</a></li>
+    <li><a href="#code-user-input">User input</a></li>
+    <li><a href="#code-block">Blocks of code</a></li>
+  </ul>
+</li>
 <li>
   <a href="#tables">Tables</a>
   <ul class="nav">
@@ -97,3 +105,11 @@
     <li><a href="#responsive-utilities-tests">Test cases</a></li>
   </ul>
 </li>
+<li>
+  <a href="#less">Using LESS</a>
+  <ul class="nav">
+    <li><a href="#less-variables">Variables</a></li>
+    <li><a href="#less-mixins-vendor">Vendor mixins</a></li>
+    <li><a href="#less-mixins-utility">Utility mixins</a></li>
+  </ul>
+</li>

_includes/nav-getting-started.html

@@ -8,6 +8,10 @@
 </li>
 <li>
   <a href="#whats-included">What's included</a>
+  <ul class="nav">
+    <li><a href="#whats-included-precompiled">Precompiled</a></li>
+    <li><a href="#whats-included-source">Source code</a></li>
+  </ul>
 </li>
 <li>
   <a href="#template">Basic template</a>

about.html

@@ -69,7 +69,6 @@ base_url: "../"
   <p class="lead">Stay up to date on the development of Bootstrap and reach out to the community with these helpful resources.</p>
   <ul>
     <li>Read and subscribe to <a href="http://blog.getbootstrap.com/">The Official Bootstrap Blog</a>.</li>
-    <li>Have a question that's not a feature request or bug report? <a href="http://groups.google.com/group/twitter-bootstrap">Ask on the mailing list.</a></li>
     <li>Chat with fellow Bootstrappers using IRC in the <code>irc.freenode.net</code> server, in the <a href="irc://irc.freenode.net/#twitter-bootstrap">##twitter-bootstrap channel</a>.</li>
     <li>Find inspiring examples of people building with Bootstrap at the <a href="http://expo.getbootstrap.com">Bootstrap Expo</a>.</li>
   </ul>
@@ -88,6 +87,8 @@ base_url: "../"
     <li><a href="http://v3.bootcss.com/">Bootstrap 中文文档 (Chinese)</a></li>
     <li><a href="http://www.oneskyapp.com/docs/bootstrap/ru">Bootstrap по-русски (Russian)</a></li>
     <li><a href="http://www.oneskyapp.com/docs/bootstrap/es">Bootstrap en Español (Spanish)</a></li>
+    <li><a href="http://twbs.site-konstruktor.com.ua">Bootstrap ua Українською (Ukrainian)</a></li>
+    <li><a href="http://www.oneskyapp.com/docs/bootstrap/fr">Bootstrap en Français (French)</a></li>
   </ul>
   <p>Have another language to add, or perhaps a different or better translation? Let us know by <a href="https://github.com/twbs/bootstrap/issues/new">opening an issue</a>.</p>
 </div>

bower.json

 {
   "name": "bootstrap",
-  "version": "3.0.0",
-  "main": ["./dist/js/bootstrap.js", "./dist/css/bootstrap.css", "./dist/fonts/*"],
+  "version": "3.0.3",
+  "main": [
+    "./dist/js/bootstrap.js",
+    "./dist/css/bootstrap.css",
+    "./dist/fonts/glyphicons-halflings-regular.eot",
+    "./dist/fonts/glyphicons-halflings-regular.svg",
+    "./dist/fonts/glyphicons-halflings-regular.ttf",
+    "./dist/fonts/glyphicons-halflings-regular.woff"
+  ],
   "ignore": [
-      "**/.*"
+    "**/.*",
+    "_*",
+    "docs-assets",
+    "examples",
+    "/fonts",
+    "js/tests",
+    "CNAME",
+    "CONTRIBUTING.md",
+    "composer.json",
+    "*.html"
   ],
   "dependencies": {
     "jquery": ">= 1.9.0"

browserstack.json

-{
-  "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"
-    }
-  ]
-}

components.html

@@ -16,812 +16,818 @@ base_url: "../"
 
     <h2 id="glyphicons-glyphs">Available glyphs</h2>
     <p>Includes 200 glyphs in font format from the Glyphicon Halflings set. <a href="http://glyphicons.com/">Glyphicons</a> Halflings are normally not available for free, but their creator has made them available for Bootstrap free of cost. As a thank you, we only ask that you to include a link back to <a href="http://glyphicons.com/">Glyphicons</a> whenever possible.</p>
-    <ul class="bs-glyphicons">
-      <li>
-        <span class="glyphicon glyphicon-adjust"></span>
-        <span class="glyphicon-class">.glyphicon .glyphicon-adjust</span>
-      </li>
-      <li>
-        <span class="glyphicon glyphicon-align-center"></span>
-        <span class="glyphicon-class">.glyphicon .glyphicon-align-center</span>
-      </li>
-      <li>
-        <span class="glyphicon glyphicon-align-justify"></span>
-        <span class="glyphicon-class">.glyphicon .glyphicon-align-justify</span>
-      </li>
-      <li>
-        <span class="glyphicon glyphicon-align-left"></span>
-        <span class="glyphicon-class">.glyphicon .glyphicon-align-left</span>
-      </li>
-      <li>
-        <span class="glyphicon glyphicon-align-right"></span>
-        <span class="glyphicon-class">.glyphicon .glyphicon-align-right</span>
-      </li>
-      <li>
-        <span class="glyphicon glyphicon-arrow-down"></span>
-        <span class="glyphicon-class">.glyphicon .glyphicon-arrow-down</span>
-      </li>
-      <li>
-        <span class="glyphicon glyphicon-arrow-left"></span>
-        <span class="glyphicon-class">.glyphicon .glyphicon-arrow-left</span>
-      </li>
-      <li>
-        <span class="glyphicon glyphicon-arrow-right"></span>
-        <span class="glyphicon-class">.glyphicon .glyphicon-arrow-right</span>
-      </li>
-      <li>
-        <span class="glyphicon glyphicon-arrow-up"></span>
-        <span class="glyphicon-class">.glyphicon .glyphicon-arrow-up</span>
-      </li>
-      <li>
-        <span class="glyphicon glyphicon-asterisk"></span>
-        <span class="glyphicon-class">.glyphicon .glyphicon-asterisk</span>
-      </li>
-      <li>
-        <span class="glyphicon glyphicon-backward"></span>
-        <span class="glyphicon-class">.glyphicon .glyphicon-backward</span>
-      </li>
-      <li>
-        <span class="glyphicon glyphicon-ban-circle"></span>
-        <span class="glyphicon-class">.glyphicon .glyphicon-ban-circle</span>
-      </li>
-      <li>
-        <span class="glyphicon glyphicon-barcode"></span>
-        <span class="glyphicon-class">.glyphicon .glyphicon-barcode</span>
-      </li>
-      <li>
-        <span class="glyphicon glyphicon-bell"></span>
-        <span class="glyphicon-class">.glyphicon .glyphicon-bell</span>
-      </li>
-      <li>
-        <span class="glyphicon glyphicon-bold"></span>
-        <span class="glyphicon-class">.glyphicon .glyphicon-bold</span>
-      </li>
-      <li>
-        <span class="glyphicon glyphicon-book"></span>
-        <span class="glyphicon-class">.glyphicon .glyphicon-book</span>
-      </li>
-      <li>
-        <span class="glyphicon glyphicon-bookmark"></span>
-        <span class="glyphicon-class">.glyphicon .glyphicon-bookmark</span>
-      </li>
-      <li>
-        <span class="glyphicon glyphicon-briefcase"></span>
-        <span class="glyphicon-class">.glyphicon .glyphicon-briefcase</span>
-      </li>
-      <li>
-        <span class="glyphicon glyphicon-bullhorn"></span>
-        <span class="glyphicon-class">.glyphicon .glyphicon-bullhorn</span>
-      </li>
-      <li>
-        <span class="glyphicon glyphicon-calendar"></span>
-        <span class="glyphicon-class">.glyphicon .glyphicon-calendar</span>
-      </li>
-      <li>
-        <span class="glyphicon glyphicon-camera"></span>
-        <span class="glyphicon-class">.glyphicon .glyphicon-camera</span>
-      </li>
-      <li>
-        <span class="glyphicon glyphicon-certificate"></span>
-        <span class="glyphicon-class">.glyphicon .glyphicon-certificate</span>
-      </li>
-      <li>
-        <span class="glyphicon glyphicon-check"></span>
-        <span class="glyphicon-class">.glyphicon .glyphicon-check</span>
-      </li>
-      <li>
-        <span class="glyphicon glyphicon-chevron-down"></span>
-        <span class="glyphicon-class">.glyphicon .glyphicon-chevron-down</span>
-      </li>
-      <li>
-        <span class="glyphicon glyphicon-chevron-left"></span>
-        <span class="glyphicon-class">.glyphicon .glyphicon-chevron-left</span>
-      </li>
-      <li>
-        <span class="glyphicon glyphicon-chevron-right"></span>
-        <span class="glyphicon-class">.glyphicon .glyphicon-chevron-right</span>
-      </li>
-      <li>
-        <span class="glyphicon glyphicon-chevron-up"></span>
-        <span class="glyphicon-class">.glyphicon .glyphicon-chevron-up</span>
-      </li>
-      <li>
-        <span class="glyphicon glyphicon-circle-arrow-down"></span>
-        <span class="glyphicon-class">.glyphicon .glyphicon-circle-arrow-down</span>
-      </li>
-      <li>
-        <span class="glyphicon glyphicon-circle-arrow-left"></span>
-        <span class="glyphicon-class">.glyphicon .glyphicon-circle-arrow-left</span>
-      </li>
-      <li>
-        <span class="glyphicon glyphicon-circle-arrow-right"></span>
-        <span class="glyphicon-class">.glyphicon .glyphicon-circle-arrow-right</span>
-      </li>
-      <li>
-        <span class="glyphicon glyphicon-circle-arrow-up"></span>
-        <span class="glyphicon-class">.glyphicon .glyphicon-circle-arrow-up</span>
-      </li>
-      <li>
-        <span class="glyphicon glyphicon-cloud"></span>
-        <span class="glyphicon-class">.glyphicon .glyphicon-cloud</span>
-      </li>
-      <li>
-        <span class="glyphicon glyphicon-cloud-download"></span>
-        <span class="glyphicon-class">.glyphicon .glyphicon-cloud-download</span>
-      </li>
-      <li>
-        <span class="glyphicon glyphicon-cloud-upload"></span>
-        <span class="glyphicon-class">.glyphicon .glyphicon-cloud-upload</span>
-      </li>
-      <li>
-        <span class="glyphicon glyphicon-cog"></span>
-        <span class="glyphicon-class">.glyphicon .glyphicon-cog</span>
-      </li>
-      <li>
-        <span class="glyphicon glyphicon-collapse-down"></span>
-        <span class="glyphicon-class">.glyphicon .glyphicon-collapse-down</span>
-      </li>
-      <li>
-        <span class="glyphicon glyphicon-collapse-up"></span>
-        <span class="glyphicon-class">.glyphicon .glyphicon-collapse-up</span>
-      </li>
-      <li>
-        <span class="glyphicon glyphicon-comment"></span>
-        <span class="glyphicon-class">.glyphicon .glyphicon-comment</span>
-      </li>
-      <li>
-        <span class="glyphicon glyphicon-compressed"></span>
-        <span class="glyphicon-class">.glyphicon .glyphicon-compressed</span>
-      </li>
-      <li>
-        <span class="glyphicon glyphicon-copyright-mark"></span>
-        <span class="glyphicon-class">.glyphicon .glyphicon-copyright-mark</span>
-      </li>
-      <li>
-        <span class="glyphicon glyphicon-credit-card"></span>
-        <span class="glyphicon-class">.glyphicon .glyphicon-credit-card</span>
-      </li>
-      <li>
-        <span class="glyphicon glyphicon-cutlery"></span>
-        <span class="glyphicon-class">.glyphicon .glyphicon-cutlery</span>
-      </li>
-      <li>
-        <span class="glyphicon glyphicon-dashboard"></span>
-        <span class="glyphicon-class">.glyphicon .glyphicon-dashboard</span>
-      </li>
-      <li>
-        <span class="glyphicon glyphicon-download"></span>
-        <span class="glyphicon-class">.glyphicon .glyphicon-download</span>
-      </li>
-      <li>
-        <span class="glyphicon glyphicon-download-alt"></span>
-        <span class="glyphicon-class">.glyphicon .glyphicon-download-alt</span>
-      </li>
-      <li>
-        <span class="glyphicon glyphicon-earphone"></span>
-        <span class="glyphicon-class">.glyphicon .glyphicon-earphone</span>
-      </li>
-      <li>
-        <span class="glyphicon glyphicon-edit"></span>
-        <span class="glyphicon-class">.glyphicon .glyphicon-edit</span>
-      </li>
-      <li>
-        <span class="glyphicon glyphicon-eject"></span>
-        <span class="glyphicon-class">.glyphicon .glyphicon-eject</span>
-      </li>
-      <li>
-        <span class="glyphicon glyphicon-envelope"></span>
-        <span class="glyphicon-class">.glyphicon .glyphicon-envelope</span>
-      </li>
-      <li>
-        <span class="glyphicon glyphicon-euro"></span>
-        <span class="glyphicon-class">.glyphicon .glyphicon-euro</span>
-      </li>
-      <li>
-        <span class="glyphicon glyphicon-exclamation-sign"></span>
-        <span class="glyphicon-class">.glyphicon .glyphicon-exclamation-sign</span>
-      </li>
-      <li>
-        <span class="glyphicon glyphicon-expand"></span>
-        <span class="glyphicon-class">.glyphicon .glyphicon-expand</span>
-      </li>
-      <li>
-        <span class="glyphicon glyphicon-export"></span>
-        <span class="glyphicon-class">.glyphicon .glyphicon-export</span>
-      </li>
-      <li>
-        <span class="glyphicon glyphicon-eye-close"></span>
-        <span class="glyphicon-class">.glyphicon .glyphicon-eye-close</span>
-      </li>
-      <li>
-        <span class="glyphicon glyphicon-eye-open"></span>
-        <span class="glyphicon-class">.glyphicon .glyphicon-eye-open</span>
-      </li>
-      <li>
-        <span class="glyphicon glyphicon-facetime-video"></span>
-        <span class="glyphicon-class">.glyphicon .glyphicon-facetime-video</span>
-      </li>
-      <li>
-        <span class="glyphicon glyphicon-fast-backward"></span>
-        <span class="glyphicon-class">.glyphicon .glyphicon-fast-backward</span>
-      </li>
-      <li>
-        <span class="glyphicon glyphicon-fast-forward"></span>
-        <span class="glyphicon-class">.glyphicon .glyphicon-fast-forward</span>
-      </li>
-      <li>
-        <span class="glyphicon glyphicon-file"></span>
-        <span class="glyphicon-class">.glyphicon .glyphicon-file</span>
-      </li>
-      <li>
-        <span class="glyphicon glyphicon-film"></span>
-        <span class="glyphicon-class">.glyphicon .glyphicon-film</span>
-      </li>
-      <li>
-        <span class="glyphicon glyphicon-filter"></span>
-        <span class="glyphicon-class">.glyphicon .glyphicon-filter</span>
-      </li>
-      <li>
-        <span class="glyphicon glyphicon-fire"></span>
-        <span class="glyphicon-class">.glyphicon .glyphicon-fire</span>
-      </li>
-      <li>
-        <span class="glyphicon glyphicon-flag"></span>
-        <span class="glyphicon-class">.glyphicon .glyphicon-flag</span>
-      </li>
-      <li>
-        <span class="glyphicon glyphicon-flash"></span>
-        <span class="glyphicon-class">.glyphicon .glyphicon-flash</span>
-      </li>
-      <li>
-        <span class="glyphicon glyphicon-floppy-disk"></span>
-        <span class="glyphicon-class">.glyphicon .glyphicon-floppy-disk</span>
-      </li>
-      <li>
-        <span class="glyphicon glyphicon-floppy-open"></span>
-        <span class="glyphicon-class">.glyphicon .glyphicon-floppy-open</span>
-      </li>
-      <li>
-        <span class="glyphicon glyphicon-floppy-remove"></span>
-        <span class="glyphicon-class">.glyphicon .glyphicon-floppy-remove</span>
-      </li>
-      <li>
-        <span class="glyphicon glyphicon-floppy-save"></span>
-        <span class="glyphicon-class">.glyphicon .glyphicon-floppy-save</span>
-      </li>
-      <li>
-        <span class="glyphicon glyphicon-floppy-saved"></span>
-        <span class="glyphicon-class">.glyphicon .glyphicon-floppy-saved</span>
-      </li>
-      <li>
-        <span class="glyphicon glyphicon-folder-close"></span>
-        <span class="glyphicon-class">.glyphicon .glyphicon-folder-close</span>
-      </li>
-      <li>
-        <span class="glyphicon glyphicon-folder-open"></span>
-        <span class="glyphicon-class">.glyphicon .glyphicon-folder-open</span>
-      </li>
-      <li>
-        <span class="glyphicon glyphicon-font"></span>
-        <span class="glyphicon-class">.glyphicon .glyphicon-font</span>
-      </li>
-      <li>
-        <span class="glyphicon glyphicon-forward"></span>
-        <span class="glyphicon-class">.glyphicon .glyphicon-forward</span>
-      </li>
-      <li>
-        <span class="glyphicon glyphicon-fullscreen"></span>
-        <span class="glyphicon-class">.glyphicon .glyphicon-fullscreen</span>
-      </li>
-      <li>
-        <span class="glyphicon glyphicon-gbp"></span>
-        <span class="glyphicon-class">.glyphicon .glyphicon-gbp</span>
-      </li>
-      <li>
-        <span class="glyphicon glyphicon-gift"></span>
-        <span class="glyphicon-class">.glyphicon .glyphicon-gift</span>
-      </li>
-      <li>
-        <span class="glyphicon glyphicon-glass"></span>
-        <span class="glyphicon-class">.glyphicon .glyphicon-glass</span>
-      </li>
-      <li>
-        <span class="glyphicon glyphicon-globe"></span>
-        <span class="glyphicon-class">.glyphicon .glyphicon-globe</span>
-      </li>
-      <li>
-        <span class="glyphicon glyphicon-hand-down"></span>
-        <span class="glyphicon-class">.glyphicon .glyphicon-hand-down</span>
-      </li>
-      <li>
-        <span class="glyphicon glyphicon-hand-left"></span>
-        <span class="glyphicon-class">.glyphicon .glyphicon-hand-left</span>
-      </li>
-      <li>
-        <span class="glyphicon glyphicon-hand-right"></span>
-        <span class="glyphicon-class">.glyphicon .glyphicon-hand-right</span>
-      </li>
-      <li>
-        <span class="glyphicon glyphicon-hand-up"></span>
-        <span class="glyphicon-class">.glyphicon .glyphicon-hand-up</span>
-      </li>
-      <li>
-        <span class="glyphicon glyphicon-hd-video"></span>
-        <span class="glyphicon-class">.glyphicon .glyphicon-hd-video</span>
-      </li>
-      <li>
-        <span class="glyphicon glyphicon-hdd"></span>
-        <span class="glyphicon-class">.glyphicon .glyphicon-hdd</span>
-      </li>
-      <li>
-        <span class="glyphicon glyphicon-header"></span>
-        <span class="glyphicon-class">.glyphicon .glyphicon-header</span>
-      </li>
-      <li>
-        <span class="glyphicon glyphicon-headphones"></span>
-        <span class="glyphicon-class">.glyphicon .glyphicon-headphones</span>
-      </li>
-      <li>
-        <span class="glyphicon glyphicon-heart"></span>
-        <span class="glyphicon-class">.glyphicon .glyphicon-heart</span>
-      </li>
-      <li>
-        <span class="glyphicon glyphicon-heart-empty"></span>
-        <span class="glyphicon-class">.glyphicon .glyphicon-heart-empty</span>
-      </li>
-      <li>
-        <span class="glyphicon glyphicon-home"></span>
-        <span class="glyphicon-class">.glyphicon .glyphicon-home</span>
-      </li>
-      <li>
-        <span class="glyphicon glyphicon-import"></span>
-        <span class="glyphicon-class">.glyphicon .glyphicon-import</span>
-      </li>
-      <li>
-        <span class="glyphicon glyphicon-inbox"></span>
-        <span class="glyphicon-class">.glyphicon .glyphicon-inbox</span>
-      </li>
-      <li>
-        <span class="glyphicon glyphicon-indent-left"></span>
-        <span class="glyphicon-class">.glyphicon .glyphicon-indent-left</span>
-      </li>
-      <li>
-        <span class="glyphicon glyphicon-indent-right"></span>
-        <span class="glyphicon-class">.glyphicon .glyphicon-indent-right</span>
-      </li>
-      <li>
-        <span class="glyphicon glyphicon-info-sign"></span>
-        <span class="glyphicon-class">.glyphicon .glyphicon-info-sign</span>
-      </li>
-      <li>
-        <span class="glyphicon glyphicon-italic"></span>
-        <span class="glyphicon-class">.glyphicon .glyphicon-italic</span>
-      </li>
-      <li>
-        <span class="glyphicon glyphicon-leaf"></span>
-        <span class="glyphicon-class">.glyphicon .glyphicon-leaf</span>
-      </li>
-      <li>
-        <span class="glyphicon glyphicon-link"></span>
-        <span class="glyphicon-class">.glyphicon .glyphicon-link</span>
-      </li>
-      <li>
-        <span class="glyphicon glyphicon-list"></span>
-        <span class="glyphicon-class">.glyphicon .glyphicon-list</span>
-      </li>
-      <li>
-        <span class="glyphicon glyphicon-list-alt"></span>
-        <span class="glyphicon-class">.glyphicon .glyphicon-list-alt</span>
-      </li>
-      <li>
-        <span class="glyphicon glyphicon-lock"></span>
-        <span class="glyphicon-class">.glyphicon .glyphicon-lock</span>
-      </li>
-      <li>
-        <span class="glyphicon glyphicon-log-in"></span>
-        <span class="glyphicon-class">.glyphicon .glyphicon-log-in</span>
-      </li>
-      <li>
-        <span class="glyphicon glyphicon-log-out"></span>
-        <span class="glyphicon-class">.glyphicon .glyphicon-log-out</span>
-      </li>
-      <li>
-        <span class="glyphicon glyphicon-magnet"></span>
-        <span class="glyphicon-class">.glyphicon .glyphicon-magnet</span>
-      </li>
-      <li>
-        <span class="glyphicon glyphicon-map-marker"></span>
-        <span class="glyphicon-class">.glyphicon .glyphicon-map-marker</span>
-      </li>
-      <li>
-        <span class="glyphicon glyphicon-minus"></span>
-        <span class="glyphicon-class">.glyphicon .glyphicon-minus</span>
-      </li>
-      <li>
-        <span class="glyphicon glyphicon-minus-sign"></span>
-        <span class="glyphicon-class">.glyphicon .glyphicon-minus-sign</span>
-      </li>
-      <li>
-        <span class="glyphicon glyphicon-move"></span>
-        <span class="glyphicon-class">.glyphicon .glyphicon-move</span>
-      </li>
-      <li>
-        <span class="glyphicon glyphicon-music"></span>
-        <span class="glyphicon-class">.glyphicon .glyphicon-music</span>
-      </li>
-      <li>
-        <span class="glyphicon glyphicon-new-window"></span>
-        <span class="glyphicon-class">.glyphicon .glyphicon-new-window</span>
-      </li>
-      <li>
-        <span class="glyphicon glyphicon-off"></span>
-        <span class="glyphicon-class">.glyphicon .glyphicon-off</span>
-      </li>
-      <li>
-        <span class="glyphicon glyphicon-ok"></span>
-        <span class="glyphicon-class">.glyphicon .glyphicon-ok</span>
-      </li>
-      <li>
-        <span class="glyphicon glyphicon-ok-circle"></span>
-        <span class="glyphicon-class">.glyphicon .glyphicon-ok-circle</span>
-      </li>
-      <li>
-        <span class="glyphicon glyphicon-ok-sign"></span>
-        <span class="glyphicon-class">.glyphicon .glyphicon-ok-sign</span>
-      </li>
-      <li>
-        <span class="glyphicon glyphicon-open"></span>
-        <span class="glyphicon-class">.glyphicon .glyphicon-open</span>
-      </li>
-      <li>
-        <span class="glyphicon glyphicon-paperclip"></span>
-        <span class="glyphicon-class">.glyphicon .glyphicon-paperclip</span>
-      </li>
-      <li>
-        <span class="glyphicon glyphicon-pause"></span>
-        <span class="glyphicon-class">.glyphicon .glyphicon-pause</span>
-      </li>
-      <li>
-        <span class="glyphicon glyphicon-pencil"></span>
-        <span class="glyphicon-class">.glyphicon .glyphicon-pencil</span>
-      </li>
-      <li>
-        <span class="glyphicon glyphicon-phone"></span>
-        <span class="glyphicon-class">.glyphicon .glyphicon-phone</span>
-      </li>
-      <li>
-        <span class="glyphicon glyphicon-phone-alt"></span>
-        <span class="glyphicon-class">.glyphicon .glyphicon-phone-alt</span>
-      </li>
-      <li>
-        <span class="glyphicon glyphicon-picture"></span>
-        <span class="glyphicon-class">.glyphicon .glyphicon-picture</span>
-      </li>
-      <li>
-        <span class="glyphicon glyphicon-plane"></span>
-        <span class="glyphicon-class">.glyphicon .glyphicon-plane</span>
-      </li>
-      <li>
-        <span class="glyphicon glyphicon-play"></span>
-        <span class="glyphicon-class">.glyphicon .glyphicon-play</span>
-      </li>
-      <li>
-        <span class="glyphicon glyphicon-play-circle"></span>
-        <span class="glyphicon-class">.glyphicon .glyphicon-play-circle</span>
-      </li>
-      <li>
-        <span class="glyphicon glyphicon-plus"></span>
-        <span class="glyphicon-class">.glyphicon .glyphicon-plus</span>
-      </li>
-      <li>
-        <span class="glyphicon glyphicon-plus-sign"></span>
-        <span class="glyphicon-class">.glyphicon .glyphicon-plus-sign</span>
-      </li>
-      <li>
-        <span class="glyphicon glyphicon-print"></span>
-        <span class="glyphicon-class">.glyphicon .glyphicon-print</span>
-      </li>
-      <li>
-        <span class="glyphicon glyphicon-pushpin"></span>
-        <span class="glyphicon-class">.glyphicon .glyphicon-pushpin</span>
-      </li>
-      <li>
-        <span class="glyphicon glyphicon-qrcode"></span>
-        <span class="glyphicon-class">.glyphicon .glyphicon-qrcode</span>
-      </li>
-      <li>
-        <span class="glyphicon glyphicon-question-sign"></span>
-        <span class="glyphicon-class">.glyphicon .glyphicon-question-sign</span>
-      </li>
-      <li>
-        <span class="glyphicon glyphicon-random"></span>
-        <span class="glyphicon-class">.glyphicon .glyphicon-random</span>
-      </li>
-      <li>
-        <span class="glyphicon glyphicon-record"></span>
-        <span class="glyphicon-class">.glyphicon .glyphicon-record</span>
-      </li>
-      <li>
-        <span class="glyphicon glyphicon-refresh"></span>
-        <span class="glyphicon-class">.glyphicon .glyphicon-refresh</span>
-      </li>
-      <li>
-        <span class="glyphicon glyphicon-registration-mark"></span>
-        <span class="glyphicon-class">.glyphicon .glyphicon-registration-mark</span>
-      </li>
-      <li>
-        <span class="glyphicon glyphicon-remove"></span>
-        <span class="glyphicon-class">.glyphicon .glyphicon-remove</span>
-      </li>
-      <li>
-        <span class="glyphicon glyphicon-remove-circle"></span>
-        <span class="glyphicon-class">.glyphicon .glyphicon-remove-circle</span>
-      </li>
-      <li>
-        <span class="glyphicon glyphicon-remove-sign"></span>
-        <span class="glyphicon-class">.glyphicon .glyphicon-remove-sign</span>
-      </li>
-      <li>
-        <span class="glyphicon glyphicon-repeat"></span>
-        <span class="glyphicon-class">.glyphicon .glyphicon-repeat</span>
-      </li>
-      <li>
-        <span class="glyphicon glyphicon-resize-full"></span>
-        <span class="glyphicon-class">.glyphicon .glyphicon-resize-full</span>
-      </li>
-      <li>
-        <span class="glyphicon glyphicon-resize-horizontal"></span>
-        <span class="glyphicon-class">.glyphicon .glyphicon-resize-horizontal</span>
-      </li>
-      <li>
-        <span class="glyphicon glyphicon-resize-small"></span>
-        <span class="glyphicon-class">.glyphicon .glyphicon-resize-small</span>
-      </li>
-      <li>
-        <span class="glyphicon glyphicon-resize-vertical"></span>
-        <span class="glyphicon-class">.glyphicon .glyphicon-resize-vertical</span>
-      </li>
-      <li>
-        <span class="glyphicon glyphicon-retweet"></span>
-        <span class="glyphicon-class">.glyphicon .glyphicon-retweet</span>
-      </li>
-      <li>
-        <span class="glyphicon glyphicon-road"></span>
-        <span class="glyphicon-class">.glyphicon .glyphicon-road</span>
-      </li>
-      <li>
-        <span class="glyphicon glyphicon-save"></span>
-        <span class="glyphicon-class">.glyphicon .glyphicon-save</span>
-      </li>
-      <li>
-        <span class="glyphicon glyphicon-saved"></span>
-        <span class="glyphicon-class">.glyphicon .glyphicon-saved</span>
-      </li>
-      <li>
-        <span class="glyphicon glyphicon-screenshot"></span>
-        <span class="glyphicon-class">.glyphicon .glyphicon-screenshot</span>
-      </li>
-      <li>
-        <span class="glyphicon glyphicon-sd-video"></span>
-        <span class="glyphicon-class">.glyphicon .glyphicon-sd-video</span>
-      </li>
-      <li>
-        <span class="glyphicon glyphicon-search"></span>
-        <span class="glyphicon-class">.glyphicon .glyphicon-search</span>
-      </li>
-      <li>
-        <span class="glyphicon glyphicon-send"></span>
-        <span class="glyphicon-class">.glyphicon .glyphicon-send</span>
-      </li>
-      <li>
-        <span class="glyphicon glyphicon-share"></span>
-        <span class="glyphicon-class">.glyphicon .glyphicon-share</span>
-      </li>
-      <li>
-        <span class="glyphicon glyphicon-share-alt"></span>
-        <span class="glyphicon-class">.glyphicon .glyphicon-share-alt</span>
-      </li>
-      <li>
-        <span class="glyphicon glyphicon-shopping-cart"></span>
-        <span class="glyphicon-class">.glyphicon .glyphicon-shopping-cart</span>
-      </li>
-      <li>
-        <span class="glyphicon glyphicon-signal"></span>
-        <span class="glyphicon-class">.glyphicon .glyphicon-signal</span>
-      </li>
-      <li>
-        <span class="glyphicon glyphicon-sort"></span>
-        <span class="glyphicon-class">.glyphicon .glyphicon-sort</span>
-      </li>
-      <li>
-        <span class="glyphicon glyphicon-sort-by-alphabet"></span>
-        <span class="glyphicon-class">.glyphicon .glyphicon-sort-by-alphabet</span>
-      </li>
-      <li>
-        <span class="glyphicon glyphicon-sort-by-alphabet-alt"></span>
-        <span class="glyphicon-class">.glyphicon .glyphicon-sort-by-alphabet-alt</span>
-      </li>
-      <li>
-        <span class="glyphicon glyphicon-sort-by-attributes"></span>
-        <span class="glyphicon-class">.glyphicon .glyphicon-sort-by-attributes</span>
-      </li>
-      <li>
-        <span class="glyphicon glyphicon-sort-by-attributes-alt"></span>
-        <span class="glyphicon-class">.glyphicon .glyphicon-sort-by-attributes-alt</span>
-      </li>
-      <li>
-        <span class="glyphicon glyphicon-sort-by-order"></span>
-        <span class="glyphicon-class">.glyphicon .glyphicon-sort-by-order</span>
-      </li>
-      <li>
-        <span class="glyphicon glyphicon-sort-by-order-alt"></span>
-        <span class="glyphicon-class">.glyphicon .glyphicon-sort-by-order-alt</span>
-      </li>
-      <li>
-        <span class="glyphicon glyphicon-sound-5-1"></span>
-        <span class="glyphicon-class">.glyphicon .glyphicon-sound-5-1</span>
-      </li>
-      <li>
-        <span class="glyphicon glyphicon-sound-6-1"></span>
-        <span class="glyphicon-class">.glyphicon .glyphicon-sound-6-1</span>
-      </li>
-      <li>
-        <span class="glyphicon glyphicon-sound-7-1"></span>
-        <span class="glyphicon-class">.glyphicon .glyphicon-sound-7-1</span>
-      </li>
-      <li>
-        <span class="glyphicon glyphicon-sound-dolby"></span>
-        <span class="glyphicon-class">.glyphicon .glyphicon-sound-dolby</span>
-      </li>
-      <li>
-        <span class="glyphicon glyphicon-sound-stereo"></span>
-        <span class="glyphicon-class">.glyphicon .glyphicon-sound-stereo</span>
-      </li>
-      <li>
-        <span class="glyphicon glyphicon-star"></span>
-        <span class="glyphicon-class">.glyphicon .glyphicon-star</span>
-      </li>
-      <li>
-        <span class="glyphicon glyphicon-star-empty"></span>
-        <span class="glyphicon-class">.glyphicon .glyphicon-star-empty</span>
-      </li>
-      <li>
-        <span class="glyphicon glyphicon-stats"></span>
-        <span class="glyphicon-class">.glyphicon .glyphicon-stats</span>
-      </li>
-      <li>
-        <span class="glyphicon glyphicon-step-backward"></span>
-        <span class="glyphicon-class">.glyphicon .glyphicon-step-backward</span>
-      </li>
-      <li>
-        <span class="glyphicon glyphicon-step-forward"></span>
-        <span class="glyphicon-class">.glyphicon .glyphicon-step-forward</span>
-      </li>
-      <li>
-        <span class="glyphicon glyphicon-stop"></span>
-        <span class="glyphicon-class">.glyphicon .glyphicon-stop</span>
-      </li>
-      <li>
-        <span class="glyphicon glyphicon-subtitles"></span>
-        <span class="glyphicon-class">.glyphicon .glyphicon-subtitles</span>
-      </li>
-      <li>
-        <span class="glyphicon glyphicon-tag"></span>
-        <span class="glyphicon-class">.glyphicon .glyphicon-tag</span>
-      </li>
-      <li>
-        <span class="glyphicon glyphicon-tags"></span>
-        <span class="glyphicon-class">.glyphicon .glyphicon-tags</span>
-      </li>
-      <li>
-        <span class="glyphicon glyphicon-tasks"></span>
-        <span class="glyphicon-class">.glyphicon .glyphicon-tasks</span>
-      </li>
-      <li>
-        <span class="glyphicon glyphicon-text-height"></span>
-        <span class="glyphicon-class">.glyphicon .glyphicon-text-height</span>
-      </li>
-      <li>
-        <span class="glyphicon glyphicon-text-width"></span>
-        <span class="glyphicon-class">.glyphicon .glyphicon-text-width</span>
-      </li>
-      <li>
-        <span class="glyphicon glyphicon-th"></span>
-        <span class="glyphicon-class">.glyphicon .glyphicon-th</span>
-      </li>
-      <li>
-        <span class="glyphicon glyphicon-th-large"></span>
-        <span class="glyphicon-class">.glyphicon .glyphicon-th-large</span>
-      </li>
-      <li>
-        <span class="glyphicon glyphicon-th-list"></span>
-        <span class="glyphicon-class">.glyphicon .glyphicon-th-list</span>
-      </li>
-      <li>
-        <span class="glyphicon glyphicon-thumbs-down"></span>
-        <span class="glyphicon-class">.glyphicon .glyphicon-thumbs-down</span>
-      </li>
-      <li>
-        <span class="glyphicon glyphicon-thumbs-up"></span>
-        <span class="glyphicon-class">.glyphicon .glyphicon-thumbs-up</span>
-      </li>
-      <li>
-        <span class="glyphicon glyphicon-time"></span>
-        <span class="glyphicon-class">.glyphicon .glyphicon-time</span>
-      </li>
-      <li>
-        <span class="glyphicon glyphicon-tint"></span>
-        <span class="glyphicon-class">.glyphicon .glyphicon-tint</span>
-      </li>
-      <li>
-        <span class="glyphicon glyphicon-tower"></span>
-        <span class="glyphicon-class">.glyphicon .glyphicon-tower</span>
-      </li>
-      <li>
-        <span class="glyphicon glyphicon-transfer"></span>
-        <span class="glyphicon-class">.glyphicon .glyphicon-transfer</span>
-      </li>
-      <li>
-        <span class="glyphicon glyphicon-trash"></span>
-        <span class="glyphicon-class">.glyphicon .glyphicon-trash</span>
-      </li>
-      <li>
-        <span class="glyphicon glyphicon-tree-conifer"></span>
-        <span class="glyphicon-class">.glyphicon .glyphicon-tree-conifer</span>
-      </li>
-      <li>
-        <span class="glyphicon glyphicon-tree-deciduous"></span>
-        <span class="glyphicon-class">.glyphicon .glyphicon-tree-deciduous</span>
-      </li>
-      <li>
-        <span class="glyphicon glyphicon-unchecked"></span>
-        <span class="glyphicon-class">.glyphicon .glyphicon-unchecked</span>
-      </li>
-      <li>
-        <span class="glyphicon glyphicon-upload"></span>
-        <span class="glyphicon-class">.glyphicon .glyphicon-upload</span>
-      </li>
-      <li>
-        <span class="glyphicon glyphicon-usd"></span>
-        <span class="glyphicon-class">.glyphicon .glyphicon-usd</span>
-      </li>
-      <li>
-        <span class="glyphicon glyphicon-user"></span>
-        <span class="glyphicon-class">.glyphicon .glyphicon-user</span>
-      </li>
-      <li>
-        <span class="glyphicon glyphicon-volume-down"></span>
-        <span class="glyphicon-class">.glyphicon .glyphicon-volume-down</span>
-      </li>
-      <li>
-        <span class="glyphicon glyphicon-volume-off"></span>
-        <span class="glyphicon-class">.glyphicon .glyphicon-volume-off</span>
-      </li>
-      <li>
-        <span class="glyphicon glyphicon-volume-up"></span>
-        <span class="glyphicon-class">.glyphicon .glyphicon-volume-up</span>
-      </li>
-      <li>
-        <span class="glyphicon glyphicon-warning-sign"></span>
-        <span class="glyphicon-class">.glyphicon .glyphicon-warning-sign</span>
-      </li>
-      <li>
-        <span class="glyphicon glyphicon-wrench"></span>
-        <span class="glyphicon-class">.glyphicon .glyphicon-wrench</span>
-      </li>
-      <li>
-        <span class="glyphicon glyphicon-zoom-in"></span>
-        <span class="glyphicon-class">.glyphicon .glyphicon-zoom-in</span>
-      </li>
-      <li>
-        <span class="glyphicon glyphicon-zoom-out"></span>
-        <span class="glyphicon-class">.glyphicon .glyphicon-zoom-out</span>
-      </li>
-    </ul>
+    <div class="bs-glyphicons">
+      <ul class="bs-glyphicons-list">
+        <li>
+          <span class="glyphicon glyphicon-adjust"></span>
+          <span class="glyphicon-class">glyphicon glyphicon-adjust</span>
+        </li>
+        <li>
+          <span class="glyphicon glyphicon-align-center"></span>
+          <span class="glyphicon-class">glyphicon glyphicon-align-center</span>
+        </li>
+        <li>
+          <span class="glyphicon glyphicon-align-justify"></span>
+          <span class="glyphicon-class">glyphicon glyphicon-align-justify</span>
+        </li>
+        <li>
+          <span class="glyphicon glyphicon-align-left"></span>
+          <span class="glyphicon-class">glyphicon glyphicon-align-left</span>
+        </li>
+        <li>
+          <span class="glyphicon glyphicon-align-right"></span>
+          <span class="glyphicon-class">glyphicon glyphicon-align-right</span>
+        </li>
+        <li>
+          <span class="glyphicon glyphicon-arrow-down"></span>
+          <span class="glyphicon-class">glyphicon glyphicon-arrow-down</span>
+        </li>
+        <li>
+          <span class="glyphicon glyphicon-arrow-left"></span>
+          <span class="glyphicon-class">glyphicon glyphicon-arrow-left</span>
+        </li>
+        <li>
+          <span class="glyphicon glyphicon-arrow-right"></span>
+          <span class="glyphicon-class">glyphicon glyphicon-arrow-right</span>
+        </li>
+        <li>
+          <span class="glyphicon glyphicon-arrow-up"></span>
+          <span class="glyphicon-class">glyphicon glyphicon-arrow-up</span>
+        </li>
+        <li>
+          <span class="glyphicon glyphicon-asterisk"></span>
+          <span class="glyphicon-class">glyphicon glyphicon-asterisk</span>
+        </li>
+        <li>
+          <span class="glyphicon glyphicon-backward"></span>
+          <span class="glyphicon-class">glyphicon glyphicon-backward</span>
+        </li>
+        <li>
+          <span class="glyphicon glyphicon-ban-circle"></span>
+          <span class="glyphicon-class">glyphicon glyphicon-ban-circle</span>
+        </li>
+        <li>
+          <span class="glyphicon glyphicon-barcode"></span>
+          <span class="glyphicon-class">glyphicon glyphicon-barcode</span>
+        </li>
+        <li>
+          <span class="glyphicon glyphicon-bell"></span>
+          <span class="glyphicon-class">glyphicon glyphicon-bell</span>
+        </li>
+        <li>
+          <span class="glyphicon glyphicon-bold"></span>
+          <span class="glyphicon-class">glyphicon glyphicon-bold</span>
+        </li>
+        <li>
+          <span class="glyphicon glyphicon-book"></span>
+          <span class="glyphicon-class">glyphicon glyphicon-book</span>
+        </li>
+        <li>
+          <span class="glyphicon glyphicon-bookmark"></span>
+          <span class="glyphicon-class">glyphicon glyphicon-bookmark</span>
+        </li>
+        <li>
+          <span class="glyphicon glyphicon-briefcase"></span>
+          <span class="glyphicon-class">glyphicon glyphicon-briefcase</span>
+        </li>
+        <li>
+          <span class="glyphicon glyphicon-bullhorn"></span>
+          <span class="glyphicon-class">glyphicon glyphicon-bullhorn</span>
+        </li>
+        <li>
+          <span class="glyphicon glyphicon-calendar"></span>
+          <span class="glyphicon-class">glyphicon glyphicon-calendar</span>
+        </li>
+        <li>
+          <span class="glyphicon glyphicon-camera"></span>
+          <span class="glyphicon-class">glyphicon glyphicon-camera</span>
+        </li>
+        <li>
+          <span class="glyphicon glyphicon-certificate"></span>
+          <span class="glyphicon-class">glyphicon glyphicon-certificate</span>
+        </li>
+        <li>
+          <span class="glyphicon glyphicon-check"></span>
+          <span class="glyphicon-class">glyphicon glyphicon-check</span>
+        </li>
+        <li>
+          <span class="glyphicon glyphicon-chevron-down"></span>
+          <span class="glyphicon-class">glyphicon glyphicon-chevron-down</span>
+        </li>
+        <li>
+          <span class="glyphicon glyphicon-chevron-left"></span>
+          <span class="glyphicon-class">glyphicon glyphicon-chevron-left</span>
+        </li>
+        <li>
+          <span class="glyphicon glyphicon-chevron-right"></span>
+          <span class="glyphicon-class">glyphicon glyphicon-chevron-right</span>
+        </li>
+        <li>
+          <span class="glyphicon glyphicon-chevron-up"></span>
+          <span class="glyphicon-class">glyphicon glyphicon-chevron-up</span>
+        </li>
+        <li>
+          <span class="glyphicon glyphicon-circle-arrow-down"></span>
+          <span class="glyphicon-class">glyphicon glyphicon-circle-arrow-down</span>
+        </li>
+        <li>
+          <span class="glyphicon glyphicon-circle-arrow-left"></span>
+          <span class="glyphicon-class">glyphicon glyphicon-circle-arrow-left</span>
+        </li>
+        <li>
+          <span class="glyphicon glyphicon-circle-arrow-right"></span>
+          <span class="glyphicon-class">glyphicon glyphicon-circle-arrow-right</span>
+        </li>
+        <li>
+          <span class="glyphicon glyphicon-circle-arrow-up"></span>
+          <span class="glyphicon-class">glyphicon glyphicon-circle-arrow-up</span>
+        </li>
+        <li>
+          <span class="glyphicon glyphicon-cloud"></span>
+          <span class="glyphicon-class">glyphicon glyphicon-cloud</span>
+        </li>
+        <li>
+          <span class="glyphicon glyphicon-cloud-download"></span>
+          <span class="glyphicon-class">glyphicon glyphicon-cloud-download</span>
+        </li>
+        <li>
+          <span class="glyphicon glyphicon-cloud-upload"></span>
+          <span class="glyphicon-class">glyphicon glyphicon-cloud-upload</span>
+        </li>
+        <li>
+          <span class="glyphicon glyphicon-cog"></span>
+          <span class="glyphicon-class">glyphicon glyphicon-cog</span>
+        </li>
+        <li>
+          <span class="glyphicon glyphicon-collapse-down"></span>
+          <span class="glyphicon-class">glyphicon glyphicon-collapse-down</span>
+        </li>
+        <li>
+          <span class="glyphicon glyphicon-collapse-up"></span>
+          <span class="glyphicon-class">glyphicon glyphicon-collapse-up</span>
+        </li>
+        <li>
+          <span class="glyphicon glyphicon-comment"></span>
+          <span class="glyphicon-class">glyphicon glyphicon-comment</span>
+        </li>
+        <li>
+          <span class="glyphicon glyphicon-compressed"></span>
+          <span class="glyphicon-class">glyphicon glyphicon-compressed</span>
+        </li>
+        <li>
+          <span class="glyphicon glyphicon-copyright-mark"></span>
+          <span class="glyphicon-class">glyphicon glyphicon-copyright-mark</span>
+        </li>
+        <li>
+          <span class="glyphicon glyphicon-credit-card"></span>
+          <span class="glyphicon-class">glyphicon glyphicon-credit-card</span>
+        </li>
+        <li>
+          <span class="glyphicon glyphicon-cutlery"></span>
+          <span class="glyphicon-class">glyphicon glyphicon-cutlery</span>
+        </li>
+        <li>
+          <span class="glyphicon glyphicon-dashboard"></span>
+          <span class="glyphicon-class">glyphicon glyphicon-dashboard</span>
+        </li>
+        <li>
+          <span class="glyphicon glyphicon-download"></span>
+          <span class="glyphicon-class">glyphicon glyphicon-download</span>
+        </li>
+        <li>
+          <span class="glyphicon glyphicon-download-alt"></span>
+          <span class="glyphicon-class">glyphicon glyphicon-download-alt</span>
+        </li>
+        <li>
+          <span class="glyphicon glyphicon-earphone"></span>
+          <span class="glyphicon-class">glyphicon glyphicon-earphone</span>
+        </li>
+        <li>
+          <span class="glyphicon glyphicon-edit"></span>
+          <span class="glyphicon-class">glyphicon glyphicon-edit</span>
+        </li>
+        <li>
+          <span class="glyphicon glyphicon-eject"></span>
+          <span class="glyphicon-class">glyphicon glyphicon-eject</span>
+        </li>
+        <li>
+          <span class="glyphicon glyphicon-envelope"></span>
+          <span class="glyphicon-class">glyphicon glyphicon-envelope</span>
+        </li>
+        <li>
+          <span class="glyphicon glyphicon-euro"></span>
+          <span class="glyphicon-class">glyphicon glyphicon-euro</span>
+        </li>
+        <li>
+          <span class="glyphicon glyphicon-exclamation-sign"></span>
+          <span class="glyphicon-class">glyphicon glyphicon-exclamation-sign</span>
+        </li>
+        <li>
+          <span class="glyphicon glyphicon-expand"></span>
+          <span class="glyphicon-class">glyphicon glyphicon-expand</span>
+        </li>
+        <li>
+          <span class="glyphicon glyphicon-export"></span>
+          <span class="glyphicon-class">glyphicon glyphicon-export</span>
+        </li>
+        <li>
+          <span class="glyphicon glyphicon-eye-close"></span>
+          <span class="glyphicon-class">glyphicon glyphicon-eye-close</span>
+        </li>
+        <li>
+          <span class="glyphicon glyphicon-eye-open"></span>
+          <span class="glyphicon-class">glyphicon glyphicon-eye-open</span>
+        </li>
+        <li>
+          <span class="glyphicon glyphicon-facetime-video"></span>
+          <span class="glyphicon-class">glyphicon glyphicon-facetime-video</span>
+        </li>
+        <li>
+          <span class="glyphicon glyphicon-fast-backward"></span>
+          <span class="glyphicon-class">glyphicon glyphicon-fast-backward</span>
+        </li>
+        <li>
+          <span class="glyphicon glyphicon-fast-forward"></span>
+          <span class="glyphicon-class">glyphicon glyphicon-fast-forward</span>
+        </li>
+        <li>
+          <span class="glyphicon glyphicon-file"></span>
+          <span class="glyphicon-class">glyphicon glyphicon-file</span>
+        </li>
+        <li>
+          <span class="glyphicon glyphicon-film"></span>
+          <span class="glyphicon-class">glyphicon glyphicon-film</span>
+        </li>
+        <li>
+          <span class="glyphicon glyphicon-filter"></span>
+          <span class="glyphicon-class">glyphicon glyphicon-filter</span>
+        </li>
+        <li>
+          <span class="glyphicon glyphicon-fire"></span>
+          <span class="glyphicon-class">glyphicon glyphicon-fire</span>
+        </li>
+        <li>
+          <span class="glyphicon glyphicon-flag"></span>
+          <span class="glyphicon-class">glyphicon glyphicon-flag</span>
+        </li>
+        <li>
+          <span class="glyphicon glyphicon-flash"></span>
+          <span class="glyphicon-class">glyphicon glyphicon-flash</span>
+        </li>
+        <li>
+          <span class="glyphicon glyphicon-floppy-disk"></span>
+          <span class="glyphicon-class">glyphicon glyphicon-floppy-disk</span>
+        </li>
+        <li>
+          <span class="glyphicon glyphicon-floppy-open"></span>
+          <span class="glyphicon-class">glyphicon glyphicon-floppy-open</span>
+        </li>
+        <li>
+          <span class="glyphicon glyphicon-floppy-remove"></span>
+          <span class="glyphicon-class">glyphicon glyphicon-floppy-remove</span>
+        </li>
+        <li>
+          <span class="glyphicon glyphicon-floppy-save"></span>
+          <span class="glyphicon-class">glyphicon glyphicon-floppy-save</span>
+        </li>
+        <li>
+          <span class="glyphicon glyphicon-floppy-saved"></span>
+          <span class="glyphicon-class">glyphicon glyphicon-floppy-saved</span>
+        </li>
+        <li>
+          <span class="glyphicon glyphicon-folder-close"></span>
+          <span class="glyphicon-class">glyphicon glyphicon-folder-close</span>
+        </li>
+        <li>
+          <span class="glyphicon glyphicon-folder-open"></span>
+          <span class="glyphicon-class">glyphicon glyphicon-folder-open</span>
+        </li>
+        <li>
+          <span class="glyphicon glyphicon-font"></span>
+          <span class="glyphicon-class">glyphicon glyphicon-font</span>
+        </li>
+        <li>
+          <span class="glyphicon glyphicon-forward"></span>
+          <span class="glyphicon-class">glyphicon glyphicon-forward</span>
+        </li>
+        <li>
+          <span class="glyphicon glyphicon-fullscreen"></span>
+          <span class="glyphicon-class">glyphicon glyphicon-fullscreen</span>
+        </li>
+        <li>
+          <span class="glyphicon glyphicon-gbp"></span>
+          <span class="glyphicon-class">glyphicon glyphicon-gbp</span>
+        </li>
+        <li>
+          <span class="glyphicon glyphicon-gift"></span>
+          <span class="glyphicon-class">glyphicon glyphicon-gift</span>
+        </li>
+        <li>
+          <span class="glyphicon glyphicon-glass"></span>
+          <span class="glyphicon-class">glyphicon glyphicon-glass</span>
+        </li>
+        <li>
+          <span class="glyphicon glyphicon-globe"></span>
+          <span class="glyphicon-class">glyphicon glyphicon-globe</span>
+        </li>
+        <li>
+          <span class="glyphicon glyphicon-hand-down"></span>
+          <span class="glyphicon-class">glyphicon glyphicon-hand-down</span>
+        </li>
+        <li>
+          <span class="glyphicon glyphicon-hand-left"></span>
+          <span class="glyphicon-class">glyphicon glyphicon-hand-left</span>
+        </li>
+        <li>
+          <span class="glyphicon glyphicon-hand-right"></span>
+          <span class="glyphicon-class">glyphicon glyphicon-hand-right</span>
+        </li>
+        <li>
+          <span class="glyphicon glyphicon-hand-up"></span>
+          <span class="glyphicon-class">glyphicon glyphicon-hand-up</span>
+        </li>
+        <li>
+          <span class="glyphicon glyphicon-hd-video"></span>
+          <span class="glyphicon-class">glyphicon glyphicon-hd-video</span>
+        </li>
+        <li>
+          <span class="glyphicon glyphicon-hdd"></span>
+          <span class="glyphicon-class">glyphicon glyphicon-hdd</span>
+        </li>
+        <li>
+          <span class="glyphicon glyphicon-header"></span>
+          <span class="glyphicon-class">glyphicon glyphicon-header</span>
+        </li>
+        <li>
+          <span class="glyphicon glyphicon-headphones"></span>
+          <span class="glyphicon-class">glyphicon glyphicon-headphones</span>
+        </li>
+        <li>
+          <span class="glyphicon glyphicon-heart"></span>
+          <span class="glyphicon-class">glyphicon glyphicon-heart</span>
+        </li>
+        <li>
+          <span class="glyphicon glyphicon-heart-empty"></span>
+          <span class="glyphicon-class">glyphicon glyphicon-heart-empty</span>
+        </li>
+        <li>
+          <span class="glyphicon glyphicon-home"></span>
+          <span class="glyphicon-class">glyphicon glyphicon-home</span>
+        </li>
+        <li>
+          <span class="glyphicon glyphicon-import"></span>
+          <span class="glyphicon-class">glyphicon glyphicon-import</span>
+        </li>
+        <li>
+          <span class="glyphicon glyphicon-inbox"></span>
+          <span class="glyphicon-class">glyphicon glyphicon-inbox</span>
+        </li>
+        <li>
+          <span class="glyphicon glyphicon-indent-left"></span>
+          <span class="glyphicon-class">glyphicon glyphicon-indent-left</span>
+        </li>
+        <li>
+          <span class="glyphicon glyphicon-indent-right"></span>
+          <span class="glyphicon-class">glyphicon glyphicon-indent-right</span>
+        </li>
+        <li>
+          <span class="glyphicon glyphicon-info-sign"></span>
+          <span class="glyphicon-class">glyphicon glyphicon-info-sign</span>
+        </li>
+        <li>
+          <span class="glyphicon glyphicon-italic"></span>
+          <span class="glyphicon-class">glyphicon glyphicon-italic</span>
+        </li>
+        <li>
+          <span class="glyphicon glyphicon-leaf"></span>
+          <span class="glyphicon-class">glyphicon glyphicon-leaf</span>
+        </li>
+        <li>
+          <span class="glyphicon glyphicon-link"></span>
+          <span class="glyphicon-class">glyphicon glyphicon-link</span>
+        </li>
+        <li>
+          <span class="glyphicon glyphicon-list"></span>
+          <span class="glyphicon-class">glyphicon glyphicon-list</span>
+        </li>
+        <li>
+          <span class="glyphicon glyphicon-list-alt"></span>
+          <span class="glyphicon-class">glyphicon glyphicon-list-alt</span>
+        </li>
+        <li>
+          <span class="glyphicon glyphicon-lock"></span>
+          <span class="glyphicon-class">glyphicon glyphicon-lock</span>
+        </li>
+        <li>
+          <span class="glyphicon glyphicon-log-in"></span>
+          <span class="glyphicon-class">glyphicon glyphicon-log-in</span>
+        </li>
+        <li>
+          <span class="glyphicon glyphicon-log-out"></span>
+          <span class="glyphicon-class">glyphicon glyphicon-log-out</span>
+        </li>
+        <li>
+          <span class="glyphicon glyphicon-magnet"></span>
+          <span class="glyphicon-class">glyphicon glyphicon-magnet</span>
+        </li>
+        <li>
+          <span class="glyphicon glyphicon-map-marker"></span>
+          <span class="glyphicon-class">glyphicon glyphicon-map-marker</span>
+        </li>
+        <li>
+          <span class="glyphicon glyphicon-minus"></span>
+          <span class="glyphicon-class">glyphicon glyphicon-minus</span>
+        </li>
+        <li>
+          <span class="glyphicon glyphicon-minus-sign"></span>
+          <span class="glyphicon-class">glyphicon glyphicon-minus-sign</span>
+        </li>
+        <li>
+          <span class="glyphicon glyphicon-move"></span>
+          <span class="glyphicon-class">glyphicon glyphicon-move</span>
+        </li>
+        <li>
+          <span class="glyphicon glyphicon-music"></span>
+          <span class="glyphicon-class">glyphicon glyphicon-music</span>
+        </li>
+        <li>
+          <span class="glyphicon glyphicon-new-window"></span>
+          <span class="glyphicon-class">glyphicon glyphicon-new-window</span>
+        </li>
+        <li>
+          <span class="glyphicon glyphicon-off"></span>
+          <span class="glyphicon-class">glyphicon glyphicon-off</span>
+        </li>
+        <li>
+          <span class="glyphicon glyphicon-ok"></span>
+          <span class="glyphicon-class">glyphicon glyphicon-ok</span>
+        </li>
+        <li>
+          <span class="glyphicon glyphicon-ok-circle"></span>
+          <span class="glyphicon-class">glyphicon glyphicon-ok-circle</span>
+        </li>
+        <li>
+          <span class="glyphicon glyphicon-ok-sign"></span>
+          <span class="glyphicon-class">glyphicon glyphicon-ok-sign</span>
+        </li>
+        <li>
+          <span class="glyphicon glyphicon-open"></span>
+          <span class="glyphicon-class">glyphicon glyphicon-open</span>
+        </li>
+        <li>
+          <span class="glyphicon glyphicon-paperclip"></span>
+          <span class="glyphicon-class">glyphicon glyphicon-paperclip</span>
+        </li>
+        <li>
+          <span class="glyphicon glyphicon-pause"></span>
+          <span class="glyphicon-class">glyphicon glyphicon-pause</span>
+        </li>
+        <li>
+          <span class="glyphicon glyphicon-pencil"></span>
+          <span class="glyphicon-class">glyphicon glyphicon-pencil</span>
+        </li>
+        <li>
+          <span class="glyphicon glyphicon-phone"></span>
+          <span class="glyphicon-class">glyphicon glyphicon-phone</span>
+        </li>
+        <li>
+          <span class="glyphicon glyphicon-phone-alt"></span>
+          <span class="glyphicon-class">glyphicon glyphicon-phone-alt</span>
+        </li>
+        <li>
+          <span class="glyphicon glyphicon-picture"></span>
+          <span class="glyphicon-class">glyphicon glyphicon-picture</span>
+        </li>
+        <li>
+          <span class="glyphicon glyphicon-plane"></span>
+          <span class="glyphicon-class">glyphicon glyphicon-plane</span>
+        </li>
+        <li>
+          <span class="glyphicon glyphicon-play"></span>
+          <span class="glyphicon-class">glyphicon glyphicon-play</span>
+        </li>
+        <li>
+          <span class="glyphicon glyphicon-play-circle"></span>
+          <span class="glyphicon-class">glyphicon glyphicon-play-circle</span>
+        </li>
+        <li>
+          <span class="glyphicon glyphicon-plus"></span>
+          <span class="glyphicon-class">glyphicon glyphicon-plus</span>
+        </li>
+        <li>
+          <span class="glyphicon glyphicon-plus-sign"></span>
+          <span class="glyphicon-class">glyphicon glyphicon-plus-sign</span>
+        </li>
+        <li>
+          <span class="glyphicon glyphicon-print"></span>
+          <span class="glyphicon-class">glyphicon glyphicon-print</span>
+        </li>
+        <li>
+          <span class="glyphicon glyphicon-pushpin"></span>
+          <span class="glyphicon-class">glyphicon glyphicon-pushpin</span>
+        </li>
+        <li>
+          <span class="glyphicon glyphicon-qrcode"></span>
+          <span class="glyphicon-class">glyphicon glyphicon-qrcode</span>
+        </li>
+        <li>
+          <span class="glyphicon glyphicon-question-sign"></span>
+          <span class="glyphicon-class">glyphicon glyphicon-question-sign</span>
+        </li>
+        <li>
+          <span class="glyphicon glyphicon-random"></span>
+          <span class="glyphicon-class">glyphicon glyphicon-random</span>
+        </li>
+        <li>
+          <span class="glyphicon glyphicon-record"></span>
+          <span class="glyphicon-class">glyphicon glyphicon-record</span>
+        </li>
+        <li>
+          <span class="glyphicon glyphicon-refresh"></span>
+          <span class="glyphicon-class">glyphicon glyphicon-refresh</span>
+        </li>
+        <li>
+          <span class="glyphicon glyphicon-registration-mark"></span>
+          <span class="glyphicon-class">glyphicon glyphicon-registration-mark</span>
+        </li>
+        <li>
+          <span class="glyphicon glyphicon-remove"></span>
+          <span class="glyphicon-class">glyphicon glyphicon-remove</span>
+        </li>
+        <li>
+          <span class="glyphicon glyphicon-remove-circle"></span>
+          <span class="glyphicon-class">glyphicon glyphicon-remove-circle</span>
+        </li>
+        <li>
+          <span class="glyphicon glyphicon-remove-sign"></span>
+          <span class="glyphicon-class">glyphicon glyphicon-remove-sign</span>
+        </li>
+        <li>
+          <span class="glyphicon glyphicon-repeat"></span>
+          <span class="glyphicon-class">glyphicon glyphicon-repeat</span>
+        </li>
+        <li>
+          <span class="glyphicon glyphicon-resize-full"></span>
+          <span class="glyphicon-class">glyphicon glyphicon-resize-full</span>
+        </li>
+        <li>
+          <span class="glyphicon glyphicon-resize-horizontal"></span>
+          <span class="glyphicon-class">glyphicon glyphicon-resize-horizontal</span>
+        </li>
+        <li>
+          <span class="glyphicon glyphicon-resize-small"></span>
+          <span class="glyphicon-class">glyphicon glyphicon-resize-small</span>
+        </li>
+        <li>
+          <span class="glyphicon glyphicon-resize-vertical"></span>
+          <span class="glyphicon-class">glyphicon glyphicon-resize-vertical</span>
+        </li>
+        <li>
+          <span class="glyphicon glyphicon-retweet"></span>
+          <span class="glyphicon-class">glyphicon glyphicon-retweet</span>
+        </li>
+        <li>
+          <span class="glyphicon glyphicon-road"></span>
+          <span class="glyphicon-class">glyphicon glyphicon-road</span>
+        </li>
+        <li>
+          <span class="glyphicon glyphicon-save"></span>
+          <span class="glyphicon-class">glyphicon glyphicon-save</span>
+        </li>
+        <li>
+          <span class="glyphicon glyphicon-saved"></span>
+          <span class="glyphicon-class">glyphicon glyphicon-saved</span>
+        </li>
+        <li>
+          <span class="glyphicon glyphicon-screenshot"></span>
+          <span class="glyphicon-class">glyphicon glyphicon-screenshot</span>
+        </li>
+        <li>
+          <span class="glyphicon glyphicon-sd-video"></span>
+          <span class="glyphicon-class">glyphicon glyphicon-sd-video</span>
+        </li>
+        <li>
+          <span class="glyphicon glyphicon-search"></span>
+          <span class="glyphicon-class">glyphicon glyphicon-search</span>
+        </li>
+        <li>
+          <span class="glyphicon glyphicon-send"></span>
+          <span class="glyphicon-class">glyphicon glyphicon-send</span>
+        </li>
+        <li>
+          <span class="glyphicon glyphicon-share"></span>
+          <span class="glyphicon-class">glyphicon glyphicon-share</span>
+        </li>
+        <li>
+          <span class="glyphicon glyphicon-share-alt"></span>
+          <span class="glyphicon-class">glyphicon glyphicon-share-alt</span>
+        </li>
+        <li>
+          <span class="glyphicon glyphicon-shopping-cart"></span>
+          <span class="glyphicon-class">glyphicon glyphicon-shopping-cart</span>
+        </li>
+        <li>
+          <span class="glyphicon glyphicon-signal"></span>
+          <span class="glyphicon-class">glyphicon glyphicon-signal</span>
+        </li>
+        <li>
+          <span class="glyphicon glyphicon-sort"></span>
+          <span class="glyphicon-class">glyphicon glyphicon-sort</span>
+        </li>
+        <li>
+          <span class="glyphicon glyphicon-sort-by-alphabet"></span>
+          <span class="glyphicon-class">glyphicon glyphicon-sort-by-alphabet</span>
+        </li>
+        <li>
+          <span class="glyphicon glyphicon-sort-by-alphabet-alt"></span>
+          <span class="glyphicon-class">glyphicon glyphicon-sort-by-alphabet-alt</span>
+        </li>
+        <li>
+          <span class="glyphicon glyphicon-sort-by-attributes"></span>
+          <span class="glyphicon-class">glyphicon glyphicon-sort-by-attributes</span>
+        </li>
+        <li>
+          <span class="glyphicon glyphicon-sort-by-attributes-alt"></span>
+          <span class="glyphicon-class">glyphicon glyphicon-sort-by-attributes-alt</span>
+        </li>
+        <li>
+          <span class="glyphicon glyphicon-sort-by-order"></span>
+          <span class="glyphicon-class">glyphicon glyphicon-sort-by-order</span>
+        </li>
+        <li>
+          <span class="glyphicon glyphicon-sort-by-order-alt"></span>
+          <span class="glyphicon-class">glyphicon glyphicon-sort-by-order-alt</span>
+        </li>
+        <li>
+          <span class="glyphicon glyphicon-sound-5-1"></span>
+          <span class="glyphicon-class">glyphicon glyphicon-sound-5-1</span>
+        </li>
+        <li>
+          <span class="glyphicon glyphicon-sound-6-1"></span>
+          <span class="glyphicon-class">glyphicon glyphicon-sound-6-1</span>
+        </li>
+        <li>
+          <span class="glyphicon glyphicon-sound-7-1"></span>
+          <span class="glyphicon-class">glyphicon glyphicon-sound-7-1</span>
+        </li>
+        <li>
+          <span class="glyphicon glyphicon-sound-dolby"></span>
+          <span class="glyphicon-class">glyphicon glyphicon-sound-dolby</span>
+        </li>
+        <li>
+          <span class="glyphicon glyphicon-sound-stereo"></span>
+          <span class="glyphicon-class">glyphicon glyphicon-sound-stereo</span>
+        </li>
+        <li>
+          <span class="glyphicon glyphicon-star"></span>
+          <span class="glyphicon-class">glyphicon glyphicon-star</span>
+        </li>
+        <li>
+          <span class="glyphicon glyphicon-star-empty"></span>
+          <span class="glyphicon-class">glyphicon glyphicon-star-empty</span>
+        </li>
+        <li>
+          <span class="glyphicon glyphicon-stats"></span>
+          <span class="glyphicon-class">glyphicon glyphicon-stats</span>
+        </li>
+        <li>
+          <span class="glyphicon glyphicon-step-backward"></span>
+          <span class="glyphicon-class">glyphicon glyphicon-step-backward</span>
+        </li>
+        <li>
+          <span class="glyphicon glyphicon-step-forward"></span>
+          <span class="glyphicon-class">glyphicon glyphicon-step-forward</span>
+        </li>
+        <li>
+          <span class="glyphicon glyphicon-stop"></span>
+          <span class="glyphicon-class">glyphicon glyphicon-stop</span>
+        </li>
+        <li>
+          <span class="glyphicon glyphicon-subtitles"></span>
+          <span class="glyphicon-class">glyphicon glyphicon-subtitles</span>
+        </li>
+        <li>
+          <span class="glyphicon glyphicon-tag"></span>
+          <span class="glyphicon-class">glyphicon glyphicon-tag</span>
+        </li>
+        <li>
+          <span class="glyphicon glyphicon-tags"></span>
+          <span class="glyphicon-class">glyphicon glyphicon-tags</span>
+        </li>
+        <li>
+          <span class="glyphicon glyphicon-tasks"></span>
+          <span class="glyphicon-class">glyphicon glyphicon-tasks</span>
+        </li>
+        <li>
+          <span class="glyphicon glyphicon-text-height"></span>
+          <span class="glyphicon-class">glyphicon glyphicon-text-height</span>
+        </li>
+        <li>
+          <span class="glyphicon glyphicon-text-width"></span>
+          <span class="glyphicon-class">glyphicon glyphicon-text-width</span>
+        </li>
+        <li>
+          <span class="glyphicon glyphicon-th"></span>
+          <span class="glyphicon-class">glyphicon glyphicon-th</span>
+        </li>
+        <li>
+          <span class="glyphicon glyphicon-th-large"></span>
+          <span class="glyphicon-class">glyphicon glyphicon-th-large</span>
+        </li>
+        <li>
+          <span class="glyphicon glyphicon-th-list"></span>
+          <span class="glyphicon-class">glyphicon glyphicon-th-list</span>
+        </li>
+        <li>
+          <span class="glyphicon glyphicon-thumbs-down"></span>
+          <span class="glyphicon-class">glyphicon glyphicon-thumbs-down</span>
+        </li>
+        <li>
+          <span class="glyphicon glyphicon-thumbs-up"></span>
+          <span class="glyphicon-class">glyphicon glyphicon-thumbs-up</span>
+        </li>
+        <li>
+          <span class="glyphicon glyphicon-time"></span>
+          <span class="glyphicon-class">glyphicon glyphicon-time</span>
+        </li>
+        <li>
+          <span class="glyphicon glyphicon-tint"></span>
+          <span class="glyphicon-class">glyphicon glyphicon-tint</span>
+        </li>
+        <li>
+          <span class="glyphicon glyphicon-tower"></span>
+          <span class="glyphicon-class">glyphicon glyphicon-tower</span>
+        </li>
+        <li>
+          <span class="glyphicon glyphicon-transfer"></span>
+          <span class="glyphicon-class">glyphicon glyphicon-transfer</span>
+        </li>
+        <li>
+          <span class="glyphicon glyphicon-trash"></span>
+          <span class="glyphicon-class">glyphicon glyphicon-trash</span>
+        </li>
+        <li>
+          <span class="glyphicon glyphicon-tree-conifer"></span>
+          <span class="glyphicon-class">glyphicon glyphicon-tree-conifer</span>
+        </li>
+        <li>
+          <span class="glyphicon glyphicon-tree-deciduous"></span>
+          <span class="glyphicon-class">glyphicon glyphicon-tree-deciduous</span>
+        </li>
+        <li>
+          <span class="glyphicon glyphicon-unchecked"></span>
+          <span class="glyphicon-class">glyphicon glyphicon-unchecked</span>
+        </li>
+        <li>
+          <span class="glyphicon glyphicon-upload"></span>
+          <span class="glyphicon-class">glyphicon glyphicon-upload</span>
+        </li>
+        <li>
+          <span class="glyphicon glyphicon-usd"></span>
+          <span class="glyphicon-class">glyphicon glyphicon-usd</span>
+        </li>
+        <li>
+          <span class="glyphicon glyphicon-user"></span>
+          <span class="glyphicon-class">glyphicon glyphicon-user</span>
+        </li>
+        <li>
+          <span class="glyphicon glyphicon-volume-down"></span>
+          <span class="glyphicon-class">glyphicon glyphicon-volume-down</span>
+        </li>
+        <li>
+          <span class="glyphicon glyphicon-volume-off"></span>
+          <span class="glyphicon-class">glyphicon glyphicon-volume-off</span>
+        </li>
+        <li>
+          <span class="glyphicon glyphicon-volume-up"></span>
+          <span class="glyphicon-class">glyphicon glyphicon-volume-up</span>
+        </li>
+        <li>
+          <span class="glyphicon glyphicon-warning-sign"></span>
+          <span class="glyphicon-class">glyphicon glyphicon-warning-sign</span>
+        </li>
+        <li>
+          <span class="glyphicon glyphicon-wrench"></span>
+          <span class="glyphicon-class">glyphicon glyphicon-wrench</span>
+        </li>
+        <li>
+          <span class="glyphicon glyphicon-zoom-in"></span>
+          <span class="glyphicon-class">glyphicon glyphicon-zoom-in</span>
+        </li>
+        <li>
+          <span class="glyphicon glyphicon-zoom-out"></span>
+          <span class="glyphicon-class">glyphicon glyphicon-zoom-out</span>
+        </li>
+      </ul>
+    </div>
 
 
     <h2 id="glyphicons-how-to-use">How to use</h2>
     <p>For performance reasons, all icons require a base class and individual icon class. To use, place the following code just about anywhere. Be sure to leave a space between the icon and text for proper padding.</p>
+    <div class="bs-callout bs-callout-danger">
+      <h4>Don't mix with other components</h4>
+      <p>Icon classes cannot be combined with other elements. They are designed to be standalone elements.</p>
+    </div>
 {% highlight html %}
 <span class="glyphicon glyphicon-search"></span>
 {% endhighlight %}
@@ -896,9 +902,13 @@ base_url: "../"
 {% endhighlight %}
 
     <h3 id="dropdowns-alignment">Alignment options</h3>
-    <p>Add <code>.pull-right</code> to a <code>.dropdown-menu</code> to right align the dropdown menu.</p>
+    <p>Add <code>.dropdown-menu-right</code> to a <code>.dropdown-menu</code> to right align the dropdown menu.</p>
+    <div class="bs-callout bs-callout-warning">
+      <h4>Deprecated <code>.pull-right</code> alignment</h4>
+      <p>As of v3.1, we've deprecated <code>.pull-right</code> on dropdown menus. To right-align a menu, use <code>.dropdown-menu-right</code>. Right-aligned nav components in the navbar use a mixin version of this class to automatically align the menu. To override it, use <code>.dropdown-menu-left</code>.</p>
+    </div>
 {% highlight html %}
-<ul class="dropdown-menu pull-right" role="menu" aria-labelledby="dLabel">
+<ul class="dropdown-menu dropdown-menu-right" role="menu" aria-labelledby="dLabel">
   ...
 </ul>
 {% endhighlight %}
@@ -1093,7 +1103,7 @@ base_url: "../"
 {% endhighlight %}
 
     <h3 id="btn-groups-vertical">Vertical variation</h3>
-    <p>Make a set of buttons appear vertically stacked rather than horizontally.</p>
+    <p>Make a set of buttons appear vertically stacked rather than horizontally. <strong class="text-danger">Split button dropdowns are not supported here.</strong></p>
     <div class="bs-example">
       <div class="btn-group-vertical">
         <button type="button" class="btn btn-default">Button</button>
@@ -1149,11 +1159,11 @@ base_url: "../"
 {% endhighlight %}
 
     <h3 id="btn-groups-justified">Justified link variation</h3>
-    <p>Make a group of buttons stretch at the same size to span the entire width of its parent.</p>
+    <p>Make a group of buttons stretch at the same size to span the entire width of its parent. Also works with button dropdowns within the button group.</p>
 
     <div class="bs-callout bs-callout-warning">
       <h4>Element-specific usage</h4>
-      <p>This only works with <code>&lt;a&gt;</code> elements as the <code>&lt;button&gt;</code> doesn't pick up these styles.</p>
+      <p>This only works with <code>&lt;a&gt;</code> elements as the <code>&lt;button&gt;</code> doesn't pick up the styles we use to justify content (some <code>display: table-cell;</code>-fu).</p>
     </div>
 
     <div class="bs-example">
@@ -1162,6 +1172,23 @@ base_url: "../"
         <a class="btn btn-default" role="button">Middle</a>
         <a class="btn btn-default" role="button">Right</a>
       </div>
+      <br>
+      <div class="btn-group btn-group-justified">
+        <a class="btn btn-default" role="button">Left</a>
+        <a class="btn btn-default" role="button">Middle</a>
+        <div class="btn-group">
+          <a class="btn btn-default dropdown-toggle" data-toggle="dropdown">
+            Dropdown <span class="caret"></span>
+          </a>
+          <ul class="dropdown-menu" role="menu">
+            <li><a href="#">Action</a></li>
+            <li><a href="#">Another action</a></li>
+            <li><a href="#">Something else here</a></li>
+            <li class="divider"></li>
+            <li><a href="#">Separated link</a></li>
+          </ul>
+        </div>
+      </div>
     </div>
 {% highlight html %}
 <div class="btn-group btn-group-justified">
@@ -1882,8 +1909,8 @@ base_url: "../"
     <h2 id="nav-justified">Justified</h2>
     <p>Easily make tabs or pills equal widths of their parent at screens wider than 768px with <code>.nav-justified</code>. On smaller screens, the nav links are stacked.</p>
     <div class="bs-callout bs-callout-warning">
-      <h4>WebKit and responsive justified navs</h4>
-      <p>Chrome and Safari both exhibit a bug in which resizing your browser horizontally causes rendering errors in the justified nav that are cleared upon refreshing. This bug is also shown in the <a href="../examples/justified-nav/">justified nav example</a>.</p>
+      <h4>Safari and responsive justified navs</h4>
+      <p>Safari exhibits a bug in which resizing your browser horizontally causes rendering errors in the justified nav that are cleared upon refreshing. This bug is also shown in the <a href="../examples/justified-nav/">justified nav example</a>.</p>
     </div>
     <div class="bs-example">
       <ul class="nav nav-tabs nav-justified">
@@ -2021,9 +2048,9 @@ base_url: "../"
       <h4>Customize the collapsing point</h4>
       <p>Depending on the content in your navbar, you might need to change the point at which your navbar switches between collapsed and horizontal mode. Customize the <code>@grid-float-breakpoint</code> variable or add your own media query.</p>
     </div>
-    <div class="bs-callout bs-callout-warning" id="multiple-navbars-warning">
-      <h4>Multiple navbars require custom code</h4>
-      <p>Multiple nearby navbars with dropdown menus are not supported by default. You will need to override the <code>z-index</code>es of the dropdown menus yourself. Otherwise, the dropdown menu will display behind the other navbar.</p>
+    <div class="bs-callout bs-callout-danger">
+      <h4>Requires JavaScript</h4>
+      <p>If JavaScript is disabled and the viewport is narrow enough that the navbar collapses, it will be impossible to expand the navbar and view the content within the <code>.navbar-collapse</code>.</p>
     </div>
 
     <div class="bs-example">
@@ -2247,12 +2274,12 @@ base_url: "../"
           <a class="navbar-brand" href="#">Brand</a>
         </div>
         <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-5">
-          <p class="navbar-text pull-right">Signed in as <a href="#" class="navbar-link">Mark Otto</a></p>
+          <p class="navbar-text navbar-right">Signed in as <a href="#" class="navbar-link">Mark Otto</a></p>
         </div>
       </nav>
     </div>
 {% highlight html %}
-<p class="navbar-text pull-right">Signed in as <a href="#" class="navbar-link">Mark Otto</a></p>
+<p class="navbar-text navbar-right">Signed in as <a href="#" class="navbar-link">Mark Otto</a></p>
 {% endhighlight %}
 
 
@@ -2693,6 +2720,10 @@ body { padding-bottom: 70px; }
           </a>
         </li>
       </ul>
+      <br>
+      <button class="btn btn-primary" type="button">
+        Messages <span class="badge">4</span>
+      </button>
     </div>
 {% highlight html %}
 <ul class="nav nav-pills nav-stacked">
@@ -2776,31 +2807,31 @@ body { padding-bottom: 70px; }
     <p>By default, Bootstrap's thumbnails are designed to showcase linked images with minimal required markup.</p>
     <div class="bs-example">
       <div class="row">
-        <div class="col-sm-6 col-md-3">
+        <div class="col-xs-6 col-md-3">
           <a href="#" class="thumbnail">
-            <img data-src="holder.js/100%x180" alt="Generic placeholder thumbnail" src="data:image/png;base64,">
+            <img data-src="holder.js/100%x180" alt="Generic placeholder thumbnail">
           </a>
         </div>
-        <div class="col-sm-6 col-md-3">
+        <div class="col-xs-6 col-md-3">
           <a href="#" class="thumbnail">
-            <img data-src="holder.js/100%x180" alt="Generic placeholder thumbnail" src="data:image/png;base64,">
+            <img data-src="holder.js/100%x180" alt="Generic placeholder thumbnail">
           </a>
         </div>
-        <div class="col-sm-6 col-md-3">
+        <div class="col-xs-6 col-md-3">
           <a href="#" class="thumbnail">
-            <img data-src="holder.js/100%x180" alt="Generic placeholder thumbnail" src="data:image/png;base64,">
+            <img data-src="holder.js/100%x180" alt="Generic placeholder thumbnail">
           </a>
         </div>
-        <div class="col-sm-6 col-md-3">
+        <div class="col-xs-6 col-md-3">
           <a href="#" class="thumbnail">
-            <img data-src="holder.js/100%x180" alt="Generic placeholder thumbnail" src="data:image/png;base64,">
+            <img data-src="holder.js/100%x180" alt="Generic placeholder thumbnail">
           </a>
         </div>
       </div>
     </div><!-- /.bs-example -->
 {% highlight html %}
 <div class="row">
-  <div class="col-sm-6 col-md-3">
+  <div class="col-xs-6 col-md-3">
     <a href="#" class="thumbnail">
       <img data-src="holder.js/100%x180" alt="...">
     </a>
@@ -2815,7 +2846,7 @@ body { padding-bottom: 70px; }
       <div class="row">
         <div class="col-sm-6 col-md-4">
           <div class="thumbnail">
-            <img data-src="holder.js/300x200" alt="Generic placeholder thumbnail" src="data:image/png;base64,">
+            <img data-src="holder.js/300x200" alt="Generic placeholder thumbnail">
             <div class="caption">
               <h3>Thumbnail label</h3>
               <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
@@ -2825,7 +2856,7 @@ body { padding-bottom: 70px; }
         </div>
         <div class="col-sm-6 col-md-4">
           <div class="thumbnail">
-            <img data-src="holder.js/300x200" alt="Generic placeholder thumbnail" src="data:image/png;base64,">
+            <img data-src="holder.js/300x200" alt="Generic placeholder thumbnail">
             <div class="caption">
               <h3>Thumbnail label</h3>
               <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
@@ -2835,7 +2866,7 @@ body { padding-bottom: 70px; }
         </div>
         <div class="col-sm-6 col-md-4">
           <div class="thumbnail">
-            <img data-src="holder.js/300x200" alt="Generic placeholder thumbnail" src="data:image/png;base64,">
+            <img data-src="holder.js/300x200" alt="Generic placeholder thumbnail">
             <div class="caption">
               <h3>Thumbnail label</h3>
               <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
@@ -3141,7 +3172,7 @@ body { padding-bottom: 70px; }
     <div class="bs-example">
       <div class="media">
         <a class="pull-left" href="#">
-          <img class="media-object" data-src="holder.js/64x64" alt="Generic placeholder image" src="data:image/png;base64,">
+          <img class="media-object" data-src="holder.js/64x64" alt="Generic placeholder image">
         </a>
         <div class="media-body">
           <h4 class="media-heading">Media heading</h4>
@@ -3150,17 +3181,17 @@ body { padding-bottom: 70px; }
       </div>
       <div class="media">
         <a class="pull-left" href="#">
-          <img class="media-object" data-src="holder.js/64x64" alt="Generic placeholder image" src="data:image/png;base64,">
+          <img class="media-object" data-src="holder.js/64x64" alt="Generic placeholder image">
         </a>
         <div class="media-body">
           <h4 class="media-heading">Media heading</h4>
           Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
           <div class="media">
             <a class="pull-left" href="#">
-              <img class="media-object" data-src="holder.js/64x64" alt="Generic placeholder image" src="data:image/png;base64,">
+              <img class="media-object" data-src="holder.js/64x64" alt="Generic placeholder image">
             </a>
             <div class="media-body">
-              <h4 class="media-heading">Media heading</h4>
+              <h4 class="media-heading">Nested media heading</h4>
               Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
             </div>
           </div>
@@ -3185,7 +3216,7 @@ body { padding-bottom: 70px; }
       <ul class="media-list">
         <li class="media">
           <a class="pull-left" href="#">
-            <img class="media-object" data-src="holder.js/64x64" alt="Generic placeholder image" src="data:image/png;base64,">
+            <img class="media-object" data-src="holder.js/64x64" alt="Generic placeholder image">
           </a>
           <div class="media-body">
             <h4 class="media-heading">Media heading</h4>
@@ -3193,7 +3224,7 @@ body { padding-bottom: 70px; }
             <!-- Nested media object -->
             <div class="media">
               <a class="pull-left" href="#">
-                <img class="media-object" data-src="holder.js/64x64" alt="Generic placeholder image" src="data:image/png;base64,">
+                <img class="media-object" data-src="holder.js/64x64" alt="Generic placeholder image">
               </a>
               <div class="media-body">
                 <h4 class="media-heading">Nested media heading</h4>
@@ -3201,7 +3232,7 @@ body { padding-bottom: 70px; }
                 <!-- Nested media object -->
                 <div class="media">
                   <a class="pull-left" href="#">
-                    <img class="media-object" data-src="holder.js/64x64" alt="Generic placeholder image" src="data:image/png;base64,">
+                    <img class="media-object" data-src="holder.js/64x64" alt="Generic placeholder image">
                   </a>
                   <div class="media-body">
                     <h4 class="media-heading">Nested media heading</h4>
@@ -3213,7 +3244,7 @@ body { padding-bottom: 70px; }
             <!-- Nested media object -->
             <div class="media">
               <a class="pull-left" href="#">
-                <img class="media-object" data-src="holder.js/64x64" alt="Generic placeholder image" src="data:image/png;base64,">
+                <img class="media-object" data-src="holder.js/64x64" alt="Generic placeholder image">
               </a>
               <div class="media-body">
                 <h4 class="media-heading">Nested media heading</h4>
@@ -3224,7 +3255,7 @@ body { padding-bottom: 70px; }
         </li>
         <li class="media">
           <a class="pull-right" href="#">
-            <img class="media-object" data-src="holder.js/64x64" alt="Generic placeholder image" src="data:image/png;base64,">
+            <img class="media-object" data-src="holder.js/64x64" alt="Generic placeholder image">
           </a>
           <div class="media-body">
             <h4 class="media-heading">Media heading</h4>
@@ -3329,6 +3360,43 @@ body { padding-bottom: 70px; }
   <a href="#" class="list-group-item">Porta ac consectetur ac</a>
   <a href="#" class="list-group-item">Vestibulum at eros</a>
 </div>
+{% endhighlight %}
+
+    <h3 id="list-group-contextual-classes">Contextual classes</h3>
+    <p>Use contextual classes to style list items, default or linked. Also includes <code>.active</code> state.</p>
+    <div class="bs-example">
+      <div class="row">
+        <div class="col-sm-6">
+          <ul class="list-group">
+            <li class="list-group-item list-group-item-success">Dapibus ac facilisis in</li>
+            <li class="list-group-item list-group-item-warning">Porta ac consectetur ac</li>
+            <li class="list-group-item list-group-item-danger">Vestibulum at eros</li>
+            <li class="list-group-item list-group-item-info">Cras sit amet nibh libero</li>
+          </ul>
+        </div>
+        <div class="col-sm-6">
+          <div class="list-group">
+            <a href="#" class="list-group-item list-group-item-success">Dapibus ac facilisis in</a>
+            <a href="#" class="list-group-item list-group-item-warning">Porta ac consectetur ac</a>
+            <a href="#" class="list-group-item list-group-item-danger">Vestibulum at eros</a>
+            <a href="#" class="list-group-item list-group-item-info">Cras sit amet nibh libero</a>
+          </div>
+        </div>
+      </div>
+    </div>
+{% highlight html %}
+<ul class="list-group">
+  <li class="list-group-item list-group-item-success">Dapibus ac facilisis in</li>
+  <li class="list-group-item list-group-item-warning">Porta ac consectetur ac</li>
+  <li class="list-group-item list-group-item-danger">Vestibulum at eros</li>
+  <li class="list-group-item list-group-item-info">Cras sit amet nibh libero</li>
+</ul>
+<div class="list-group">
+  <a href="#" class="list-group-item list-group-item-success">Dapibus ac facilisis in</a>
+  <a href="#" class="list-group-item list-group-item-warning">Porta ac consectetur ac</a>
+  <a href="#" class="list-group-item list-group-item-danger">Vestibulum at eros</a>
+  <a href="#" class="list-group-item list-group-item-info">Cras sit amet nibh libero</a>
+</div>
 {% endhighlight %}
 
     <h3 id="list-group-custom-content">Custom content</h3>

composer.json

@@ -17,4 +17,9 @@
       "issues": "https://github.com/twbs/bootstrap/issues"
     }
   , "license": "Apache-2.0"
+  , "extra": {
+      "branch-alias": {
+        "dev-master": "3.0.x-dev"
+      }
+  }
 }

css.html

@@ -54,7 +54,8 @@ base_url: "../"
     <p>For improved cross-browser rendering, we use <a href="http://necolas.github.io/normalize.css/" target="_blank">Normalize</a>, a project by <a href="http://twitter.com/necolas" target="_blank">Nicolas Gallagher</a> and <a href="http://twitter.com/jon_neal" target="_blank">Jonathan Neal</a>.</p>
 
     <h3 id="overview-container">Containers</h3>
-    <p>Easily center a page's contents by wrapping its contents in a <code>.container</code>. Containers set <code>max-width</code> at various media query breakpoints to match our grid system.</p>
+    <p>Easily center a page's contents by wrapping its contents in a <code>.container</code>. Containers set <code>width</code> at various media query breakpoints to match our grid system.</p>
+    <p>Note that, due to <code>padding</code> and fixed widths, containers are not nestable by default.</p>
 {% highlight html %}
 <div class="container">
   ...
@@ -75,7 +76,7 @@ base_url: "../"
     <h3 id="grid-intro">Introduction</h3>
     <p>Grid systems are used for creating page layouts through a series of rows and columns that house your content. Here's how the Bootstrap grid system works:</p>
     <ul>
-      <li>Rows must be placed within a <code>.container</code> for proper alignment and padding.</li>
+      <li>Rows must be placed within a <code>.container</code> (fixed-width) or <code>.container-fluid</code> (full-width) for proper alignment and padding.</li>
       <li>Use rows to create horizontal groups of columns.</li>
       <li>Content should be placed within columns, and only columns may be immediate children of rows.</li>
       <li>Predefined grid classes like <code>.row</code> and <code>.col-xs-4</code> are available for quickly making grid layouts. LESS mixins can also be used for more semantic layouts.</li>
@@ -144,7 +145,7 @@ base_url: "../"
             <td colspan="3">Collapsed to start, horizontal above breakpoints</td>
           </tr>
           <tr>
-            <th>Max container width</th>
+            <th>Container width</th>
             <td>None (auto)</td>
             <td>750px</td>
             <td>970px</td>
@@ -178,13 +179,11 @@ base_url: "../"
           </tr>
           <tr>
             <th>Offsets</th>
-            <td colspan="1" class="text-muted">N/A</td>
-            <td colspan="3">Yes</td>
+            <td colspan="4">Yes</td>
           </tr>
           <tr>
             <th>Column ordering</th>
-            <td class="text-muted">N/A</td>
-            <td colspan="3">Yes</td>
+            <td colspan="4">Yes</td>
           </tr>
         </tbody>
       </table>
@@ -250,6 +249,16 @@ base_url: "../"
   <div class="col-md-6">.col-md-6</div>
   <div class="col-md-6">.col-md-6</div>
 </div>
+{% endhighlight %}
+
+    <h3 id="grid-example-fluid">Example: Fluid container</h3>
+    <p>Turn any fixed-width grid layout into a full-width layout by changing your outermost <code>.container</code> to <code>.container-fluid</code>.</p>
+{% highlight html %}
+<div class="container-fluid">
+  <div class="row">
+    ...
+  </div>
+</div>
 {% endhighlight %}
 
     <h3 id="grid-example-mixed">Example: Mobile and desktop</h3>
@@ -320,7 +329,7 @@ base_url: "../"
 {% endhighlight %}
 
     <h3 id="grid-responsive-resets">Responsive column resets</h3>
-    <p>With the four tiers of grids available you're bound to run into issues where, at certain breakpoints, your columns don't clear quite right as one is taller than the other. To fix that, use a combination of a <code>.clearfix</code> and our <a href="../css#responsive-utilities">responsive utility classes</a>.</p>
+    <p>With the four tiers of grids available you're bound to run into issues where, at certain breakpoints, your columns don't clear quite right as one is taller than the other. To fix that, use a combination of a <code>.clearfix</code> and our <a href="#responsive-utilities">responsive utility classes</a>.</p>
 <div class="bs-docs-grid">
   <div class="row show-grid">
     <div class="col-xs-6 col-sm-3">
@@ -871,7 +880,7 @@ base_url: "../"
     <p>Style and content changes for simple variations on a standard <code>&lt;blockquote&gt;</code>.</p>
 
     <h4>Naming a source</h4>
-    <p>Add <code>&lt;small&gt;</code> tag for identifying the source. Wrap the name of the source work in <code>&lt;cite&gt;</code>.</p>
+    <p>Add <code>&lt;small&gt;</code> tag or <code>.small</code> class for identifying the source. Wrap the name of the source work in <code>&lt;cite&gt;</code>.</p>
     <div class="bs-example">
       <blockquote>
         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
@@ -1048,7 +1057,7 @@ base_url: "../"
       <h1 id="code">Code</h1>
     </div>
 
-    <h2>Inline</h2>
+    <h2 id="code-inline">Inline</h2>
     <p>Wrap inline snippets of code with <code>&lt;code&gt;</code>.</p>
 <div class="bs-example">
   For example, <code>&lt;section&gt;</code> should be wrapped as inline.
@@ -1057,7 +1066,16 @@ base_url: "../"
 For example, <code>&lt;section&gt;</code> should be wrapped as inline.
 {% endhighlight %}
 
-    <h2>Basic block</h2>
+    <h2 id="code-user-input">User input</h2>
+    <p>Use the <code>&lt;kbd&gt;</code> to indicate input that is typically entered via keyboard.</p>
+<div class="bs-example">
+  To switch directories, type <kbd>cd</kbd> followed the name of the directory.
+</div>
+{% highlight html %}
+  To switch directories, type <kbd>cd</kbd> followed the name of the directory.
+{% endhighlight %}
+
+    <h2 id="code-block">Basic block</h2>
     <p>Use <code>&lt;pre&gt;</code> for multiple lines of code. Be sure to escape any angle brackets in the code for proper rendering.</p>
 <div class="bs-example">
   <pre>&lt;p&gt;Sample text here...&lt;/p&gt;</pre>
@@ -1328,6 +1346,12 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
             </td>
             <td>Indicates a dangerous or potentially negative action</td>
           </tr>
+          <tr>
+            <td>
+              <code>.info</code>
+            </td>
+            <td>Indicates a neutral informative change or action</td>
+          </tr>
         </tbody>
       </table>
     </div>
@@ -1384,6 +1408,18 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
             <td>Column content</td>
             <td>Column content</td>
           </tr>
+          <tr>
+            <td>8</td>
+            <td>Column content</td>
+            <td>Column content</td>
+            <td>Column content</td>
+          </tr>
+          <tr class="info">
+            <td>9</td>
+            <td>Column content</td>
+            <td>Column content</td>
+            <td>Column content</td>
+          </tr>
         </tbody>
       </table>
     </div><!-- /example -->
@@ -1393,6 +1429,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
 <tr class="success">...</tr>
 <tr class="warning">...</tr>
 <tr class="danger">...</tr>
+<tr class="info">...</tr>
 
 <!-- On cells (`td` or `th`) -->
 <tr>
@@ -1400,6 +1437,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
   <td class="success">...</td>
   <td class="warning">...</td>
   <td class="danger">...</td>
+  <td class="info">...</td>
 </tr>
 {% endhighlight %}
 
@@ -1567,7 +1605,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
 
 
     <h2 id="forms-inline">Inline form</h2>
-    <p>Add <code>.form-inline</code> for left-aligned and inline-block controls for a compact layout.</p>
+    <p>Add <code>.form-inline</code> to your <code>&lt;form&gt;</code> for left-aligned and inline-block controls. <strong>This only applies to forms within viewports that are at least 768px wide.</strong></p>
     <div class="bs-callout bs-callout-danger">
       <h4>Requires custom widths</h4>
       <p>Inputs, selects, and textareas are 100% wide by default in Bootstrap. To use the inline form, you'll have to set a width on the form controls used within.</p>
@@ -1617,7 +1655,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
     <h2 id="forms-horizontal">Horizontal form</h2>
     <p>Use Bootstrap's predefined grid classes to align labels and groups of form controls in a horizontal layout by adding <code>.form-horizontal</code> to the form. Doing so changes <code>.form-group</code>s to behave as grid rows, so no need for <code>.row</code>.</p>
     <div class="bs-example">
-      <form class="form-horizontal">
+      <form class="form-horizontal" role="form">
         <div class="form-group">
           <label for="inputEmail3" class="col-sm-2 control-label">Email</label>
           <div class="col-sm-10">
@@ -2260,9 +2298,9 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
       <p>Keep in mind that Internet Explorer 8 lacks support for rounded corners.</p>
     </div>
     <div class="bs-example bs-example-images">
-      <img data-src="holder.js/140x140" src="data:image/png;base64," class="img-rounded" alt="A generic square placeholder image with rounded corners">
-      <img data-src="holder.js/140x140" src="data:image/png;base64," class="img-circle" alt="A generic square placeholder image where only the portion within the circle circumscribed about said square is visible">
-      <img data-src="holder.js/140x140" src="data:image/png;base64," class="img-thumbnail" alt="A generic square placeholder image with a white border around it, making it resemble a photograph taken with an old instant camera">
+      <img data-src="holder.js/140x140" class="img-rounded" alt="A generic square placeholder image with rounded corners">
+      <img data-src="holder.js/140x140" class="img-circle" alt="A generic square placeholder image where only the portion within the circle circumscribed about said square is visible">
+      <img data-src="holder.js/140x140" class="img-thumbnail" alt="A generic square placeholder image with a white border around it, making it resemble a photograph taken with an old instant camera">
     </div>
 {% highlight html %}
 <img src="..." alt="..." class="img-rounded">
@@ -2272,7 +2310,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
 
     <div class="bs-callout bs-callout-warning">
       <h4>Responsive images</h4>
-      <p>Looking for how to make images more responsive? <a href="../css#overview-responsive-images">Check out the responsive images section</a> up top.</p>
+      <p>Looking for how to make images more responsive? <a href="#overview-responsive-images">Check out the responsive images section</a> up top.</p>
     </div>
 
   </div>
@@ -2384,7 +2422,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
 
 
     <h3 id="helper-classes-show-hide">Showing and hiding content</h3>
-    <p>Force an element to be shown or hidden (<strong>including for screen readers</strong>) with the use of <code>.show</code> and <code>.hidden</code> classes. These classes use <code>!important</code> to avoid specificity conflicts, just like the <a href="../css/#helper-classes-floats">quick floats</a>. They are only available for block level toggling. They can also be used as mixins.</p>
+    <p>Force an element to be shown or hidden (<strong>including for screen readers</strong>) with the use of <code>.show</code> and <code>.hidden</code> classes. These classes use <code>!important</code> to avoid specificity conflicts, just like the <a href="#helper-classes-floats">quick floats</a>. They are only available for block level toggling. They can also be used as mixins.</p>
     <p><code>.hide</code> is available, but it does not always affect screen readers and is <strong>deprecated</strong> as of v3.0.1. Use <code>.hidden</code> or <code>.sr-only</code> instead.</p>
     <p>Furthermore, <code>.invisible</code> can be used to toggle only the visibility of an element, meaning its <code>display</code> is not modified and the element can still affect the flow of the document.</p>
 {% highlight html %}
@@ -2672,3 +2710,463 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
     </div>
 
   </div>
+
+
+
+  <!-- Using Less
+  ================================================== -->
+  <div class="bs-docs-section" id="less">
+    <div class="page-header">
+      <h1>Using LESS</h1>
+    </div>
+    <p class="lead">Bootstrap's CSS is built on LESS, a preprocessor with additional functionality like variables, mixins, and functions for compiling CSS. Thosing looking to use the source LESS files instead of our compiled CSS files can make use of the numerous variables and mixins we use throughout the framework.</p>
+
+    <p>Grid variables and mixins are covered <a href="{{ page.base_url }}css/#grid-less">within the Grid system section</a>.</p>
+
+
+    <h2 id="less-variables">Variables</h2>
+    <p>Variables are used throughout the entire project as a way to centralize and share commonly used values like colors, spacing, or font stacks. For a complete breakdown, please see <a href="{{ page.base_url }}customize/#less-variables-section">the Customizer</a>.</p>
+
+    <h3 id="less-variables-colors">Colors</h3>
+    <p>Easily make use of two color schemes: grayscale and semantic. Grayscale colors provide quick access to commonly used shades of black while semantic include various colors assigned to meaningful contextual values.</p>
+    <div class="bs-example">
+      <div class="color-swatches">
+        <div class="color-swatch gray-darker"></div>
+        <div class="color-swatch gray-dark"></div>
+        <div class="color-swatch gray"></div>
+        <div class="color-swatch gray-light"></div>
+        <div class="color-swatch gray-lighter"></div>
+      </div>
+    </div>
+{% highlight css %}
+@gray-darker:  lighten(#000, 13.5%); // #222
+@gray-dark:    lighten(#000, 20%);   // #333
+@gray:         lighten(#000, 33.5%); // #555
+@gray-light:   lighten(#000, 60%);   // #999
+@gray-lighter: lighten(#000, 93.5%); // #eee
+{% endhighlight %}
+
+    <div class="bs-example">
+      <div class="color-swatches">
+        <div class="color-swatch brand-primary"></div>
+        <div class="color-swatch brand-success"></div>
+        <div class="color-swatch brand-warning"></div>
+        <div class="color-swatch brand-danger"></div>
+        <div class="color-swatch brand-info"></div>
+      </div>
+    </div>
+{% highlight css %}
+@brand-primary: #428bca;
+@brand-success: #5cb85c;
+@brand-warning: #f0ad4e;
+@brand-danger:  #d9534f;
+@brand-info:    #5bc0de;
+{% endhighlight %}
+
+    <p>Use any of these color variables as they are or reassign them to more meaningful variables for your project.</p>
+{% highlight css %}
+// Use as-is
+.masthead {
+  background-color: @brand-primary;
+}
+
+// Reassigned variables in LESS
+@alert-message-background: @brand-info;
+.alert {
+  background-color: @alert-message-background;
+}
+{% endhighlight %}
+
+    <h3 id="less-variables-scaffolding">Scaffolding</h3>
+    <p>A handful of variables for quickly customizing key elements of your site's skeleton.</p>
+{% highlight css %}
+// Scaffolding
+@body-background: #fff;
+@text-color:      @black-50;
+{% endhighlight %}
+
+    <h3 id="less-variables-links">Links</h3>
+    <p>Easily style your links with the right color with only one value.</p>
+{% highlight css %}
+// Variables
+@link-color:       @brand-primary;
+@link-color-hover: darken(@link-color, 15%);
+
+// Usage
+a {
+  color: @link-color;
+  text-decoration: none;
+
+  &:hover {
+    color: @link-color-hover;
+    text-decoration: underline;
+  }
+}
+{% endhighlight %}
+    <p>Note that the <code>@link-color-hover</code> uses a function, another awesome tool from LESS, to automagically create the right hover color. You can use <code>darken</code>, <code>lighten</code>, <code>saturate</code>, and <code>desaturate</code>.</p>
+
+    <h3 id="less-variables-typography">Typography</h3>
+    <p>Easily set your type face, text size, leading, and more with a few quick variables. Bootstrap makes use of these as well to provide easy typographic mixins as well.</p>
+{% highlight css %}
+@font-family-sans-serif:  "Helvetica Neue", Helvetica, Arial, sans-serif;
+@font-family-serif:       Georgia, "Times New Roman", Times, serif;
+@font-family-monospace:   Menlo, Monaco, Consolas, "Courier New", monospace;
+@font-family-base:        @font-family-sans-serif;
+
+@font-size-base:          14px;
+@font-size-large:         ceil((@font-size-base * 1.25)); // ~18px
+@font-size-small:         ceil((@font-size-base * 0.85)); // ~12px
+
+@font-size-h1:            floor((@font-size-base * 2.6)); // ~36px
+@font-size-h2:            floor((@font-size-base * 2.15)); // ~30px
+@font-size-h3:            ceil((@font-size-base * 1.7)); // ~24px
+@font-size-h4:            ceil((@font-size-base * 1.25)); // ~18px
+@font-size-h5:            @font-size-base;
+@font-size-h6:            ceil((@font-size-base * 0.85)); // ~12px
+
+@line-height-base:        1.428571429; // 20/14
+@line-height-computed:    floor((@font-size-base * @line-height-base)); // ~20px
+
+@headings-font-family:    inherit;
+@headings-font-weight:    500;
+@headings-line-height:    1.1;
+@headings-color:          inherit;
+{% endhighlight %}
+
+    <h3 id="less-variables-icons">Icons</h3>
+    <p>Two quick variables for customizing the location and filename of your icons.</p>
+{% highlight css %}
+@icon-font-path:          "../fonts/";
+@icon-font-name:          "glyphicons-halflings-regular";
+{% endhighlight %}}
+
+    <h3 id="less-variables-components">Components</h3>
+    <p>Components throughout Bootstrap make use of some default variables for setting common values. Here are the most commonly used.</p>
+{% highlight css %}
+@padding-base-vertical:          6px;
+@padding-base-horizontal:        12px;
+
+@padding-large-vertical:         10px;
+@padding-large-horizontal:       16px;
+
+@padding-small-vertical:         5px;
+@padding-small-horizontal:       10px;
+
+@padding-xs-vertical:            1px;
+@padding-xs-horizontal:          5px;
+
+@line-height-large:              1.33;
+@line-height-small:              1.5;
+
+@border-radius-base:             4px;
+@border-radius-large:            6px;
+@border-radius-small:            3px;
+
+@component-active-color:         #fff;
+@component-active-bg:            @brand-primary;
+
+@caret-width-base:               4px;
+@caret-width-large:              5px;
+{% endhighlight %}}
+
+
+    <h2 id="less-mixins-vendor">Vendor mixins</h2>
+    <p>Vendor mixins are mixins to help support multiple browsers by including all relevant vendor prefixs in your compiled CSS.</p>
+
+
+    <h3 id="mixins-box-sizing">Box-sizing</h3>
+    <p>Reset your components' box model with a single mixin. For context, see this <a href="https://developer.mozilla.org/en-US/docs/CSS/box-sizing" target="_blank">helpful article from Mozilla</a>.</p>
+{% highlight css %}
+.box-sizing(@box-model) {
+  -webkit-box-sizing: @box-model; // Safari <= 5
+     -moz-box-sizing: @box-model; // Firefox <= 19
+          box-sizing: @box-model;
+}
+{% endhighlight %}
+
+    <h3 id="mixins-rounded-corners">Rounded corners</h3>
+    <p>Today all modern browsers support the non-prefixed <code>border-radius</code> property. As such, there is no <code>.border-radius()</code> mixin, but Preboot does include shortcuts for quickly rounding two corners on a particular side of an object.</p>
+{% highlight css %}
+.border-top-radius(@radius) {
+  border-top-right-radius: @radius;
+   border-top-left-radius: @radius;
+}
+.border-right-radius(@radius) {
+  border-bottom-right-radius: @radius;
+     border-top-right-radius: @radius;
+}
+.border-bottom-radius(@radius) {
+  border-bottom-right-radius: @radius;
+   border-bottom-left-radius: @radius;
+}
+.border-left-radius(@radius) {
+  border-bottom-left-radius: @radius;
+     border-top-left-radius: @radius;
+}
+{% endhighlight %}
+
+    <h3 id="mixins-box-shadow">Box (Drop) shadows</h3>
+    <p>If your target audience is using the latest and greatest browsers and devices, be sure to just use the <code>box-shadow</code> property on it's own. If you need support for older Android (pre-v4) and iOS devices (pre-iOS 5), use of the mixin to pick up the required <code>-webkit</code> prefix.</p>
+    <p>Be sure to use <code>rgba()</code> colors in your box shadows so they blend as seamlessly as possible with backgrounds.</p>
+{% highlight css %}
+.box-shadow(@shadow: 0 1px 3px rgba(0,0,0,.25)) {
+  -webkit-box-shadow: @shadow; // iOS <4.3 & Android <4.1
+          box-shadow: @shadow;
+}
+{% endhighlight %}
+
+    <h3 id="mixins-transitions">Transitions</h3>
+    <p>Three mixins for flexibility. Set all transition information with one, or specify a separate delay and duration as needed.</p>
+{% highlight css %}
+.transition(@transition) {
+  -webkit-transition: @transition;
+          transition: @transition;
+}
+.transition-property(@transition-property) {
+  -webkit-transition-property: @transition-property;
+          transition-property: @transition-property;
+}
+.transition-delay(@transition-delay) {
+  -webkit-transition-delay: @transition-delay;
+          transition-delay: @transition-delay;
+}
+.transition-duration(@transition-duration) {
+  -webkit-transition-duration: @transition-duration;
+          transition-duration: @transition-duration;
+}
+.transition-transform(@transition) {
+  -webkit-transition: -webkit-transform @transition;
+     -moz-transition: -moz-transform @transition;
+       -o-transition: -o-transform @transition;
+          transition: transform @transition;
+}
+{% endhighlight %}
+
+    <h3 id="mixins-transformations">Transformations</h3>
+    <p>Rorate, scale, translate (move), or skew any object.</p>
+{% highlight css %}
+.rotate(@degrees) {
+  -webkit-transform: rotate(@degrees);
+      -ms-transform: rotate(@degrees); // IE9 only
+          transform: rotate(@degrees);
+}
+.scale(@ratio; @ratio-y...) {
+  -webkit-transform: scale(@ratio, @ratio-y);
+      -ms-transform: scale(@ratio, @ratio-y); // IE9 only
+          transform: scale(@ratio, @ratio-y);
+}
+.translate(@x; @y) {
+  -webkit-transform: translate(@x, @y);
+      -ms-transform: translate(@x, @y); // IE9 only
+          transform: translate(@x, @y);
+}
+.skew(@x; @y) {
+  -webkit-transform: skew(@x, @y);
+      -ms-transform: skewX(@x) skewY(@y); // See https://github.com/twbs/bootstrap/issues/4885; IE9+
+          transform: skew(@x, @y);
+}
+.translate3d(@x; @y; @z) {
+  -webkit-transform: translate3d(@x, @y, @z);
+          transform: translate3d(@x, @y, @z);
+}
+
+.rotateX(@degrees) {
+  -webkit-transform: rotateX(@degrees);
+      -ms-transform: rotateX(@degrees); // IE9 only
+          transform: rotateX(@degrees);
+}
+.rotateY(@degrees) {
+  -webkit-transform: rotateY(@degrees);
+      -ms-transform: rotateY(@degrees); // IE9 only
+          transform: rotateY(@degrees);
+}
+.perspective(@perspective) {
+  -webkit-perspective: @perspective;
+     -moz-perspective: @perspective;
+          perspective: @perspective;
+}
+.perspective-origin(@perspective) {
+  -webkit-perspective-origin: @perspective;
+     -moz-perspective-origin: @perspective;
+          perspective-origin: @perspective;
+}
+.transform-origin(@origin) {
+  -webkit-transform-origin: @origin;
+     -moz-transform-origin: @origin;
+      -ms-transform-origin: @origin; // IE9 only
+          transform-origin: @origin;
+}
+{% endhighlight %}
+
+    <h3 id="mixins-opacity">Opacity</h3>
+    <p>Set the opacity for all browsers and provide a <code>filter</code> fallback for IE8.</p>
+{% highlight css %}
+.opacity(@opacity) {
+  opacity: @opacity;
+  // IE8 filter
+  @opacity-ie: (@opacity * 100);
+  filter: ~"alpha(opacity=@{opacity-ie})";
+}
+{% endhighlight %}
+
+    <h3 id="mixins-placeholder">Placeholder text</h3>
+    <p>Provide context for form controls within each field.</p>
+{% highlight css %}
+.placeholder(@color: @input-color-placeholder) {
+  &:-moz-placeholder            { color: @color; } // Firefox 4-18
+  &::-moz-placeholder           { color: @color; } // Firefox 19+
+  &:-ms-input-placeholder       { color: @color; } // Internet Explorer 10+
+  &::-webkit-input-placeholder  { color: @color; } // Safari and Chrome
+}
+{% endhighlight %}
+
+    <h3 id="mixins-columns">Columns</h3>
+    <p>Generate columns via CSS within a single element.</p>
+{% highlight css %}
+.content-columns(@width; @count; @gap) {
+  -webkit-column-width: @width;
+     -moz-column-width: @width;
+          column-width: @width;
+  -webkit-column-count: @count;
+     -moz-column-count: @count;
+          column-count: @count;
+  -webkit-column-gap: @gap;
+     -moz-column-gap: @gap;
+          column-gap: @gap;
+}
+{% endhighlight %}
+
+    <h3 id="mixins-gradients">Gradients</h3>
+    <p>Easily turn any two colors into a background gradient. Get more advanced and set a direction, use three colors, or use a radial gradient. With a single mixin you get all the prefixed syntaxes you'll need.</p>
+{% highlight css %}
+#gradient > .vertical(#333; #000);
+#gradient > .horizontal(#333; #000);
+#gradient > .radial(#333; #000);
+{% endhighlight %}
+    <p>You can also specify the angle of a standard two-color, linear gradient:</p>
+{% highlight css %}
+#gradient > .directional(#333; #000; 45deg);
+{% endhighlight %}
+    <p>If you need a barber-stripe style gradient, that's easy, too. Just specify a single color and we'll overlay a translucent white stripe.</p>
+{% highlight css %}
+#gradient > .striped(#333; #000; 45deg);
+{% endhighlight %}
+    <p>Up the ante and use three colors instead. Set the first color, the second color, the second color's color stop (a decimal value like 0.25), and the third color with these mixins:</p>
+{% highlight css %}
+#gradient > .vertical-three-colors(#777; #333; .25; #000);
+#gradient > .horizontal-three-colors(#777; #333; .25; #000);
+{% endhighlight %}
+    <p><strong>Heads up!</strong> Should you ever need to remove a gradient, be sure to remove any IE-specific <code>filter</code> you may have added. You can do that by using <code>.reset-filter()</code> mixin alignside <code>background-image: none;</code>.</p>
+
+
+    <h2 id="less-mixins-utility">Utility mixins</h2>
+    <p>Utility mixins are mixins that combine otherwise unrelated CSS properties to achieve a specific goal or task.</p>
+
+    <h3 id="mixins-clearfix">Clearfix</h3>
+    <p>Forget adding <code>class="clearfix"</code> to any element and instead add the <code>.clearfix()</code> mixin where appropriate. Uses the <a href="http://nicolasgallagher.com/micro-clearfix-hack/" target="_blank">micro clearfix</a> from <a href="http://twitter.com/necolas" target="_blank">Nicolas Gallager</a>.</p>
+{% highlight css %}
+// Mixin
+.clearfix() {
+  &:before,
+  &:after {
+    content: " ";
+    display: table;
+  }
+  &:after {
+    clear: both;
+  }
+}
+
+// Usage
+.container {
+  .clearfix();
+}
+{% endhighlight %}
+
+    <h3 id="mixins-centering">Horizontal centering</h3>
+    <p>Quickly center any element within its parent. <strong>Requires <code>width</code> or <code>max-width</code> to be set.</strong></p>
+{% highlight css %}
+// Mixin
+.center-block() {
+  display: block;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+// Usage
+.container {
+  width: 940px;
+  .center-block();
+}
+{% endhighlight %}
+
+    <h3 id="mixins-sizing">Sizing helpers</h3>
+    <p>Specify the dimensions of an object more easily.</p>
+{% highlight css %}
+// Mixins
+.size(@width; @height) {
+  width: @width;
+  height: @height;
+}
+.square(@size) {
+  .size(@size; @size);
+}
+
+// Usage
+.image { .size(400px; 300px); }
+.avatar { .square(48px); }
+{% endhighlight %}
+
+    <h3 id="mixins-resizable">Resizable textareas</h3>
+    <p>Easily configure the resize options for any textarea, or any other element. Defaults to normal browser behavior (<code>both</code>).</p>
+{% highlight css %}
+.resizable(@direction: both) {
+  // Options: horizontal, vertical, both
+  resize: @direction;
+  // Safari fix
+  overflow: auto;
+}
+{% endhighlight %}
+
+    <h3 id="mixins-truncating">Truncating text</h3>
+    <p>Easily truncate text with an ellipsis with a single mixin. <strong>Requires element to be <code>block</code> or <code>inline-block</code> level.</strong></p>
+{% highlight css %}
+// Mixin
+.text-truncate() {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+// Usage
+.branch-name {
+  display: inline-block;
+  max-width: 200px;
+  .text-truncate();
+}
+{% endhighlight %}
+
+    <h3 id="mixins-retina-images">Retina images</h3>
+    <p>Specify two image paths and the @1x image dimensions, and Preboot will provide an @2x media query. <strong>If you have many images to serve, consider writing your retina image CSS manually in a single media query.</strong></p>
+{% highlight css %}
+.img-retina(@file-1x; @file-2x; @width-1x; @height-1x) {
+  background-image: url("@{file-1x}");
+
+  @media
+  only screen and (-webkit-min-device-pixel-ratio: 2),
+  only screen and (   min--moz-device-pixel-ratio: 2),
+  only screen and (     -o-min-device-pixel-ratio: 2/1),
+  only screen and (        min-device-pixel-ratio: 2),
+  only screen and (                min-resolution: 192dpi),
+  only screen and (                min-resolution: 2dppx) {
+    background-image: url("@{file-2x}");
+    background-size: @width-1x @height-1x;
+  }
+}
+
+// Usage
+.jumbotron {
+  .retina-image("/img/bg-1x.png", "/img/bg-2x.png", 100px, 100px);
+}
+{% endhighlight %}
+  </div>