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

1c19ded8 · Mark Otto · 0df8fae7 · 8cfde5ef · 1c19ded8 · 1c19ded8
Commit 1c19ded8 authored Aug 18, 2015 by Mark Otto
30 changed files
--- a/Gruntfile.js
+++ b/Gruntfile.js
@@ -116,6 +116,13 @@ module.exports = function (grunt) {
      }
    },
+    eslint: {
+      options: {
+        configFile: 'js/.eslintrc'
+      },
+      target: 'js/src/*.js'
+    },
    jscs: {
      options: {
        config: 'js/.jscsrc'
@@ -449,7 +456,7 @@ module.exports = function (grunt) {
    testSubtasks.push('saucelabs-qunit');
  }
  grunt.registerTask('test', testSubtasks);
-  grunt.registerTask('test-js', ['jscs:core', 'jscs:test', 'jscs:grunt', 'qunit']);
+  grunt.registerTask('test-js', ['eslint', 'jscs:core', 'jscs:test', 'jscs:grunt', 'qunit']);
  // JS distribution task.
  grunt.registerTask('dist-js', ['concat', 'lineremover', 'babel:dist', 'stamp', 'uglify:core', 'commonjs']);

--- a/dist/js/bootstrap.js
+++ b/dist/js/bootstrap.js
--- a/dist/js/bootstrap.min.js
+++ b/dist/js/bootstrap.min.js
--- a/dist/js/umd/alert.js
+++ b/dist/js/umd/alert.js
@@ -110,8 +110,8 @@
      }, {
        key: '_getRootElement',
        value: function _getRootElement(element) {
-          var parent = false;
          var selector = _Util['default'].getSelectorFromElement(element);
+          var parent = false;
          if (selector) {
            parent = $(selector)[0];
@@ -127,6 +127,7 @@
        key: '_triggerCloseEvent',
        value: function _triggerCloseEvent(element) {
          var closeEvent = $.Event(Event.CLOSE);
          $(element).trigger(closeEvent);
          return closeEvent;
        }

--- a/dist/js/umd/button.js
+++ b/dist/js/umd/button.js
@@ -38,7 +38,6 @@
    var EVENT_KEY = '.' + DATA_KEY;
    var DATA_API_KEY = '.data-api';
    var JQUERY_NO_CONFLICT = $.fn[NAME];
-    var TRANSITION_DURATION = 150;
    var ClassName = {
      ACTIVE: 'active',

--- a/dist/js/umd/carousel.js
+++ b/dist/js/umd/carousel.js
@@ -194,7 +194,7 @@
            return;
          }
-          if (activeIndex == index) {
+          if (activeIndex === index) {
            this.pause();
            this.cycle();
            return;
@@ -236,7 +236,7 @@
            $(this._element).on(Event.KEYDOWN, $.proxy(this._keydown, this));
          }
-          if (this._config.pause == 'hover' && !('ontouchstart' in document.documentElement)) {
+          if (this._config.pause === 'hover' && !('ontouchstart' in document.documentElement)) {
            $(this._element).on(Event.MOUSEENTER, $.proxy(this.pause, this)).on(Event.MOUSELEAVE, $.proxy(this.cycle, this));
          }
        }
@@ -245,7 +245,9 @@
        value: function _keydown(event) {
          event.preventDefault();
-          if (/input|textarea/i.test(event.target.tagName)) return;
+          if (/input|textarea/i.test(event.target.tagName)) {
+            return;
+          }
          switch (event.which) {
            case 37:
@@ -269,13 +271,13 @@
          var isPrevDirection = direction === Direction.PREVIOUS;
          var activeIndex = this._getItemIndex(activeElement);
          var lastItemIndex = this._items.length - 1;
-          var isGoingToWrap = isPrevDirection && activeIndex === 0 || isNextDirection && activeIndex == lastItemIndex;
+          var isGoingToWrap = isPrevDirection && activeIndex === 0 || isNextDirection && activeIndex === lastItemIndex;
          if (isGoingToWrap && !this._config.wrap) {
            return activeElement;
          }
-          var delta = direction == Direction.PREVIOUS ? -1 : 1;
+          var delta = direction === Direction.PREVIOUS ? -1 : 1;
          var itemIndex = (activeIndex + delta) % this._items.length;
          return itemIndex === -1 ? this._items[this._items.length - 1] : this._items[itemIndex];
@@ -313,9 +315,9 @@
          var activeElement = $(this._element).find(Selector.ACTIVE_ITEM)[0];
          var nextElement = element || activeElement && this._getItemByDirection(direction, activeElement);
-          var isCycling = !!this._interval;
+          var isCycling = Boolean(this._interval);
-          var directionalClassName = direction == Direction.NEXT ? ClassName.LEFT : ClassName.RIGHT;
+          var directionalClassName = direction === Direction.NEXT ? ClassName.LEFT : ClassName.RIGHT;
          if (nextElement && $(nextElement).hasClass(ClassName.ACTIVE)) {
            this._isSliding = false;
@@ -400,7 +402,7 @@
              $(this).data(DATA_KEY, data);
            }
-            if (typeof config == 'number') {
+            if (typeof config === 'number') {
              data.to(config);
            } else if (action) {
              data[action]();
@@ -426,8 +428,8 @@
          }
          var config = $.extend({}, $(target).data(), $(this).data());
          var slideIndex = this.getAttribute('data-slide-to');
          if (slideIndex) {
            config.interval = false;
          }

--- a/dist/js/umd/collapse.js
+++ b/dist/js/umd/collapse.js
@@ -192,7 +192,8 @@
            return;
          }
-          var scrollSize = 'scroll' + (dimension[0].toUpperCase() + dimension.slice(1));
+          var capitalizedDimension = dimension[0].toUpperCase() + dimension.slice(1);
+          var scrollSize = 'scroll' + capitalizedDimension;
          $(this._element).one(_Util['default'].TRANSITION_END, complete).emulateTransitionEnd(TRANSITION_DURATION);
@@ -238,7 +239,8 @@
          this._element.style[dimension] = 0;
          if (!_Util['default'].supportsTransitionEnd()) {
-            return complete();
+            complete();
+            return;
          }
          $(this._element).one(_Util['default'].TRANSITION_END, complete).emulateTransitionEnd(TRANSITION_DURATION);
@@ -266,7 +268,7 @@
        key: '_getConfig',
        value: function _getConfig(config) {
          config = $.extend({}, Default, config);
-          config.toggle = !!config.toggle; // coerce string values
+          config.toggle = Boolean(config.toggle); // coerce string values
          _Util['default'].typeCheckConfig(NAME, config, DefaultType);
          return config;
        }
@@ -352,7 +354,6 @@
      event.preventDefault();
      var target = Collapse._getTargetFromElement(this);
      var data = $(target).data(DATA_KEY);
      var config = data ? 'toggle' : $(this).data();

--- a/dist/js/umd/dropdown.js
+++ b/dist/js/umd/dropdown.js
@@ -99,7 +99,7 @@
        value: function toggle() {
          if (this.disabled || $(this).hasClass(ClassName.DISABLED)) {
-            return;
+            return false;
          }
          var parent = Dropdown._getParentFromElement(this);
@@ -126,7 +126,7 @@
          $(parent).trigger(showEvent);
          if (showEvent.isDefaultPrevented()) {
-            return;
+            return false;
          }
          this.focus();
@@ -259,9 +259,19 @@
          var index = items.indexOf(event.target);
-          if (event.which === 38 && index > 0) index--; // up
+          if (event.which === 38 && index > 0) {
-          if (event.which === 40 && index < items.length - 1) index++; // down
+            // up
-          if (! ~index) index = 0;
+            index--;
+          }
+          if (event.which === 40 && index < items.length - 1) {
+            // down
+            index++;
+          }
+          if (! ~index) {
+            index = 0;
+          }
          items[index].focus();
        }

--- a/dist/js/umd/modal.js
+++ b/dist/js/umd/modal.js
@@ -247,14 +247,18 @@
          $(this._element).addClass(ClassName.IN);
-          if (this._config.focus) this._enforceFocus();
+          if (this._config.focus) {
+            this._enforceFocus();
+          }
          var shownEvent = $.Event(Event.SHOWN, {
            relatedTarget: relatedTarget
          });
          var transitionComplete = function transitionComplete() {
-            if (_this2._config.focus) _this2._element.focus();
+            if (_this2._config.focus) {
+              _this2._element.focus();
+            }
            $(_this2._element).trigger(shownEvent);
          };
@@ -411,7 +415,7 @@
          }
          if (this._isBodyOverflowing && !isModalOverflowing) {
-            this._element.style.paddingRight = this._scrollbarWidth + 'px';
+            this._element.style.paddingRight = this._scrollbarWidth + 'px~';
          }
        }
      }, {
@@ -440,7 +444,7 @@
          this._originalBodyPadding = document.body.style.paddingRight || '';
          if (this._isBodyOverflowing) {
-            document.body.style.paddingRight = bodyPadding + this._scrollbarWidth + 'px';
+            document.body.style.paddingRight = bodyPadding + (this._scrollbarWidth + 'px');
          }
        }
      }, {

--- a/dist/js/umd/popover.js
+++ b/dist/js/umd/popover.js
@@ -140,7 +140,7 @@
      }, {
        key: '_getContent',
        value: function _getContent() {
-          return this.element.getAttribute('data-content') || (typeof this.config.content == 'function' ? this.config.content.call(this.element) : this.config.content);
+          return this.element.getAttribute('data-content') || (typeof this.config.content === 'function' ? this.config.content.call(this.element) : this.config.content);
        }
        // static

--- a/dist/js/umd/tab.js
+++ b/dist/js/umd/tab.js
@@ -100,7 +100,7 @@
        value: function show() {
          var _this = this;
-          if (this._element.parentNode && this._element.parentNode.nodeType == Node.ELEMENT_NODE && $(this._element).parent().hasClass(ClassName.ACTIVE)) {
+          if (this._element.parentNode && this._element.parentNode.nodeType === Node.ELEMENT_NODE && $(this._element).parent().hasClass(ClassName.ACTIVE)) {
            return;
          }
@@ -174,7 +174,7 @@
        key: '_activate',
        value: function _activate(element, container, callback) {
          var active = $(container).find(Selector.ACTIVE_CHILD)[0];
-          var isTransitioning = callback && _Util['default'].supportsTransitionEnd() && (active && $(active).hasClass(ClassName.FADE) || !!$(container).find(Selector.FADE_CHILD)[0]);
+          var isTransitioning = callback && _Util['default'].supportsTransitionEnd() && (active && $(active).hasClass(ClassName.FADE) || Boolean($(container).find(Selector.FADE_CHILD)[0]));
          var complete = $.proxy(this._transitionComplete, this, element, active, isTransitioning, callback);

--- a/dist/js/umd/tooltip.js
+++ b/dist/js/umd/tooltip.js
@@ -171,11 +171,9 @@
      }, {
        key: 'toggle',
        value: function toggle(event) {
-          var context = this;
-          var dataKey = this.constructor.DATA_KEY;
          if (event) {
-            context = $(event.currentTarget).data(dataKey);
+            var dataKey = this.constructor.DATA_KEY;
+            var context = $(event.currentTarget).data(dataKey);
            if (!context) {
              context = new this.constructor(event.currentTarget, this._getDelegateConfig());
@@ -190,7 +188,13 @@
              context._leave(null, context);
            }
          } else {
-            $(context.getTipElement()).hasClass(ClassName.IN) ? context._leave(null, context) : context._enter(null, context);
+            if ($(this.getTipElement()).hasClass(ClassName.IN)) {
+              this._leave(null, this);
+              return;
+            }
+            this._enter(null, this);
          }
        }
      }, {
@@ -255,9 +259,9 @@
            $(this.element).trigger(this.constructor.Event.INSERTED);
            this._tether = new Tether({
+              attachment: attachment,
              element: tip,
              target: this.element,
-              attachment: attachment,
              classes: TetherClass,
              classPrefix: CLASS_PREFIX,
              offset: this.config.offset,
@@ -280,7 +284,12 @@
              }
            };
-            _Util['default'].supportsTransitionEnd() && $(this.tip).hasClass(ClassName.FADE) ? $(this.tip).one(_Util['default'].TRANSITION_END, complete).emulateTransitionEnd(Tooltip._TRANSITION_DURATION) : complete();
+            if (_Util['default'].supportsTransitionEnd() && $(this.tip).hasClass(ClassName.FADE)) {
+              $(this.tip).one(_Util['default'].TRANSITION_END, complete).emulateTransitionEnd(Tooltip._TRANSITION_DURATION);
+              return;
+            }
+            complete();
          }
        }
      }, {
@@ -327,7 +336,7 @@
      }, {
        key: 'isWithContent',
        value: function isWithContent() {
-          return !!this.getTitle();
+          return Boolean(this.getTitle());
        }
      }, {
        key: 'getTipElement',
@@ -390,8 +399,8 @@
            if (trigger === 'click') {
              $(_this3.element).on(_this3.constructor.Event.CLICK, _this3.config.selector, $.proxy(_this3.toggle, _this3));
            } else if (trigger !== Trigger.MANUAL) {
-              var eventIn = trigger == Trigger.HOVER ? _this3.constructor.Event.MOUSEENTER : _this3.constructor.Event.FOCUSIN;
+              var eventIn = trigger === Trigger.HOVER ? _this3.constructor.Event.MOUSEENTER : _this3.constructor.Event.FOCUSIN;
-              var eventOut = trigger == Trigger.HOVER ? _this3.constructor.Event.MOUSELEAVE : _this3.constructor.Event.FOCUSOUT;
+              var eventOut = trigger === Trigger.HOVER ? _this3.constructor.Event.MOUSELEAVE : _this3.constructor.Event.FOCUSOUT;
              $(_this3.element).on(eventIn, _this3.config.selector, $.proxy(_this3._enter, _this3)).on(eventOut, _this3.config.selector, $.proxy(_this3._leave, _this3));
            }
@@ -433,7 +442,7 @@
          }
          if (event) {
-            context._activeTrigger[event.type == 'focusin' ? Trigger.FOCUS : Trigger.HOVER] = true;
+            context._activeTrigger[event.type === 'focusin' ? Trigger.FOCUS : Trigger.HOVER] = true;
          }
          if ($(context.getTipElement()).hasClass(ClassName.IN) || context._hoverState === HoverState.IN) {
@@ -469,7 +478,7 @@
          }
          if (event) {
-            context._activeTrigger[event.type == 'focusout' ? Trigger.FOCUS : Trigger.HOVER] = false;
+            context._activeTrigger[event.type === 'focusout' ? Trigger.FOCUS : Trigger.HOVER] = false;
          }
          if (context._isWithActiveTrigger()) {
@@ -525,9 +534,8 @@
          if (this.config) {
            for (var key in this.config) {
-              var value = this.config[key];
+              if (this.constructor.Default[key] !== this.config[key]) {
-              if (this.constructor.Default[key] !== value) {
+                config[key] = this.config[key];
-                config[key] = value;
              }
            }
          }

--- a/dist/js/umd/util.js
+++ b/dist/js/umd/util.js
@@ -65,9 +65,9 @@
      var el = document.createElement('bootstrap');
-      for (var name in TransitionEndEvent) {
+      for (var _name in TransitionEndEvent) {
-        if (el.style[name] !== undefined) {
+        if (el.style[_name] !== undefined) {
-          return { end: TransitionEndEvent[name] };
+          return { end: TransitionEndEvent[_name] };
        }
      }
@@ -113,7 +113,9 @@
      TRANSITION_END: 'bsTransitionEnd',
      getUID: function getUID(prefix) {
-        do prefix += ~ ~(Math.random() * 1000000); while (document.getElementById(prefix));
+        do {
+          prefix += ~ ~(Math.random() * 1000000);
+        } while (document.getElementById(prefix));
        return prefix;
      },
@@ -137,24 +139,28 @@
      },
      supportsTransitionEnd: function supportsTransitionEnd() {
-        return !!transition;
+        return Boolean(transition);
      },
      typeCheckConfig: function typeCheckConfig(componentName, config, configTypes) {
        for (var property in configTypes) {
+          if (configTypes.hasOwnProperty(property)) {
            var expectedTypes = configTypes[property];
            var value = config[property];
            var valueType = undefined;
-          if (value && isElement(value)) valueType = 'element';else valueType = toType(value);
+            if (value && isElement(value)) {
+              valueType = 'element';
+            } else {
+              valueType = toType(value);
+            }
            if (!new RegExp(expectedTypes).test(valueType)) {
              throw new Error(componentName.toUpperCase() + ': ' + ('Option "' + property + '" provided type "' + valueType + '" ') + ('but expected type "' + expectedTypes + '".'));
            }
          }
        }
+      }
    };
    setTransitionEndSupport();

--- a/js/.eslintrc
+++ b/js/.eslintrc
+{
+    "parser": "babel-eslint",
+    "env": {
+        "browser": true
+    },
+    "rules": {
+        // Possible Errors
+        "comma-dangle": [2, "never"],
+        "no-cond-assign": 2,
+        "no-console": 2,
+        "no-constant-condition": 2,
+        "no-control-regex": 2,
+        "no-debugger": 2,
+        "no-dupe-args": 2,
+        "no-dupe-keys": 2,
+        "no-duplicate-case": 2,
+        "no-empty-character-class": 2,
+        "no-empty": 2,
+        "no-ex-assign": 2,
+        "no-extra-boolean-cast": 2,
+        "no-extra-parens": 0,
+        "no-extra-semi": 2,
+        "no-func-assign": 2,
+        "no-inner-declarations": 2,
+        "no-invalid-regexp": 2,
+        "no-irregular-whitespace": 0,
+        "no-negated-in-lhs": 2,
+        "no-obj-calls": 2,
+        "no-regex-spaces": 2,
+        "no-sparse-arrays": 2,
+        "no-unreachable": 2,
+        "use-isnan": 2,
+        "valid-jsdoc": 0,
+        "valid-typeof": 2,
+        "no-unexpected-multiline": 2,
+        //Best Practices
+        "accessor-pairs": 2,
+        "block-scoped-var": 2,
+        "consistent-return": 2,
+        "curly": 2,
+        "default-case": 2,
+        "dot-notation": 0,
+        "dot-location": 0,
+        "eqeqeq": 2,
+        "guard-for-in": 2,
+        "no-alert": 2,
+        "no-caller": 2,
+        "no-div-regex": 2,
+        "no-else-return": 2,
+        "no-empty-label": 2,
+        "no-eq-null": 2,
+        "no-eval": 2,
+        "no-extend-native": 2,
+        "no-extra-bind": 2,
+        "no-fallthrough": 2,
+        "no-floating-decimal": 2,
+        "no-implicit-coercion": 2,
+        "no-implied-eval": 2,
+        "no-invalid-this": 0,
+        "no-iterator": 2,
+        "no-labels": 2,
+        "no-lone-blocks": 2,
+        "no-loop-func": 2,
+        "no-multi-spaces": 0,
+        "no-multi-str": 0,
+        "no-native-reassign": 2,
+        "no-new-func": 0,
+        "no-new-wrappers": 2,
+        "no-new": 2,
+        "no-octal-escape": 2,
+        "no-octal": 2,
+        "no-param-reassign": 0,
+        "no-process-env": 2,
+        "no-proto": 2,
+        "no-redeclare": 2,
+        "no-return-assign": 2,
+        "no-script-url": 2,
+        "no-self-compare": 2,
+        "no-sequences": 2,
+        "no-throw-literal": 2,
+        "no-unused-expressions": 2,
+        "no-useless-call": 2,
+        "no-void": 2,
+        "no-warning-comments": 0,
+        "no-with": 2,
+        "radix": 2,
+        "vars-on-top": 0,
+        "wrap-iife": 2,
+        "yoda": 2,
+        // Variables
+        "init-declarations": 0,
+        "no-catch-shadow": 2,
+        "no-delete-var": 2,
+        "no-label-var": 2,
+        "no-shadow-restricted-names": 2,
+        "no-shadow": 0,
+        "no-undef-init": 2,
+        "no-undef": 0,
+        "no-undefined": 0,
+        "no-unused-vars": 2,
+        "no-use-before-define": 0,
+        // Stylistic
+        "array-bracket-spacing": 2,
+        "block-spacing": 2,
+        "brace-style": 2,
+        "camelcase": 2,
+        "comma-spacing": 2,
+        "comma-style": 2,
+        "computed-property-spacing": 2,
+        "consistent-this": 2,
+        "eol-last": 2,
+        "func-names": 0,
+        "func-style": 0,
+        "indent": 0,
+        "key-spacing": 0,
+        "lines-around-comment": 0,
+        "linebreak-style": 2,
+        "new-cap": 0,
+        "new-parens": 2,
+        "newline-after-var": 0,
+        "no-array-constructor": 2,
+        "no-continue": 0,
+        "no-inline-comments": 0,
+        "no-lonely-if": 2,
+        "no-mixed-spaces-and-tabs": 2,
+        "no-multiple-empty-lines": 2,
+        "no-nested-ternary": 0,
+        "no-new-object": 2,
+        "no-spaced-func": 2,
+        "no-ternary": 0,
+        "no-trailing-spaces": 2,
+        "no-underscore-dangle": 0,
+        "no-unneeded-ternary": 2,
+        "object-curly-spacing": [1, "always"],
+        "one-var": 0,
+        "operator-assignment": 2,
+        "operator-linebreak": 0,
+        "padded-blocks": 0,
+        "quote-props": 0,
+        "quotes": 0,
+        "semi-spacing": 0,
+        "semi": [2, "never"],
+        "sort-vars": 2,
+        "space-after-keywords": 2,
+        "space-before-blocks": 2,
+        "space-before-function-paren": 0,
+        "space-in-parens": 2,
+        "space-infix-ops": 2,
+        "space-return-throw-case": 2,
+        "space-unary-ops": 2,
+        "spaced-comment": 2,
+        "spaced-comment": 2,
+        // es6
+        "arrow-parens": 2,
+        "arrow-spacing": 2,
+        "constructor-super": 2,
+        "generator-star-spacing": 2,
+        "no-class-assign": 2,
+        "no-const-assign": 2,
+        "no-dupe-class-members": 2,
+        "no-this-before-super": 2,
+        "no-var": 2,
+        "object-shorthand": 2,
+        "prefer-arrow-callback": 2,
+        "prefer-const": 0,
+        "prefer-spread": 2,
+        "prefer-reflect": 0,
+        "prefer-template": 2,
+        "require-yield": 2
+    }
+}
--- a/js/dist/util.js
+++ b/js/dist/util.js
 /**
 * --------------------------------------------------------------------------
 * Bootstrap (v4.0.0): util.js
@@ -100,7 +101,7 @@ var Util = (function ($) {
    TRANSITION_END: 'bsTransitionEnd',
    getUID: function getUID(prefix) {
-      do prefix += ~ ~(Math.random() * 1000000); while (document.getElementById(prefix));
+      do { prefix += ~ ~(Math.random() * 1000000); } while (document.getElementById(prefix));
      return prefix;
    },

--- a/js/src/alert.js
+++ b/js/src/alert.js
@@ -86,8 +86,8 @@ const Alert = (($) => {
    // private
    _getRootElement(element) {
-      let parent   = false
      let selector = Util.getSelectorFromElement(element)
+      let parent   = false
      if (selector) {
        parent = $(selector)[0]
@@ -101,7 +101,8 @@ const Alert = (($) => {
    }
    _triggerCloseEvent(element) {
-      var closeEvent = $.Event(Event.CLOSE)
+      let closeEvent = $.Event(Event.CLOSE)
      $(element).trigger(closeEvent)
      return closeEvent
    }

--- a/js/src/button.js
+++ b/js/src/button.js
@@ -20,7 +20,6 @@ const Button = (($) => {
  const EVENT_KEY           = `.${DATA_KEY}`
  const DATA_API_KEY        = '.data-api'
  const JQUERY_NO_CONFLICT  = $.fn[NAME]
-  const TRANSITION_DURATION = 150
  const ClassName = {
    ACTIVE : 'active',
@@ -137,7 +136,7 @@ const Button = (($) => {
   */
  $(document)
-    .on(Event.CLICK_DATA_API, Selector.DATA_TOGGLE_CARROT, function (event) {
+    .on(Event.CLICK_DATA_API, Selector.DATA_TOGGLE_CARROT, (event) => {
      event.preventDefault()
      let button = event.target
@@ -148,8 +147,8 @@ const Button = (($) => {
      Button._jQueryInterface.call($(button), 'toggle')
    })
-    .on(Event.FOCUS_BLUR_DATA_API, Selector.DATA_TOGGLE_CARROT, function (event) {
+    .on(Event.FOCUS_BLUR_DATA_API, Selector.DATA_TOGGLE_CARROT, (event) => {
-      var button = $(event.target).closest(Selector.BUTTON)[0]
+      let button = $(event.target).closest(Selector.BUTTON)[0]
      $(button).toggleClass(ClassName.FOCUS, /^focus(in)?$/.test(event.type))
    })

--- a/js/src/carousel.js
+++ b/js/src/carousel.js
@@ -171,13 +171,13 @@ const Carousel = (($) => {
        return
      }
-      if (activeIndex == index) {
+      if (activeIndex === index) {
        this.pause()
        this.cycle()
        return
      }
-      var direction = index > activeIndex ?
+      let direction = index > activeIndex ?
        Direction.NEXT :
        Direction.PREVIOUS
@@ -213,7 +213,7 @@ const Carousel = (($) => {
          .on(Event.KEYDOWN, $.proxy(this._keydown, this))
      }
-      if (this._config.pause == 'hover' &&
+      if (this._config.pause === 'hover' &&
        !('ontouchstart' in document.documentElement)) {
        $(this._element)
          .on(Event.MOUSEENTER, $.proxy(this.pause, this))
@@ -224,7 +224,9 @@ const Carousel = (($) => {
    _keydown(event) {
      event.preventDefault()
-      if (/input|textarea/i.test(event.target.tagName)) return
+      if (/input|textarea/i.test(event.target.tagName)) {
+        return
+      }
      switch (event.which) {
        case 37: this.prev(); break
@@ -244,13 +246,13 @@ const Carousel = (($) => {
      let activeIndex     = this._getItemIndex(activeElement)
      let lastItemIndex   = (this._items.length - 1)
      let isGoingToWrap   = (isPrevDirection && activeIndex === 0) ||
-                            (isNextDirection && activeIndex == lastItemIndex)
+                            (isNextDirection && activeIndex === lastItemIndex)
      if (isGoingToWrap && !this._config.wrap) {
        return activeElement
      }
-      let delta     = direction == Direction.PREVIOUS ? -1 : 1
+      let delta     = direction === Direction.PREVIOUS ? -1 : 1
      let itemIndex = (activeIndex + delta) % this._items.length
      return itemIndex === -1 ?
@@ -260,7 +262,7 @@ const Carousel = (($) => {
    _triggerSlideEvent(relatedTarget, directionalClassname) {
      let slideEvent = $.Event(Event.SLIDE, {
-        relatedTarget: relatedTarget,
+        relatedTarget,
        direction: directionalClassname
      })
@@ -290,9 +292,9 @@ const Carousel = (($) => {
      let nextElement   = element || activeElement &&
        this._getItemByDirection(direction, activeElement)
-      let isCycling = !!this._interval
+      let isCycling = Boolean(this._interval)
-      let directionalClassName = direction == Direction.NEXT ?
+      let directionalClassName = direction === Direction.NEXT ?
        ClassName.LEFT :
        ClassName.RIGHT
@@ -319,7 +321,7 @@ const Carousel = (($) => {
      this._setActiveIndicatorElement(nextElement)
-      var slidEvent = $.Event(Event.SLID, {
+      let slidEvent = $.Event(Event.SLID, {
        relatedTarget: nextElement,
        direction: directionalClassName
      })
@@ -386,7 +388,7 @@ const Carousel = (($) => {
          $(this).data(DATA_KEY, data)
        }
-        if (typeof config == 'number') {
+        if (typeof config === 'number') {
          data.to(config)
        } else if (action) {
@@ -413,8 +415,8 @@ const Carousel = (($) => {
      }
      let config     = $.extend({}, $(target).data(), $(this).data())
      let slideIndex = this.getAttribute('data-slide-to')
      if (slideIndex) {
        config.interval = false
      }
@@ -440,7 +442,7 @@ const Carousel = (($) => {
  $(document)
    .on(Event.CLICK_DATA_API, Selector.DATA_SLIDE, Carousel._dataApiClickHandler)
-  $(window).on(Event.LOAD_DATA_API, function () {
+  $(window).on(Event.LOAD_DATA_API, () => {
    $(Selector.DATA_RIDE).each(function () {
      let $carousel = $(this)
      Carousel._jQueryInterface.call($carousel, $carousel.data())

--- a/js/src/collapse.js
+++ b/js/src/collapse.js
@@ -182,15 +182,14 @@ const Collapse = (($) => {
        return
      }
-      let scrollSize = 'scroll'
+      let capitalizedDimension = dimension[0].toUpperCase() + dimension.slice(1)
-        + (dimension[0].toUpperCase()
+      let scrollSize           = `scroll${capitalizedDimension}`
-        + dimension.slice(1))
      $(this._element)
        .one(Util.TRANSITION_END, complete)
        .emulateTransitionEnd(TRANSITION_DURATION)
-      this._element.style[dimension] = this._element[scrollSize] + 'px'
+      this._element.style[dimension] = `${this._element[scrollSize]}px`
    }
    hide() {
@@ -209,7 +208,7 @@ const Collapse = (($) => {
      let offsetDimension = dimension === Dimension.WIDTH ?
        'offsetWidth' : 'offsetHeight'
-      this._element.style[dimension] = this._element[offsetDimension] + 'px'
+      this._element.style[dimension] = `${this._element[offsetDimension]}px`
      Util.reflow(this._element)
@@ -239,7 +238,8 @@ const Collapse = (($) => {
      this._element.style[dimension] = 0
      if (!Util.supportsTransitionEnd()) {
-        return complete()
+        complete()
+        return
      }
      $(this._element)
@@ -266,7 +266,7 @@ const Collapse = (($) => {
    _getConfig(config) {
      config = $.extend({}, Default, config)
-      config.toggle = !!config.toggle // coerce string values
+      config.toggle = Boolean(config.toggle) // coerce string values
      Util.typeCheckConfig(NAME, config, DefaultType)
      return config
    }
@@ -351,7 +351,6 @@ const Collapse = (($) => {
    event.preventDefault()
    let target = Collapse._getTargetFromElement(this)
    let data   = $(target).data(DATA_KEY)
    let config = data ? 'toggle' : $(this).data()

--- a/js/src/dropdown.js
+++ b/js/src/dropdown.js
@@ -78,7 +78,7 @@ const Dropdown = (($) => {
    toggle() {
      if (this.disabled || $(this).hasClass(ClassName.DISABLED)) {
-        return
+        return false
      }
      let parent   = Dropdown._getParentFromElement(this)
@@ -106,7 +106,7 @@ const Dropdown = (($) => {
      $(parent).trigger(showEvent)
      if (showEvent.isDefaultPrevented()) {
-        return
+        return false
      }
      this.focus()
@@ -239,9 +239,17 @@ const Dropdown = (($) => {
      let index = items.indexOf(event.target)
-      if (event.which === 38 && index > 0)                index--  // up
+      if (event.which === 38 && index > 0) { // up
-      if (event.which === 40 && index < items.length - 1) index++  // down
+        index--
-      if (!~index)                                        index = 0
+      }
+      if (event.which === 40 && index < items.length - 1) { // down
+        index++
+      }
+      if (!~index) {
+        index = 0
+      }
      items[index].focus()
    }
@@ -261,7 +269,7 @@ const Dropdown = (($) => {
    .on(Event.KEYDOWN_DATA_API, Selector.ROLE_LISTBOX, Dropdown._dataApiKeydownHandler)
    .on(Event.CLICK_DATA_API, Dropdown._clearMenus)
    .on(Event.CLICK_DATA_API, Selector.DATA_TOGGLE, Dropdown.prototype.toggle)
-    .on(Event.CLICK_DATA_API, Selector.FORM_CHILD,  function (e) {
+    .on(Event.CLICK_DATA_API, Selector.FORM_CHILD, (e) => {
      e.stopPropagation()
    })

--- a/js/src/modal.js
+++ b/js/src/modal.js
@@ -110,7 +110,7 @@ const Modal = (($) => {
    show(relatedTarget) {
      let showEvent = $.Event(Event.SHOW, {
-        relatedTarget: relatedTarget
+        relatedTarget
      })
      $(this._element).trigger(showEvent)
@@ -231,14 +231,18 @@ const Modal = (($) => {
      $(this._element).addClass(ClassName.IN)
-      if (this._config.focus) this._enforceFocus()
+      if (this._config.focus) {
+        this._enforceFocus()
+      }
      let shownEvent = $.Event(Event.SHOWN, {
-        relatedTarget: relatedTarget
+        relatedTarget
      })
      let transitionComplete = () => {
-        if (this._config.focus) this._element.focus()
+        if (this._config.focus) {
+          this._element.focus()
+        }
        $(this._element).trigger(shownEvent)
      }
@@ -389,11 +393,11 @@ const Modal = (($) => {
        this._element.scrollHeight > document.documentElement.clientHeight
      if (!this._isBodyOverflowing && isModalOverflowing) {
-        this._element.style.paddingLeft = this._scrollbarWidth + 'px'
+        this._element.style.paddingLeft = `${this._scrollbarWidth}px`
      }
      if (this._isBodyOverflowing && !isModalOverflowing) {
-        this._element.style.paddingRight = this._scrollbarWidth + 'px'
+        this._element.style.paddingRight = `${this._scrollbarWidth}px~`
      }
    }
@@ -423,7 +427,7 @@ const Modal = (($) => {
      if (this._isBodyOverflowing) {
        document.body.style.paddingRight =
-          bodyPadding + this._scrollbarWidth + 'px'
+          bodyPadding + `${this._scrollbarWidth}px`
      }
    }

--- a/js/src/popover.js
+++ b/js/src/popover.js
@@ -141,7 +141,7 @@ const Popover = (($) => {
    _getContent() {
      return this.element.getAttribute('data-content')
-        || (typeof this.config.content == 'function' ?
+        || (typeof this.config.content === 'function' ?
              this.config.content.call(this.element) :
              this.config.content)
    }

--- a/js/src/scrollspy.js
+++ b/js/src/scrollspy.js
@@ -293,7 +293,7 @@ const ScrollSpy = (($) => {
   * ------------------------------------------------------------------------
   */
-  $(window).on(Event.LOAD_DATA_API, function () {
+  $(window).on(Event.LOAD_DATA_API, () => {
    let scrollSpys = $.makeArray($(Selector.DATA_SPY))
    for (let i = scrollSpys.length; i--;) {

--- a/js/src/tab.js
+++ b/js/src/tab.js
@@ -77,7 +77,7 @@ const Tab = (($) => {
    show() {
      if (this._element.parentNode &&
-         (this._element.parentNode.nodeType == Node.ELEMENT_NODE) &&
+         (this._element.parentNode.nodeType === Node.ELEMENT_NODE) &&
         ($(this._element).parent().hasClass(ClassName.ACTIVE))) {
        return
      }
@@ -157,7 +157,7 @@ const Tab = (($) => {
      let isTransitioning = callback
        && Util.supportsTransitionEnd()
        && ((active && $(active).hasClass(ClassName.FADE))
-           || !!$(container).find(Selector.FADE_CHILD)[0])
+           || Boolean($(container).find(Selector.FADE_CHILD)[0]))
      let complete = $.proxy(
        this._transitionComplete,

--- a/js/src/tooltip.js
+++ b/js/src/tooltip.js
@@ -174,11 +174,9 @@ const Tooltip = (($) => {
    }
    toggle(event) {
-      let context = this
-      let dataKey = this.constructor.DATA_KEY
      if (event) {
-        context = $(event.currentTarget).data(dataKey)
+        let dataKey = this.constructor.DATA_KEY
+        let context = $(event.currentTarget).data(dataKey)
        if (!context) {
          context = new this.constructor(
@@ -197,9 +195,13 @@ const Tooltip = (($) => {
        }
      } else {
-        $(context.getTipElement()).hasClass(ClassName.IN) ?
-          context._leave(null, context) :
+        if ($(this.getTipElement()).hasClass(ClassName.IN)) {
-          context._enter(null, context)
+          this._leave(null, this)
+          return
+        }
+        this._enter(null, this)
      }
    }
@@ -267,9 +269,9 @@ const Tooltip = (($) => {
        $(this.element).trigger(this.constructor.Event.INSERTED)
        this._tether = new Tether({
+          attachment,
          element     : tip,
          target      : this.element,
-          attachment  : attachment,
          classes     : TetherClass,
          classPrefix : CLASS_PREFIX,
          offset      : this.config.offset,
@@ -292,10 +294,13 @@ const Tooltip = (($) => {
          }
        }
-        Util.supportsTransitionEnd() && $(this.tip).hasClass(ClassName.FADE) ?
+        if (Util.supportsTransitionEnd() && $(this.tip).hasClass(ClassName.FADE)) {
          $(this.tip)
            .one(Util.TRANSITION_END, complete)
-            .emulateTransitionEnd(Tooltip._TRANSITION_DURATION) :
+            .emulateTransitionEnd(Tooltip._TRANSITION_DURATION)
+          return
+        }
        complete()
      }
    }
@@ -343,7 +348,7 @@ const Tooltip = (($) => {
    // protected
    isWithContent() {
-      return !!this.getTitle()
+      return Boolean(this.getTitle())
    }
    getTipElement() {
@@ -407,10 +412,10 @@ const Tooltip = (($) => {
          )
        } else if (trigger !== Trigger.MANUAL) {
-          let eventIn  = trigger == Trigger.HOVER ?
+          let eventIn  = trigger === Trigger.HOVER ?
            this.constructor.Event.MOUSEENTER :
            this.constructor.Event.FOCUSIN
-          let eventOut = trigger == Trigger.HOVER ?
+          let eventOut = trigger === Trigger.HOVER ?
            this.constructor.Event.MOUSELEAVE :
            this.constructor.Event.FOCUSOUT
@@ -471,7 +476,7 @@ const Tooltip = (($) => {
      if (event) {
        context._activeTrigger[
-          event.type == 'focusin' ? Trigger.FOCUS : Trigger.HOVER
+          event.type === 'focusin' ? Trigger.FOCUS : Trigger.HOVER
        ] = true
      }
@@ -512,7 +517,7 @@ const Tooltip = (($) => {
      if (event) {
        context._activeTrigger[
-          event.type == 'focusout' ? Trigger.FOCUS : Trigger.HOVER
+          event.type === 'focusout' ? Trigger.FOCUS : Trigger.HOVER
        ] = false
      }
@@ -575,9 +580,8 @@ const Tooltip = (($) => {
      if (this.config) {
        for (let key in this.config) {
-          let value = this.config[key]
+          if (this.constructor.Default[key] !== this.config[key]) {
-          if (this.constructor.Default[key] !== value) {
+            config[key] = this.config[key]
-            config[key] = value
          }
        }
      }

--- a/js/src/util.js
+++ b/js/src/util.js
@@ -29,14 +29,14 @@ const Util = (($) => {
  }
  function isElement(obj) {
-    return (obj[0] || obj).nodeType;
+    return (obj[0] || obj).nodeType
  }
  function getSpecialTransitionEndEvent() {
    return {
      bindType: transition.end,
      delegateType: transition.end,
-      handle: function (event) {
+      handle(event) {
        if ($(event.target).is(this)) {
          return event.handleObj.handler.apply(this, arguments)
        }
@@ -51,7 +51,7 @@ const Util = (($) => {
    let el = document.createElement('bootstrap')
-    for (var name in TransitionEndEvent) {
+    for (let name in TransitionEndEvent) {
      if (el.style[name] !== undefined) {
        return { end: TransitionEndEvent[name] }
      }
@@ -63,7 +63,7 @@ const Util = (($) => {
  function transitionEndEmulator(duration) {
    let called = false
-    $(this).one(Util.TRANSITION_END, function () {
+    $(this).one(Util.TRANSITION_END, () => {
      called = true
    })
@@ -98,8 +98,9 @@ const Util = (($) => {
    TRANSITION_END: 'bsTransitionEnd',
    getUID(prefix) {
-      do prefix += ~~(Math.random() * 1000000)
+      do {
-      while (document.getElementById(prefix))
+        prefix += ~~(Math.random() * 1000000)
+      } while (document.getElementById(prefix))
      return prefix
    },
@@ -123,18 +124,21 @@ const Util = (($) => {
    },
    supportsTransitionEnd() {
-      return !!transition
+      return Boolean(transition)
    },
    typeCheckConfig(componentName, config, configTypes) {
      for (let property in configTypes) {
+        if (configTypes.hasOwnProperty(property)) {
          let expectedTypes = configTypes[property]
          let value         = config[property]
          let valueType
-        if (value && isElement(value)) valueType = 'element'
+          if (value && isElement(value)) {
-        else valueType = toType(value)
+            valueType = 'element'
+          } else {
+            valueType = toType(value)
+          }
          if (!new RegExp(expectedTypes).test(valueType)) {
            throw new Error(
@@ -144,7 +148,7 @@ const Util = (($) => {
          }
        }
      }
+    }
  }
  setTransitionEndSupport()

--- a/js/tests/unit/phantom.js
+++ b/js/tests/unit/phantom.js
@@ -76,29 +76,26 @@
 // shoutout mdn: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind#Polyfill
 if (!Function.prototype.bind) {
-  Function.prototype.bind = function(oThis) {
+  Function.prototype.bind = function (oThis) {
    if (typeof this !== 'function') {
      // closest thing possible to the ECMAScript 5
      // internal IsCallable function
      throw new TypeError('Function.prototype.bind - what is trying to be bound is not callable');
    }
-    var aArgs   = Array.prototype.slice.call(arguments, 1),
+    var aArgs   = Array.prototype.slice.call(arguments, 1)
-        fToBind = this,
+    var fToBind = this
-        fNOP    = function() {},
+    var FNOP    = function () {}
-        fBound  = function() {
+    var fBound  = function () {
-          return fToBind.apply(this instanceof fNOP
+      return fToBind.apply(this instanceof FNOP ? this : oThis, aArgs.concat(Array.prototype.slice.call(arguments)))
-                 ? this
+    }
-                 : oThis,
-                 aArgs.concat(Array.prototype.slice.call(arguments)));
-        };
    if (this.prototype) {
      // native functions don't have a prototype
-      fNOP.prototype = this.prototype;
+      FNOP.prototype = this.prototype
    }
-    fBound.prototype = new fNOP();
+    fBound.prototype = new FNOP()
-    return fBound;
+    return fBound
-  };
+  }
 }
--- a/js/tests/visual/dropdown.html
+++ b/js/tests/visual/dropdown.html
@@ -22,68 +22,72 @@
    <h1>Dropdown <small>Bootstrap Visual Test</small></h1>
  </div>
-  <nav id="navbar-example" class="navbar navbar-default navbar-static-top" role="navigation">
+  <nav id="navbar-example" class="navbar navbar-light bg-faded" role="navigation">
-    <div class="container-fluid">
    <button class="navbar-toggler hidden-sm-up" type="button" data-toggle="collapse" data-target="#exCollapsingNavbar2">
      &#9776;
    </button>
    <div class="collapse navbar-toggleable-xs" id="exCollapsingNavbar2">
      <ul class="nav navbar-nav pull-left">
        <li class="dropdown nav-item">
          <a id="drop1" href="#" role="button" class="dropdown-toggle nav-link" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            Dropdown
          </a>
-            <ul class="dropdown-menu" aria-labelledby="drop1">
+          <div class="dropdown-menu" aria-labelledby="drop1">
-              <li><a href="https://twitter.com/fat">Action</a></li>
+            <a class="dropdown-item" href="https://twitter.com/fat">Action</a>
-              <li><a href="https://twitter.com/fat">Another action</a></li>
+            <a class="dropdown-item" href="https://twitter.com/fat">Another action</a>
-              <li><a href="https://twitter.com/fat">Something else here</a></li>
+            <a class="dropdown-item" href="https://twitter.com/fat">Something else here</a>
-              <li role="separator" class="divider"></li>
+            <div class="dropdown-divider"></div>
-              <li><a href="https://twitter.com/fat">Separated link</a></li>
+            <a class="dropdown-item" href="https://twitter.com/fat">Separated link</a>
-            </ul>
+          </div>
        </li>
        <li class="dropdown nav-item">
          <a href="#" id="drop2" role="button" class="dropdown-toggle nav-link" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            Dropdown 2
          </a>
-            <ul class="dropdown-menu" aria-labelledby="drop2">
+          <div class="dropdown-menu" aria-labelledby="drop2">
-              <li><a href="https://twitter.com/fat">Action</a></li>
+            <a class="dropdown-item" href="https://twitter.com/fat">Action</a>
-              <li><a href="https://twitter.com/fat">Another action</a></li>
+            <a class="dropdown-item" href="https://twitter.com/fat">Another action</a>
-              <li><a href="https://twitter.com/fat">Something else here</a></li>
+            <a class="dropdown-item" href="https://twitter.com/fat">Something else here</a>
-              <li role="separator" class="divider"></li>
+            <div class="dropdown-divider"></div>
-              <li><a href="https://twitter.com/fat">Separated link</a></li>
+            <a class="dropdown-item" href="https://twitter.com/fat">Separated link</a>
-            </ul>
+          </div>
        </li>
      </ul>
      <ul class="nav navbar-nav pull-right">
        <li id="fat-menu" class="dropdown nav-item">
          <a href="#" id="drop3" role="button" class="dropdown-toggle nav-link" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            Dropdown 3
          </a>
-            <ul class="dropdown-menu" aria-labelledby="drop3">
+          <div class="dropdown-menu" aria-labelledby="drop3">
-              <li><a href="https://twitter.com/fat">Action</a></li>
+            <a class="dropdown-item" href="https://twitter.com/fat">Action</a>
-              <li><a href="https://twitter.com/fat">Another action</a></li>
+            <a class="dropdown-item" href="https://twitter.com/fat">Another action</a>
-              <li><a href="https://twitter.com/fat">Something else here</a></li>
+            <a class="dropdown-item" href="https://twitter.com/fat">Something else here</a>
-              <li role="separator" class="divider"></li>
+            <div class="dropdown-divider"></div>
-              <li><a href="https://twitter.com/fat">Separated link</a></li>
+            <a class="dropdown-item" href="https://twitter.com/fat">Separated link</a>
-            </ul>
+          </div>
        </li>
      </ul>
    </div>
-    </div>
  </nav>
-  <ul class="nav nav-pills">
+  <ul class="nav nav-pills m-t-lg">
    <li class="active nav-item"><a href="#" class="nav-link">Regular link</a></li>
    <li class="dropdown nav-item">
      <a id="drop4" class="nav-link" role="button" data-toggle="dropdown" href="#" aria-haspopup="true" aria-expanded="false">
        Dropdown
      </a>
      <ul id="menu1" class="dropdown-menu" aria-labelledby="drop4">
-        <li><a href="https://twitter.com/fat">Action</a></li>
+        <a class="dropdown-item" href="https://twitter.com/fat">Action</a>
-        <li><a href="https://twitter.com/fat">Another action</a></li>
+        <a class="dropdown-item" href="https://twitter.com/fat">Another action</a>
-        <li><a href="https://twitter.com/fat">Something else here</a></li>
+        <a class="dropdown-item" href="https://twitter.com/fat">Something else here</a>
-        <li role="separator" class="divider"></li>
+        <div class="dropdown-divider"></div>
-        <li><a href="https://twitter.com/fat">Separated link</a></li>
+        <a class="dropdown-item" href="https://twitter.com/fat">Separated link</a>
      </ul>
    </li>
    <li class="dropdown nav-item">
@@ -91,11 +95,11 @@
        Dropdown 2
      </a>
      <ul id="menu2" class="dropdown-menu" aria-labelledby="drop5">
-        <li><a href="https://twitter.com/fat">Action</a></li>
+        <a class="dropdown-item" href="https://twitter.com/fat">Action</a>
-        <li><a href="https://twitter.com/fat">Another action</a></li>
+        <a class="dropdown-item" href="https://twitter.com/fat">Another action</a>
-        <li><a href="https://twitter.com/fat">Something else here</a></li>
+        <a class="dropdown-item" href="https://twitter.com/fat">Something else here</a>
-        <li role="separator" class="divider"></li>
+        <div class="dropdown-divider"></div>
-        <li><a href="https://twitter.com/fat">Separated link</a></li>
+        <a class="dropdown-item" href="https://twitter.com/fat">Separated link</a>
      </ul>
    </li>
  </ul>

--- a/js/tests/visual/modal.html
+++ b/js/tests/visual/modal.html
@@ -25,30 +25,30 @@
 </head>
 <body>
-<nav class="navbar navbar-default navbar-static-top">
+<nav class="navbar navbar-dark bg-inverse navbar-static-top">
-  <div class="container-fluid">
+  <button class="navbar-toggler hidden-sm-up" type="button" data-toggle="collapse" data-target="#exCollapsingNavbar2">
-    <div class="navbar-header">
+    &#9776;
-      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
-        <span class="sr-only">Toggle navigation</span>
-        <span class="icon-bar"></span>
-        <span class="icon-bar"></span>
-        <span class="icon-bar"></span>
  </button>
-      <a class="navbar-brand" href="#">navbar-static-top</a>
+  <div class="collapse navbar-toggleable-xs" id="exCollapsingNavbar2">
-    </div>
+    <a class="navbar-brand" href="#">This shouldn't jump!</a>
-    <div id="navbar" class="navbar-collapse collapse">
    <ul class="nav navbar-nav">
-        <li><a href="#about">About</a></li>
+      <li class="nav-item active">
-        <li><a href="#contact">Contact</a></li>
+        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
-      </ul>
+      </li>
-      <ul class="nav navbar-nav navbar-right">
+      <li class="nav-item">
-        <li><a href="#">This should not jump to the left when the modal is shown.</a></li>
+        <a class="nav-link" href="#">Features</a>
+      </li>
+      <li class="nav-item">
+        <a class="nav-link" href="#">Pricing</a>
+      </li>
+      <li class="nav-item">
+        <a class="nav-link" href="#">About</a>
+      </li>
    </ul>
-    </div><!--/.nav-collapse -->
  </div>
 </nav>
-<div class="container">
+<div class="container m-t-lg">
  <div class="page-header">
    <h1>Modal <small>Bootstrap Visual Test</small></h1>
@@ -67,7 +67,7 @@
          <p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</p>
          <h4>Popover in a modal</h4>
-          <p>This <a href="#" role="button" class="btn btn-default js-popover" title="A Title" data-content="And here's some amazing content. It's very engaging. right?" data-placement="left">button</a> should trigger a popover on click.</p>
+          <p>This <a href="#" role="button" class="btn btn-primary js-popover" title="A Title" data-content="And here's some amazing content. It's very engaging. right?" data-placement="left">button</a> should trigger a popover on click.</p>
          <h4>Tooltips in a modal</h4>
          <p><a href="#" class="js-tooltip" title="Tooltip">This link</a> and <a href="#" class="js-tooltip" title="Tooltip">that link</a> should have tooltips on hover.</p>
@@ -141,10 +141,13 @@
 <!-- JavaScript Includes -->
 <script src="../vendor/jquery.min.js"></script>
+<script src="../vendor/tether.min.js"></script>
 <script src="../../dist/util.js"></script>
 <script src="../../dist/modal.js"></script>
 <script src="../../dist/collapse.js"></script>
+<script src="../../dist/tooltip.js"></script>
+<script src="../../dist/popover.js"></script>
 <!-- <script src="../../transition.js"></script>
 <script src="../../tooltip.js"></script>
@@ -153,11 +156,11 @@
 <!-- JavaScript Test -->
 <script>
 $(function () {
-  // $('.js-popover').popover()
+  $('.js-popover').popover()
-  // $('.js-tooltip').tooltip()
+  $('.js-tooltip').tooltip()
-  // $('#tall-toggle').click(function () {
+  $('#tall-toggle').click(function () {
-  //   $('#tall').toggle()
+    $('#tall').toggle()
-  // })
+  })
 })
 </script>

--- a/package.json
+++ b/package.json
@@ -28,6 +28,7 @@
  },
  "license": "MIT",
  "devDependencies": {
+    "babel-eslint": "^4.0.10",
    "btoa": "~1.1.2",
    "glob": "~5.0.3",
    "grunt": "~0.4.5",
@@ -48,6 +49,7 @@
    "grunt-contrib-uglify": "~0.8.0",
    "grunt-contrib-watch": "~0.6.1",
    "grunt-csscomb": "~3.0.0",
+    "grunt-eslint": "^17.1.0",
    "grunt-exec": "~0.4.6",
    "grunt-html": "~4.0.1",
    "grunt-jekyll": "~0.4.2",