diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css
index 231d5283be..2e9734cf51 100644
--- a/docs/assets/css/bootstrap.css
+++ b/docs/assets/css/bootstrap.css
@@ -2902,6 +2902,16 @@ table [class*=span],
   display: block;
 }
 
+.dropup .dropdown-submenu > .dropdown-menu {
+  top: auto;
+  bottom: 0;
+  margin-top: 0;
+  margin-bottom: -2px;
+  -webkit-border-radius: 5px 5px 5px 0;
+     -moz-border-radius: 5px 5px 5px 0;
+          border-radius: 5px 5px 5px 0;
+}
+
 .dropdown-submenu > a:after {
   display: block;
   float: right;
diff --git a/docs/components.html b/docs/components.html
index f47aecbf19..3272f29d0f 100644
--- a/docs/components.html
+++ b/docs/components.html
@@ -182,6 +182,24 @@
                   </ul>
                 </li>
               </ul>
+              <div class="dropup" style="float: left; margin-left: 20px;">
+                <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu" style="display: block; position: static; margin-bottom: 5px; *width: 180px;">
+                  <li><a tabindex="-1" href="#">Action</a></li>
+                  <li><a tabindex="-1" href="#">Another action</a></li>
+                  <li><a tabindex="-1" href="#">Something else here</a></li>
+                  <li class="divider"></li>
+                  <li class="dropdown-submenu">
+                    <a tabindex="-1" href="#">More options</a>
+                    <ul class="dropdown-menu">
+                      <li><a tabindex="-1" href="#">Second level link</a></li>
+                      <li><a tabindex="-1" href="#">Second level link</a></li>
+                      <li><a tabindex="-1" href="#">Second level link</a></li>
+                      <li><a tabindex="-1" href="#">Second level link</a></li>
+                      <li><a tabindex="-1" href="#">Second level link</a></li>
+                    </ul>
+                  </li>
+                </ul>
+              </div>
             </div>
           </div>
 <pre class="prettyprint linenums">
diff --git a/docs/templates/pages/components.mustache b/docs/templates/pages/components.mustache
index 53936e5d0d..95ac1ce4c4 100644
--- a/docs/templates/pages/components.mustache
+++ b/docs/templates/pages/components.mustache
@@ -111,6 +111,24 @@
                   </ul>
                 </li>
               </ul>
+              <div class="dropup" style="float: left; margin-left: 20px;">
+                <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu" style="display: block; position: static; margin-bottom: 5px; *width: 180px;">
+                  <li><a tabindex="-1" href="#">{{_i}}Action{{/i}}</a></li>
+                  <li><a tabindex="-1" href="#">{{_i}}Another action{{/i}}</a></li>
+                  <li><a tabindex="-1" href="#">{{_i}}Something else here{{/i}}</a></li>
+                  <li class="divider"></li>
+                  <li class="dropdown-submenu">
+                    <a tabindex="-1" href="#">{{_i}}More options{{/i}}</a>
+                    <ul class="dropdown-menu">
+                      <li><a tabindex="-1" href="#">{{_i}}Second level link{{/i}}</a></li>
+                      <li><a tabindex="-1" href="#">{{_i}}Second level link{{/i}}</a></li>
+                      <li><a tabindex="-1" href="#">{{_i}}Second level link{{/i}}</a></li>
+                      <li><a tabindex="-1" href="#">{{_i}}Second level link{{/i}}</a></li>
+                      <li><a tabindex="-1" href="#">{{_i}}Second level link{{/i}}</a></li>
+                    </ul>
+                  </li>
+                </ul>
+              </div>
             </div>
           </div>{{! /example }}
 <pre class="prettyprint linenums">
diff --git a/less/dropdowns.less b/less/dropdowns.less
index 390c374974..bed158612f 100644
--- a/less/dropdowns.less
+++ b/less/dropdowns.less
@@ -163,6 +163,8 @@
 .dropdown-submenu {
   position: relative;
 }
+
+// Default dropdowns
 .dropdown-submenu > .dropdown-menu {
   top: 0;
   left: 100%;
@@ -176,6 +178,18 @@
   display: block;
 }
 
+// Dropups
+.dropup .dropdown-submenu > .dropdown-menu {
+  top: auto;
+  bottom: 0;
+  margin-top: 0;
+  margin-bottom: -2px;
+  -webkit-border-radius: 5px 5px 5px 0;
+     -moz-border-radius: 5px 5px 5px 0;
+          border-radius: 5px 5px 5px 0;
+}
+
+// Caret to indicate there is a submenu
 .dropdown-submenu > a:after {
   display: block;
   content: " ";