diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css
index e2b419af78..9cd0ec5f11 100644
--- a/docs/assets/css/bootstrap.css
+++ b/docs/assets/css/bootstrap.css
@@ -2208,13 +2208,16 @@ button.btn.small, input[type="submit"].btn.small {
 }
 .tabs .dropdown-toggle .caret, .pills .dropdown-toggle .caret {
   border-top-color: #0088cc;
+  border-bottom-color: #0088cc;
   margin-top: 6px;
 }
 .tabs .dropdown-toggle:hover .caret, .pills .dropdown-toggle:hover .caret {
   border-top-color: #005580;
+  border-bottom-color: #005580;
 }
 .tabs .active .dropdown-toggle .caret, .pills .active .dropdown-toggle .caret {
   border-top-color: #333333;
+  border-bottom-color: #333333;
 }
 .nav > .dropdown.active > a:hover {
   color: #000000;
diff --git a/docs/components.html b/docs/components.html
index f8b65b3ae6..fd1c9e34cf 100644
--- a/docs/components.html
+++ b/docs/components.html
@@ -410,6 +410,16 @@
             <li><a href="#">Separated link</a></li>
           </ul>
         </li>
+        <li class="dropdown">
+          <a class="dropdown-toggle" data-toggle="dropdown" href="#">Dropup <b class="caret bottom-up"></b></a>
+          <ul class="dropdown-menu bottom-up pull-right">
+            <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>
+        </li>
       </ul>
 <pre class="prettyprint linenums">
 &lt;ul class="nav tabs"&gt;
@@ -442,6 +452,16 @@
             <li><a href="#">Separated link</a></li>
           </ul>
         </li>
+        <li class="dropdown">
+          <a class="dropdown-toggle" data-toggle="dropdown" href="#">Dropup <b class="caret bottom-up"></b></a>
+          <ul class="dropdown-menu bottom-up pull-right">
+            <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>
+        </li>
       </ul>
 <pre class="prettyprint linenums">
 &lt;ul class="nav pills"&gt;
diff --git a/docs/templates/pages/components.mustache b/docs/templates/pages/components.mustache
index 1f069e432f..e73ca59d85 100644
--- a/docs/templates/pages/components.mustache
+++ b/docs/templates/pages/components.mustache
@@ -338,6 +338,16 @@
             <li><a href="#">{{_i}}Separated link{{/i}}</a></li>
           </ul>
         </li>
+        <li class="dropdown">
+          <a class="dropdown-toggle" data-toggle="dropdown" href="#">{{_i}}Dropup{{/i}} <b class="caret bottom-up"></b></a>
+          <ul class="dropdown-menu bottom-up pull-right">
+            <li><a href="#">{{_i}}Action{{/i}}</a></li>
+            <li><a href="#">{{_i}}Another action{{/i}}</a></li>
+            <li><a href="#">{{_i}}Something else here{{/i}}</a></li>
+            <li class="divider"></li>
+            <li><a href="#">{{_i}}Separated link{{/i}}</a></li>
+          </ul>
+        </li>
       </ul>
 <pre class="prettyprint linenums">
 &lt;ul class="nav tabs"&gt;
@@ -370,6 +380,16 @@
             <li><a href="#">{{_i}}Separated link{{/i}}</a></li>
           </ul>
         </li>
+        <li class="dropdown">
+          <a class="dropdown-toggle" data-toggle="dropdown" href="#">{{_i}}Dropup{{/i}} <b class="caret bottom-up"></b></a>
+          <ul class="dropdown-menu bottom-up pull-right">
+            <li><a href="#">{{_i}}Action{{/i}}</a></li>
+            <li><a href="#">{{_i}}Another action{{/i}}</a></li>
+            <li><a href="#">{{_i}}Something else here{{/i}}</a></li>
+            <li class="divider"></li>
+            <li><a href="#">{{_i}}Separated link{{/i}}</a></li>
+          </ul>
+        </li>
       </ul>
 <pre class="prettyprint linenums">
 &lt;ul class="nav pills"&gt;
diff --git a/less/navs.less b/less/navs.less
index 522ad340d5..65edc30952 100644
--- a/less/navs.less
+++ b/less/navs.less
@@ -193,11 +193,13 @@
 .tabs .dropdown-toggle .caret,
 .pills .dropdown-toggle .caret {
   border-top-color: @linkColor;
+  border-bottom-color: @linkColor;
   margin-top: 6px;
 }
 .tabs .dropdown-toggle:hover .caret,
 .pills .dropdown-toggle:hover .caret {
   border-top-color: @linkColorHover;
+  border-bottom-color: @linkColorHover;
 }
 
 // Active dropdown links
@@ -205,6 +207,7 @@
 .tabs .active .dropdown-toggle .caret,
 .pills .active .dropdown-toggle .caret {
   border-top-color: @grayDark;
+  border-bottom-color: @grayDark;
 }
 
 // Active:hover dropdown links