some minor alert shit

js/dist/alert.js

@@ -93,8 +93,8 @@ var Alert = (function ($) {
     }, {
       key: '_getRootElement',
       value: function _getRootElement(element) {
-        var parent = false;
         var selector = Util.getSelectorFromElement(element);
+        var parent = false;
 
         if (selector) {
           parent = $(selector)[0];
@@ -110,6 +110,7 @@ var Alert = (function ($) {
       key: '_triggerCloseEvent',
       value: function _triggerCloseEvent(element) {
         var closeEvent = $.Event(Event.CLOSE);
+
         $(element).trigger(closeEvent);
         return closeEvent;
       }
@@ -123,7 +124,7 @@ var Alert = (function ($) {
           return;
         }
 
-        $(element).one(Util.TRANSITION_END, this._destroyElement.bind(this, element)).emulateTransitionEnd(TRANSITION_DURATION);
+        $(element).one(Util.TRANSITION_END, $.proxy(this._destroyElement, this, element)).emulateTransitionEnd(TRANSITION_DURATION);
       }
     }, {
       key: '_destroyElement',

js/dist/button.js

@@ -25,7 +25,6 @@ var Button = (function ($) {
   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',

js/dist/carousel.js

@@ -177,7 +177,7 @@ var Carousel = (function ($) {
           return;
         }
 
-        if (activeIndex == index) {
+        if (activeIndex === index) {
           this.pause();
           this.cycle();
           return;
@@ -219,7 +219,7 @@ var Carousel = (function ($) {
           $(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));
         }
       }
@@ -228,7 +228,9 @@ var Carousel = (function ($) {
       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:
@@ -252,13 +254,13 @@ var Carousel = (function ($) {
         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];
@@ -296,9 +298,9 @@ var Carousel = (function ($) {
         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;
@@ -383,7 +385,7 @@ var Carousel = (function ($) {
             $(this).data(DATA_KEY, data);
           }
 
-          if (typeof config == 'number') {
+          if (typeof config === 'number') {
             data.to(config);
           } else if (action) {
             data[action]();
@@ -409,8 +411,8 @@ var Carousel = (function ($) {
         }
 
         var config = $.extend({}, $(target).data(), $(this).data());
-
         var slideIndex = this.getAttribute('data-slide-to');
+
         if (slideIndex) {
           config.interval = false;
         }

js/dist/collapse.js

@@ -175,7 +175,8 @@ var Collapse = (function ($) {
           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.TRANSITION_END, complete).emulateTransitionEnd(TRANSITION_DURATION);
 
@@ -221,7 +222,8 @@ var Collapse = (function ($) {
         this._element.style[dimension] = 0;
 
         if (!Util.supportsTransitionEnd()) {
-          return complete();
+          complete();
+          return;
         }
 
         $(this._element).one(Util.TRANSITION_END, complete).emulateTransitionEnd(TRANSITION_DURATION);
@@ -249,7 +251,7 @@ var Collapse = (function ($) {
       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.typeCheckConfig(NAME, config, DefaultType);
         return config;
       }
@@ -335,7 +337,6 @@ var Collapse = (function ($) {
     event.preventDefault();
 
     var target = Collapse._getTargetFromElement(this);
-
     var data = $(target).data(DATA_KEY);
     var config = data ? 'toggle' : $(this).data();
 

js/dist/dropdown.js

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

js/dist/modal.js

@@ -230,14 +230,18 @@ var Modal = (function ($) {
 
         $(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);
         };
 
@@ -394,7 +398,7 @@ var Modal = (function ($) {
         }
 
         if (this._isBodyOverflowing && !isModalOverflowing) {
-          this._element.style.paddingRight = this._scrollbarWidth + 'px';
+          this._element.style.paddingRight = this._scrollbarWidth + 'px~';
         }
       }
     }, {
@@ -423,7 +427,7 @@ var Modal = (function ($) {
         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');
         }
       }
     }, {

js/dist/popover.js

@@ -123,7 +123,7 @@ var Popover = (function ($) {
     }, {
       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

js/dist/scrollspy.js

@@ -45,6 +45,8 @@ var ScrollSpy = (function ($) {
   };
 
   var ClassName = {
+    DROPDOWN_TOGGLE: 'dropdown-toggle',
+    DROPDOWN_ITEM: 'dropdown-item',
     DROPDOWN_MENU: 'dropdown-menu',
     ACTIVE: 'active'
   };
@@ -52,9 +54,9 @@ var ScrollSpy = (function ($) {
   var Selector = {
     DATA_SPY: '[data-spy="scroll"]',
     ACTIVE: '.active',
-    LI: 'li',
     LI_DROPDOWN: 'li.dropdown',
-    NAV_ANCHORS: '.nav li > a'
+    NAV_LINKS: '.nav-link',
+    DROPDOWN_ITEMS: '.dropdown-item'
   };
 
   var OffsetMethod = {
@@ -75,7 +77,7 @@ var ScrollSpy = (function ($) {
       this._element = element;
       this._scrollElement = element.tagName === 'BODY' ? window : element;
       this._config = this._getConfig(config);
-      this._selector = this._config.target + ' ' + Selector.NAV_ANCHORS;
+      this._selector = this._config.target + ' ' + Selector.NAV_LINKS + ',' + (this._config.target + ' ' + Selector.DROPDOWN_ITEMS);
       this._offsets = [];
       this._targets = [];
       this._activeTarget = null;
@@ -223,22 +225,18 @@ var ScrollSpy = (function ($) {
 
         this._clear();
 
-        var selector = this._selector + '[data-target="' + target + '"],' + (this._selector + '[href="' + target + '"]');
-
-        // todo (fat): getting all the raw li's up the tree is not great.
-        var parentListItems = $(selector).parents(Selector.LI);
-
-        for (var i = parentListItems.length; i--;) {
-          $(parentListItems[i]).addClass(ClassName.ACTIVE);
-
-          var itemParent = parentListItems[i].parentNode;
+        var queries = this._selector.split(',');
+        queries = queries.map(function (selector) {
+          return selector + '[data-target="' + target + '"],' + (selector + '[href="' + target + '"]');
+        });
+        var $link = $(queries.join(','));
 
-          if (itemParent && $(itemParent).hasClass(ClassName.DROPDOWN_MENU)) {
-            var closestDropdown = $(itemParent).closest(Selector.LI_DROPDOWN)[0];
-            $(closestDropdown).addClass(ClassName.ACTIVE);
-          }
+        if ($link.hasClass(ClassName.DROPDOWN_ITEM)) {
+          $link.parent().find(ClassName.DROPDOWN_TOGGLE).addClass(ClassName.ACTIVE);
         }
 
+        $link.addClass(ClassName.ACTIVE);
+
         $(this._scrollElement).trigger(Event.ACTIVATE, {
           relatedTarget: target
         });
@@ -246,11 +244,8 @@ var ScrollSpy = (function ($) {
     }, {
       key: '_clear',
       value: function _clear() {
-        var activeParents = $(this._selector).parentsUntil(this._config.target, Selector.ACTIVE);
-
-        for (var i = activeParents.length; i--;) {
-          $(activeParents[i]).removeClass(ClassName.ACTIVE);
-        }
+        debugger;
+        $(this._selector).filter(ClassName.ACTIVE).removeClass(Selector.ACTIVE);
       }
 
       // static

js/dist/tab.js

@@ -83,7 +83,7 @@ var Tab = (function ($) {
       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;
         }
 
@@ -157,7 +157,7 @@ var Tab = (function ($) {
       key: '_activate',
       value: function _activate(element, container, callback) {
         var active = $(container).find(Selector.ACTIVE_CHILD)[0];
-        var isTransitioning = callback && Util.supportsTransitionEnd() && (active && $(active).hasClass(ClassName.FADE) || !!$(container).find(Selector.FADE_CHILD)[0]);
+        var isTransitioning = callback && Util.supportsTransitionEnd() && (active && $(active).hasClass(ClassName.FADE) || Boolean($(container).find(Selector.FADE_CHILD)[0]));
 
         var complete = $.proxy(this._transitionComplete, this, element, active, isTransitioning, callback);
 

js/dist/tooltip.js

@@ -154,11 +154,9 @@ var Tooltip = (function ($) {
     }, {
       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());
@@ -173,7 +171,13 @@ var Tooltip = (function ($) {
             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);
         }
       }
     }, {
@@ -238,9 +242,9 @@ var Tooltip = (function ($) {
           $(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,
@@ -263,7 +267,12 @@ var Tooltip = (function ($) {
             }
           };
 
-          Util.supportsTransitionEnd() && $(this.tip).hasClass(ClassName.FADE) ? $(this.tip).one(Util.TRANSITION_END, complete).emulateTransitionEnd(Tooltip._TRANSITION_DURATION) : complete();
+          if (Util.supportsTransitionEnd() && $(this.tip).hasClass(ClassName.FADE)) {
+            $(this.tip).one(Util.TRANSITION_END, complete).emulateTransitionEnd(Tooltip._TRANSITION_DURATION);
+            return;
+          }
+
+          complete();
         }
       }
     }, {
@@ -310,7 +319,7 @@ var Tooltip = (function ($) {
     }, {
       key: 'isWithContent',
       value: function isWithContent() {
-        return !!this.getTitle();
+        return Boolean(this.getTitle());
       }
     }, {
       key: 'getTipElement',
@@ -373,8 +382,8 @@ var Tooltip = (function ($) {
           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 eventOut = trigger == Trigger.HOVER ? _this3.constructor.Event.MOUSELEAVE : _this3.constructor.Event.FOCUSOUT;
+            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;
 
             $(_this3.element).on(eventIn, _this3.config.selector, $.proxy(_this3._enter, _this3)).on(eventOut, _this3.config.selector, $.proxy(_this3._leave, _this3));
           }
@@ -416,7 +425,7 @@ var Tooltip = (function ($) {
         }
 
         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) {
@@ -452,7 +461,7 @@ var Tooltip = (function ($) {
         }
 
         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()) {
@@ -508,9 +517,8 @@ var Tooltip = (function ($) {
 
         if (this.config) {
           for (var key in this.config) {
-            var value = this.config[key];
-            if (this.constructor.Default[key] !== value) {
-              config[key] = value;
+            if (this.constructor.Default[key] !== this.config[key]) {
+              config[key] = this.config[key];
             }
           }
         }

js/dist/util.js

-
 /**
  * --------------------------------------------------------------------------
  * Bootstrap (v4.0.0): util.js
@@ -53,9 +52,9 @@ var Util = (function ($) {
 
     var el = document.createElement('bootstrap');
 
-    for (var name in TransitionEndEvent) {
-      if (el.style[name] !== undefined) {
-        return { end: TransitionEndEvent[name] };
+    for (var _name in TransitionEndEvent) {
+      if (el.style[_name] !== undefined) {
+        return { end: TransitionEndEvent[_name] };
       }
     }
 
@@ -101,7 +100,9 @@ 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;
     },
 
@@ -125,24 +126,28 @@ var Util = (function ($) {
     },
 
     supportsTransitionEnd: function supportsTransitionEnd() {
-      return !!transition;
+      return Boolean(transition);
     },
 
     typeCheckConfig: function typeCheckConfig(componentName, config, configTypes) {
-
       for (var property in configTypes) {
-        var expectedTypes = configTypes[property];
-        var value = config[property];
-        var valueType = undefined;
-
-        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 + '".'));
+        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 (!new RegExp(expectedTypes).test(valueType)) {
+            throw new Error(componentName.toUpperCase() + ': ' + ('Option "' + property + '" provided type "' + valueType + '" ') + ('but expected type "' + expectedTypes + '".'));
+          }
         }
       }
     }
-
   };
 
   setTransitionEndSupport();

js/src/scrollspy.js

@@ -43,16 +43,18 @@ const ScrollSpy = (($) => {
   }
 
   const ClassName = {
-    DROPDOWN_MENU : 'dropdown-menu',
-    ACTIVE        : 'active'
+    DROPDOWN_TOGGLE : 'dropdown-toggle',
+    DROPDOWN_ITEM   : 'dropdown-item',
+    DROPDOWN_MENU   : 'dropdown-menu',
+    ACTIVE          : 'active'
   }
 
   const Selector = {
-    DATA_SPY    : '[data-spy="scroll"]',
-    ACTIVE      : '.active',
-    LI          : 'li',
-    LI_DROPDOWN : 'li.dropdown',
-    NAV_ANCHORS : '.nav li > a'
+    DATA_SPY       : '[data-spy="scroll"]',
+    ACTIVE         : '.active',
+    LI_DROPDOWN    : 'li.dropdown',
+    NAV_LINKS      : '.nav-link',
+    DROPDOWN_ITEMS : '.dropdown-item'
   }
 
   const OffsetMethod = {
@@ -73,7 +75,8 @@ const ScrollSpy = (($) => {
       this._element       = element
       this._scrollElement = element.tagName === 'BODY' ? window : element
       this._config        = this._getConfig(config)
-      this._selector      = `${this._config.target} ${Selector.NAV_ANCHORS}`
+      this._selector      = `${this._config.target} ${Selector.NAV_LINKS},`
+                          + `${this._config.target} ${Selector.DROPDOWN_ITEMS}`
       this._offsets       = []
       this._targets       = []
       this._activeTarget  = null
@@ -229,39 +232,27 @@ const ScrollSpy = (($) => {
 
       this._clear()
 
-      let selector =
-        `${this._selector}[data-target="${target}"],` +
-        `${this._selector}[href="${target}"]`
-
-      // todo (fat): getting all the raw li's up the tree is not great.
-      let parentListItems = $(selector).parents(Selector.LI)
-
-      for (let i = parentListItems.length; i--;) {
-        $(parentListItems[i]).addClass(ClassName.ACTIVE)
-
-        let itemParent = parentListItems[i].parentNode
+      let queries = this._selector.split(',')
+      queries     = queries.map((selector) => {
+        return `${selector}[data-target="${target}"],` +
+               `${selector}[href="${target}"]`
+      })
+      let $link = $(queries.join(','))
 
-        if (itemParent && $(itemParent).hasClass(ClassName.DROPDOWN_MENU)) {
-          let closestDropdown = $(itemParent)
-            .closest(Selector.LI_DROPDOWN)[0]
-          $(closestDropdown).addClass(ClassName.ACTIVE)
-        }
+      if ($link.hasClass(ClassName.DROPDOWN_ITEM)) {
+        $link.parent().find(ClassName.DROPDOWN_TOGGLE).addClass(ClassName.ACTIVE)
       }
 
+      $link.addClass(ClassName.ACTIVE)
+
       $(this._scrollElement).trigger(Event.ACTIVATE, {
         relatedTarget: target
       })
     }
 
     _clear() {
-      let activeParents = $(this._selector).parentsUntil(
-        this._config.target,
-        Selector.ACTIVE
-      )
-
-      for (let i = activeParents.length; i--;) {
-        $(activeParents[i]).removeClass(ClassName.ACTIVE)
-      }
+      debugger
+      $(this._selector).filter(ClassName.ACTIVE).removeClass(Selector.ACTIVE)
     }
 
 

js/tests/visual/scrollspy.html

@@ -22,26 +22,25 @@
 
 <div class="container">
 
-  <nav class="navbar navbar-default navbar-fixed-top" role="navigation">
-    <div class="container-fluid">
-      <div class="js-navbar-scrollspy">
-        <ul class="nav navbar-nav">
-          <li class="nav-item active"><a class="nav-link" href="#fat">@fat</a></li>
-          <li class="nav-item"><a class="nav-link" href="#mdo">@mdo</a></li>
-          <li class="dropdown nav-item">
-            <a href="#" class="dropdown-toggle nav-link" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
-            <ul class="dropdown-menu" role="menu">
-              <li class=""><a href="#one" tabindex="-1">one</a></li>
-              <li><a href="#two" tabindex="-1">two</a></li>
-              <li role="separator" class="divider"></li>
-              <li><a href="#three" tabindex="-1">three</a></li>
-            </ul>
-          </li>
-        </ul>
-      </div>
+  <nav class="navbar navbar-dark navbar-fixed-top bg-inverse" role="navigation">
+    <div class="js-navbar-scrollspy">
+      <ul class="nav navbar-nav">
+        <li class="nav-item"><a class="nav-link active" href="#fat">@fat</a></li>
+        <li class="nav-item"><a class="nav-link" href="#mdo">@mdo</a></li>
+        <li class="dropdown nav-item">
+          <a href="#" class="dropdown-toggle nav-link" data-toggle="dropdown">Dropdown</a>
+          <div class="dropdown-menu" role="menu">
+            <a class="dropdown-item" href="#one" tabindex="-1">one</a>
+            <a class="dropdown-item" href="#two" tabindex="-1">two</a>
+            <div class="dropdown-divider"></div>
+            <a class="dropdown-item" href="#three" tabindex="-1">three</a>
+          </div>
+        </li>
+      </ul>
     </div>
   </nav>
 
+
   <h2 id="fat">@fat</h2>
   <p>Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.</p>
   <p>Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.</p>