Refactor: drop .dropdown .caret for a generated caret using .dropdown-toggle:after

dist/css/bootstrap.css

@@ -2515,18 +2515,19 @@ tbody.collapse.in {
        -o-transition: height .35s ease;
           transition: height .35s ease;
 }
-.caret {
+.dropdown {
+  position: relative;
+}
+.dropdown-toggle:after {
   display: inline-block;
   width: 0;
   height: 0;
-  margin-left: 2px;
+  margin-left: .25rem;
   vertical-align: middle;
-  border-top: 4px solid;
-  border-right: 4px solid transparent;
-  border-left: 4px solid transparent;
-}
-.dropdown {
-  position: relative;
+  content: "";
+  border-top: .25rem solid;
+  border-right: .25rem solid transparent;
+  border-left: .25rem solid transparent;
 }
 .dropdown-toggle:focus {
   outline: 0;
@@ -2633,7 +2634,7 @@ tbody.collapse.in {
 .navbar-fixed-bottom .dropdown .caret {
   content: "";
   border-top: 0;
-  border-bottom: 4px solid;
+  border-bottom: .25rem solid;
 }
 .dropup .dropdown-menu,
 .navbar-fixed-bottom .dropdown .dropdown-menu {
@@ -2748,11 +2749,11 @@ tbody.collapse.in {
   margin-left: 0;
 }
 .btn-lg .caret {
-  border-width: 5px 5px 0;
+  border-width: .25rem .25rem 0;
   border-bottom-width: 0;
 }
 .dropup .btn-lg .caret {
-  border-width: 0 5px 5px;
+  border-width: 0 .25rem .25rem;
 }
 .btn-group-vertical > .btn,
 .btn-group-vertical > .btn-group,

docs/_includes/components/button-dropdowns.html

@@ -12,7 +12,7 @@
   <p>Turn a button into a dropdown toggle with some basic markup changes.</p>
   <div class="bs-example">
     <div class="btn-group">
-      <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Default <span class="caret"></span></button>
+      <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Default</button>
       <ul class="dropdown-menu" role="menu">
         <li><a href="#">Action</a></li>
         <li><a href="#">Another action</a></li>
@@ -22,7 +22,7 @@
       </ul>
     </div><!-- /btn-group -->
     <div class="btn-group">
-      <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">Primary <span class="caret"></span></button>
+      <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">Primary</button>
       <ul class="dropdown-menu" role="menu">
         <li><a href="#">Action</a></li>
         <li><a href="#">Another action</a></li>
@@ -32,7 +32,7 @@
       </ul>
     </div><!-- /btn-group -->
     <div class="btn-group">
-      <button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown">Success <span class="caret"></span></button>
+      <button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown">Success</button>
       <ul class="dropdown-menu" role="menu">
         <li><a href="#">Action</a></li>
         <li><a href="#">Another action</a></li>
@@ -42,7 +42,7 @@
       </ul>
     </div><!-- /btn-group -->
     <div class="btn-group">
-      <button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown">Info <span class="caret"></span></button>
+      <button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown">Info</button>
       <ul class="dropdown-menu" role="menu">
         <li><a href="#">Action</a></li>
         <li><a href="#">Another action</a></li>
@@ -52,7 +52,7 @@
       </ul>
     </div><!-- /btn-group -->
     <div class="btn-group">
-      <button type="button" class="btn btn-warning dropdown-toggle" data-toggle="dropdown">Warning <span class="caret"></span></button>
+      <button type="button" class="btn btn-warning dropdown-toggle" data-toggle="dropdown">Warning</button>
       <ul class="dropdown-menu" role="menu">
         <li><a href="#">Action</a></li>
         <li><a href="#">Another action</a></li>
@@ -62,7 +62,7 @@
       </ul>
     </div><!-- /btn-group -->
     <div class="btn-group">
-      <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown">Danger <span class="caret"></span></button>
+      <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown">Danger</button>
       <ul class="dropdown-menu" role="menu">
         <li><a href="#">Action</a></li>
         <li><a href="#">Another action</a></li>
@@ -76,7 +76,7 @@
 <!-- Single button -->
 <div class="btn-group">
   <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
-    Action <span class="caret"></span>
+    Action
   </button>
   <ul class="dropdown-menu" role="menu">
     <li><a href="#">Action</a></li>
@@ -94,7 +94,6 @@
     <div class="btn-group">
       <button type="button" class="btn btn-default">Default</button>
       <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
-        <span class="caret"></span>
         <span class="sr-only">Toggle Dropdown</span>
       </button>
       <ul class="dropdown-menu" role="menu">
@@ -108,7 +107,6 @@
     <div class="btn-group">
       <button type="button" class="btn btn-primary">Primary</button>
       <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
-        <span class="caret"></span>
         <span class="sr-only">Toggle Dropdown</span>
       </button>
       <ul class="dropdown-menu" role="menu">
@@ -122,7 +120,6 @@
     <div class="btn-group">
       <button type="button" class="btn btn-success">Success</button>
       <button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown">
-        <span class="caret"></span>
         <span class="sr-only">Toggle Dropdown</span>
       </button>
       <ul class="dropdown-menu" role="menu">
@@ -136,7 +133,6 @@
     <div class="btn-group">
       <button type="button" class="btn btn-info">Info</button>
       <button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown">
-        <span class="caret"></span>
         <span class="sr-only">Toggle Dropdown</span>
       </button>
       <ul class="dropdown-menu" role="menu">
@@ -150,7 +146,6 @@
     <div class="btn-group">
       <button type="button" class="btn btn-warning">Warning</button>
       <button type="button" class="btn btn-warning dropdown-toggle" data-toggle="dropdown">
-        <span class="caret"></span>
         <span class="sr-only">Toggle Dropdown</span>
       </button>
       <ul class="dropdown-menu" role="menu">
@@ -164,7 +159,6 @@
     <div class="btn-group">
       <button type="button" class="btn btn-danger">Danger</button>
       <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown">
-        <span class="caret"></span>
         <span class="sr-only">Toggle Dropdown</span>
       </button>
       <ul class="dropdown-menu" role="menu">
@@ -181,7 +175,6 @@
 <div class="btn-group">
   <button type="button" class="btn btn-danger">Action</button>
   <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown">
-    <span class="caret"></span>
     <span class="sr-only">Toggle Dropdown</span>
   </button>
   <ul class="dropdown-menu" role="menu">
@@ -200,7 +193,7 @@
     <div class="btn-toolbar" role="toolbar">
       <div class="btn-group">
         <button class="btn btn-default btn-lg dropdown-toggle" type="button" data-toggle="dropdown">
-          Large button <span class="caret"></span>
+          Large button
         </button>
         <ul class="dropdown-menu" role="menu">
           <li><a href="#">Action</a></li>
@@ -214,7 +207,7 @@
     <div class="btn-toolbar" role="toolbar">
       <div class="btn-group">
         <button class="btn btn-default btn-sm dropdown-toggle" type="button" data-toggle="dropdown">
-          Small button <span class="caret"></span>
+          Small button
         </button>
         <ul class="dropdown-menu" role="menu">
           <li><a href="#">Action</a></li>
@@ -228,7 +221,7 @@
     <div class="btn-toolbar" role="toolbar">
       <div class="btn-group">
         <button class="btn btn-default btn-xs dropdown-toggle" type="button" data-toggle="dropdown">
-          Extra small button <span class="caret"></span>
+          Extra small button
         </button>
         <ul class="dropdown-menu" role="menu">
           <li><a href="#">Action</a></li>
@@ -244,7 +237,7 @@
 <!-- Large button group -->
 <div class="btn-group">
   <button class="btn btn-default btn-lg dropdown-toggle" type="button" data-toggle="dropdown">
-    Large button <span class="caret"></span>
+    Large button
   </button>
   <ul class="dropdown-menu" role="menu">
     ...
@@ -254,7 +247,7 @@
 <!-- Small button group -->
 <div class="btn-group">
   <button class="btn btn-default btn-sm dropdown-toggle" type="button" data-toggle="dropdown">
-    Small button <span class="caret"></span>
+    Small button
   </button>
   <ul class="dropdown-menu" role="menu">
     ...
@@ -264,7 +257,7 @@
 <!-- Extra small button group -->
 <div class="btn-group">
   <button class="btn btn-default btn-xs dropdown-toggle" type="button" data-toggle="dropdown">
-    Extra small button <span class="caret"></span>
+    Extra small button
   </button>
   <ul class="dropdown-menu" role="menu">
     ...
@@ -279,7 +272,6 @@
       <div class="btn-group dropup">
         <button type="button" class="btn btn-default">Dropup</button>
         <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
-          <span class="caret"></span>
           <span class="sr-only">Toggle Dropdown</span>
         </button>
         <ul class="dropdown-menu" role="menu">
@@ -293,7 +285,6 @@
       <div class="btn-group dropup">
         <button type="button" class="btn btn-primary">Right dropup</button>
         <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
-          <span class="caret"></span>
           <span class="sr-only">Toggle Dropdown</span>
         </button>
         <ul class="dropdown-menu dropdown-menu-right" role="menu">
@@ -310,7 +301,6 @@
 <div class="btn-group dropup">
   <button type="button" class="btn btn-default">Dropup</button>
   <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
-    <span class="caret"></span>
     <span class="sr-only">Toggle Dropdown</span>
   </button>
   <ul class="dropdown-menu" role="menu">

docs/_includes/components/button-groups.html

@@ -102,7 +102,6 @@
       <div class="btn-group">
         <button id="btnGroupDrop1" type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
           Dropdown
-          <span class="caret"></span>
         </button>
         <ul class="dropdown-menu" role="menu" aria-labelledby="btnGroupDrop1">
           <li><a href="#">Dropdown link</a></li>
@@ -119,7 +118,6 @@
   <div class="btn-group">
     <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
       Dropdown
-      <span class="caret"></span>
     </button>
     <ul class="dropdown-menu" role="menu">
       <li><a href="#">Dropdown link</a></li>
@@ -138,7 +136,6 @@
       <div class="btn-group">
         <button id="btnGroupVerticalDrop1" type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
           Dropdown
-          <span class="caret"></span>
         </button>
         <ul class="dropdown-menu" role="menu" aria-labelledby="btnGroupVerticalDrop1">
           <li><a href="#">Dropdown link</a></li>
@@ -150,7 +147,6 @@
       <div class="btn-group">
         <button id="btnGroupVerticalDrop2" type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
           Dropdown
-          <span class="caret"></span>
         </button>
         <ul class="dropdown-menu" role="menu" aria-labelledby="btnGroupVerticalDrop2">
           <li><a href="#">Dropdown link</a></li>
@@ -160,7 +156,6 @@
       <div class="btn-group">
         <button id="btnGroupVerticalDrop3" type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
           Dropdown
-          <span class="caret"></span>
         </button>
         <ul class="dropdown-menu" role="menu" aria-labelledby="btnGroupVerticalDrop3">
           <li><a href="#">Dropdown link</a></li>
@@ -170,7 +165,6 @@
       <div class="btn-group">
         <button id="btnGroupVerticalDrop4" type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
           Dropdown
-          <span class="caret"></span>
         </button>
         <ul class="dropdown-menu" role="menu" aria-labelledby="btnGroupVerticalDrop4">
           <li><a href="#">Dropdown link</a></li>
@@ -212,7 +206,7 @@
       <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>
+          Dropdown
         </a>
         <ul class="dropdown-menu" role="menu">
           <li><a href="#">Action</a></li>

docs/_includes/components/dropdowns.html

@@ -9,7 +9,6 @@
     <div class="dropdown clearfix">
       <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">
         Dropdown
-        <span class="caret"></span>
       </button>
       <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
         <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li>
@@ -24,7 +23,6 @@
 <div class="dropdown">
   <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">
     Dropdown
-    <span class="caret"></span>
   </button>
   <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
     <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li>
@@ -58,7 +56,6 @@
     <div class="dropdown clearfix">
       <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown">
         Dropdown
-        <span class="caret"></span>
       </button>
       <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu2">
         <li role="presentation" class="dropdown-header">Dropdown header</li>
@@ -87,7 +84,6 @@
     <div class="dropdown clearfix">
       <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu3" data-toggle="dropdown">
         Dropdown
-        <span class="caret"></span>
       </button>
       <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu3">
         <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Regular link</a></li>

docs/_includes/components/input-groups.html

@@ -186,7 +186,7 @@
       <div class="col-lg-6">
         <div class="input-group">
           <div class="input-group-btn">
-            <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span></button>
+            <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Action</button>
             <ul class="dropdown-menu" role="menu">
               <li><a href="#">Action</a></li>
               <li><a href="#">Another action</a></li>
@@ -202,7 +202,7 @@
         <div class="input-group">
           <input type="text" class="form-control">
           <div class="input-group-btn">
-            <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span></button>
+            <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Action</button>
             <ul class="dropdown-menu dropdown-menu-right" role="menu">
               <li><a href="#">Action</a></li>
               <li><a href="#">Another action</a></li>
@@ -220,7 +220,7 @@
   <div class="col-lg-6">
     <div class="input-group">
       <div class="input-group-btn">
-        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span></button>
+        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Action</button>
         <ul class="dropdown-menu" role="menu">
           <li><a href="#">Action</a></li>
           <li><a href="#">Another action</a></li>
@@ -236,7 +236,7 @@
     <div class="input-group">
       <input type="text" class="form-control">
       <div class="input-group-btn">
-        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span></button>
+        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Action</button>
         <ul class="dropdown-menu dropdown-menu-right" role="menu">
           <li><a href="#">Action</a></li>
           <li><a href="#">Another action</a></li>
@@ -258,7 +258,6 @@
           <div class="input-group-btn">
             <button type="button" class="btn btn-default" tabindex="-1">Action</button>
             <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" tabindex="-1">
-              <span class="caret"></span>
               <span class="sr-only">Toggle Dropdown</span>
             </button>
             <ul class="dropdown-menu" role="menu">
@@ -278,7 +277,6 @@
           <div class="input-group-btn">
             <button type="button" class="btn btn-default" tabindex="-1">Action</button>
             <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" tabindex="-1">
-              <span class="caret"></span>
               <span class="sr-only">Toggle Dropdown</span>
             </button>
             <ul class="dropdown-menu dropdown-menu-right" role="menu">

docs/_includes/components/navbar.html

@@ -42,7 +42,7 @@
             <li class="active"><a href="#">Link</a></li>
             <li><a href="#">Link</a></li>
             <li class="dropdown">
-              <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></a>
+              <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown</a>
               <ul class="dropdown-menu" role="menu">
                 <li><a href="#">Action</a></li>
                 <li><a href="#">Another action</a></li>
@@ -63,7 +63,7 @@
           <ul class="nav navbar-nav navbar-right">
             <li><a href="#">Link</a></li>
             <li class="dropdown">
-              <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></a>
+              <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown</a>
               <ul class="dropdown-menu" role="menu">
                 <li><a href="#">Action</a></li>
                 <li><a href="#">Another action</a></li>
@@ -97,7 +97,7 @@
         <li class="active"><a href="#">Link</a></li>
         <li><a href="#">Link</a></li>
         <li class="dropdown">
-          <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></a>
+          <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown</a>
           <ul class="dropdown-menu" role="menu">
             <li><a href="#">Action</a></li>
             <li><a href="#">Another action</a></li>
@@ -118,7 +118,7 @@
       <ul class="nav navbar-nav navbar-right">
         <li><a href="#">Link</a></li>
         <li class="dropdown">
-          <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></a>
+          <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown</a>
           <ul class="dropdown-menu" role="menu">
             <li><a href="#">Action</a></li>
             <li><a href="#">Another action</a></li>

docs/_includes/components/navs.html

@@ -118,7 +118,7 @@
       <li><a href="#">Help</a></li>
       <li class="dropdown">
         <a class="dropdown-toggle" data-toggle="dropdown" href="#">
-          Dropdown <span class="caret"></span>
+          Dropdown
         </a>
         <ul class="dropdown-menu" role="menu">
           <li><a href="#">Action</a></li>
@@ -135,7 +135,7 @@
   ...
   <li class="dropdown">
     <a class="dropdown-toggle" data-toggle="dropdown" href="#">
-      Dropdown <span class="caret"></span>
+      Dropdown
     </a>
     <ul class="dropdown-menu" role="menu">
       ...
@@ -152,7 +152,7 @@
       <li><a href="#">Help</a></li>
       <li class="dropdown">
         <a class="dropdown-toggle" data-toggle="dropdown" href="#">
-          Dropdown <span class="caret"></span>
+          Dropdown
         </a>
         <ul class="dropdown-menu" role="menu">
           <li><a href="#">Action</a></li>
@@ -169,7 +169,7 @@
   ...
   <li class="dropdown">
     <a class="dropdown-toggle" data-toggle="dropdown" href="#">
-      Dropdown <span class="caret"></span>
+      Dropdown
     </a>
     <ul class="dropdown-menu" role="menu">
       ...

docs/_includes/css/helpers.html

@@ -54,17 +54,6 @@
 <button type="button" class="close"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
 {% endhighlight %}
 
-
-  <h3 id="helper-classes-carets">Carets</h3>
-  <p>Use carets to indicate dropdown functionality and direction. Note that the default caret will reverse automatically in <a href="../components/#btn-dropdowns-dropup">dropup menus</a>.</p>
-  <div class="bs-example">
-    <span class="caret"></span>
-  </div>
-{% highlight html %}
-<span class="caret"></span>
-{% endhighlight %}
-
-
   <h3 id="helper-classes-floats">Quick floats</h3>
   <p>Float an element to the left or right with a class. <code>!important</code> is included to avoid specificity issues. Classes can also be used as mixins.</p>
 {% highlight html %}

docs/_includes/js/dropdowns.html

@@ -20,7 +20,7 @@
         <div class="collapse navbar-collapse bs-example-js-navbar-collapse">
           <ul class="nav navbar-nav">
             <li class="dropdown">
-              <a id="drop1" href="#" role="button" class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></a>
+              <a id="drop1" href="#" role="button" class="dropdown-toggle" data-toggle="dropdown">Dropdown</a>
               <ul class="dropdown-menu" role="menu" aria-labelledby="drop1">
                 <li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Action</a></li>
                 <li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Another action</a></li>
@@ -30,7 +30,7 @@
               </ul>
             </li>
             <li class="dropdown">
-              <a href="#" id="drop2" role="button" class="dropdown-toggle" data-toggle="dropdown">Dropdown 2 <span class="caret"></span></a>
+              <a href="#" id="drop2" role="button" class="dropdown-toggle" data-toggle="dropdown">Dropdown 2</a>
               <ul class="dropdown-menu" role="menu" aria-labelledby="drop2">
                 <li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Action</a></li>
                 <li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Another action</a></li>
@@ -42,7 +42,7 @@
           </ul>
           <ul class="nav navbar-nav navbar-right">
             <li id="fat-menu" class="dropdown">
-              <a href="#" id="drop3" role="button" class="dropdown-toggle" data-toggle="dropdown">Dropdown 3 <span class="caret"></span></a>
+              <a href="#" id="drop3" role="button" class="dropdown-toggle" data-toggle="dropdown">Dropdown 3</a>
               <ul class="dropdown-menu" role="menu" aria-labelledby="drop3">
                 <li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Action</a></li>
                 <li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Another action</a></li>
@@ -62,7 +62,7 @@
     <ul class="nav nav-pills" role="tablist">
       <li class="active"><a href="#">Regular link</a></li>
       <li class="dropdown">
-        <a id="drop4" role="button" data-toggle="dropdown" href="#">Dropdown <span class="caret"></span></a>
+        <a id="drop4" role="button" data-toggle="dropdown" href="#">Dropdown</a>
         <ul id="menu1" class="dropdown-menu" role="menu" aria-labelledby="drop4">
           <li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Action</a></li>
           <li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Another action</a></li>
@@ -72,7 +72,7 @@
         </ul>
       </li>
       <li class="dropdown">
-        <a id="drop5" role="button" data-toggle="dropdown" href="#">Dropdown 2 <span class="caret"></span></a>
+        <a id="drop5" role="button" data-toggle="dropdown" href="#">Dropdown 2</a>
         <ul id="menu2" class="dropdown-menu" role="menu" aria-labelledby="drop5">
           <li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Action</a></li>
           <li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Another action</a></li>
@@ -82,7 +82,7 @@
         </ul>
       </li>
       <li class="dropdown">
-        <a id="drop6" role="button" data-toggle="dropdown" href="#">Dropdown 3 <span class="caret"></span></a>
+        <a id="drop6" role="button" data-toggle="dropdown" href="#">Dropdown 3</a>
         <ul id="menu3" class="dropdown-menu" role="menu" aria-labelledby="drop6">
           <li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Action</a></li>
           <li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Another action</a></li>
@@ -114,7 +114,7 @@
 {% highlight html %}
 <div class="dropdown">
   <a id="dLabel" role="button" data-toggle="dropdown" data-target="#" href="/page.html">
-    Dropdown <span class="caret"></span>
+    Dropdown
   </a>
 
 

docs/_includes/js/scrollspy.html

@@ -20,7 +20,7 @@
             <li><a href="#fat">@fat</a></li>
             <li><a href="#mdo">@mdo</a></li>
             <li class="dropdown">
-              <a href="#" id="navbarDrop1" class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></a>
+              <a href="#" id="navbarDrop1" class="dropdown-toggle" data-toggle="dropdown">Dropdown</a>
               <ul class="dropdown-menu" role="menu" aria-labelledby="navbarDrop1">
                 <li><a href="#one" tabindex="-1">one</a></li>
                 <li><a href="#two" tabindex="-1">two</a></li>

docs/_includes/js/tabs.html

@@ -8,7 +8,7 @@
       <li class="active"><a href="#home" role="tab" data-toggle="tab">Home</a></li>
       <li><a href="#profile" role="tab" data-toggle="tab">Profile</a></li>
       <li class="dropdown">
-        <a href="#" id="myTabDrop1" class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></a>
+        <a href="#" id="myTabDrop1" class="dropdown-toggle" data-toggle="dropdown">Dropdown</a>
         <ul class="dropdown-menu" role="menu" aria-labelledby="myTabDrop1">
           <li><a href="#dropdown1" tabindex="-1" role="tab" data-toggle="tab">@fat</a></li>
           <li><a href="#dropdown2" tabindex="-1" role="tab" data-toggle="tab">@mdo</a></li>

docs/dist/css/bootstrap.css

@@ -2515,18 +2515,19 @@ tbody.collapse.in {
        -o-transition: height .35s ease;
           transition: height .35s ease;
 }
-.caret {
+.dropdown {
+  position: relative;
+}
+.dropdown-toggle:after {
   display: inline-block;
   width: 0;
   height: 0;
-  margin-left: 2px;
+  margin-left: .25rem;
   vertical-align: middle;
-  border-top: 4px solid;
-  border-right: 4px solid transparent;
-  border-left: 4px solid transparent;
-}
-.dropdown {
-  position: relative;
+  content: "";
+  border-top: .25rem solid;
+  border-right: .25rem solid transparent;
+  border-left: .25rem solid transparent;
 }
 .dropdown-toggle:focus {
   outline: 0;
@@ -2633,7 +2634,7 @@ tbody.collapse.in {
 .navbar-fixed-bottom .dropdown .caret {
   content: "";
   border-top: 0;
-  border-bottom: 4px solid;
+  border-bottom: .25rem solid;
 }
 .dropup .dropdown-menu,
 .navbar-fixed-bottom .dropdown .dropdown-menu {
@@ -2748,11 +2749,11 @@ tbody.collapse.in {
   margin-left: 0;
 }
 .btn-lg .caret {
-  border-width: 5px 5px 0;
+  border-width: .25rem .25rem 0;
   border-bottom-width: 0;
 }
 .dropup .btn-lg .caret {
-  border-width: 0 5px 5px;
+  border-width: 0 .25rem .25rem;
 }
 .btn-group-vertical > .btn,
 .btn-group-vertical > .btn-group,

docs/examples/carousel/index.html

@@ -52,7 +52,7 @@
                 <li><a href="#about">About</a></li>
                 <li><a href="#contact">Contact</a></li>
                 <li class="dropdown">
-                  <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></a>
+                  <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown</a>
                   <ul class="dropdown-menu" role="menu">
                     <li><a href="#">Action</a></li>
                     <li><a href="#">Another action</a></li>

docs/examples/navbar-fixed-top/index.html

@@ -50,7 +50,7 @@
             <li><a href="#about">About</a></li>
             <li><a href="#contact">Contact</a></li>
             <li class="dropdown">
-              <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></a>
+              <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown</a>
               <ul class="dropdown-menu" role="menu">
                 <li><a href="#">Action</a></li>
                 <li><a href="#">Another action</a></li>

docs/examples/navbar-static-top/index.html

@@ -50,7 +50,7 @@
             <li><a href="#about">About</a></li>
             <li><a href="#contact">Contact</a></li>
             <li class="dropdown">
-              <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></a>
+              <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown</a>
               <ul class="dropdown-menu" role="menu">
                 <li><a href="#">Action</a></li>
                 <li><a href="#">Another action</a></li>

docs/examples/navbar/index.html

@@ -52,7 +52,7 @@
               <li><a href="#">Link</a></li>
               <li><a href="#">Link</a></li>
               <li class="dropdown">
-                <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></a>
+                <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown</a>
                 <ul class="dropdown-menu" role="menu">
                   <li><a href="#">Action</a></li>
                   <li><a href="#">Another action</a></li>

docs/examples/non-responsive/index.html

@@ -52,7 +52,7 @@
             <li><a href="#about">About</a></li>
             <li><a href="#contact">Contact</a></li>
             <li class="dropdown">
-              <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></a>
+              <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown</a>
               <ul class="dropdown-menu" role="menu">
                 <li><a href="#">Action</a></li>
                 <li><a href="#">Another action</a></li>

docs/examples/sticky-footer-navbar/index.html

@@ -50,7 +50,7 @@
             <li><a href="#about">About</a></li>
             <li><a href="#contact">Contact</a></li>
             <li class="dropdown">
-              <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></a>
+              <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown</a>
               <ul class="dropdown-menu" role="menu">
                 <li><a href="#">Action</a></li>
                 <li><a href="#">Another action</a></li>

docs/examples/theme/index.html

@@ -52,7 +52,7 @@
             <li><a href="#about">About</a></li>
             <li><a href="#contact">Contact</a></li>
             <li class="dropdown">
-              <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></a>
+              <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown</a>
               <ul class="dropdown-menu" role="menu">
                 <li><a href="#">Action</a></li>
                 <li><a href="#">Another action</a></li>
@@ -349,7 +349,7 @@
         <h1>Dropdown menus</h1>
       </div>
       <div class="dropdown theme-dropdown clearfix">
-        <a id="dropdownMenu1" href="#" role="button" class="sr-only dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></a>
+        <a id="dropdownMenu1" href="#" role="button" class="sr-only dropdown-toggle" data-toggle="dropdown">Dropdown</a>
         <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
           <li class="active" role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li>
           <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li>
@@ -398,7 +398,7 @@
               <li><a href="#about">About</a></li>
               <li><a href="#contact">Contact</a></li>
               <li class="dropdown">
-                <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></a>
+                <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown</a>
                 <ul class="dropdown-menu" role="menu">
                   <li><a href="#">Action</a></li>
                   <li><a href="#">Another action</a></li>
@@ -431,7 +431,7 @@
               <li><a href="#about">About</a></li>
               <li><a href="#contact">Contact</a></li>
               <li class="dropdown">
-                <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></a>
+                <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown</a>
                 <ul class="dropdown-menu" role="menu">
                   <li><a href="#">Action</a></li>
                   <li><a href="#">Another action</a></li>

less/dropdowns.less

@@ -2,27 +2,29 @@
 // Dropdown menus
 // --------------------------------------------------
 
-
-// Dropdown arrow/caret
-.caret {
-  display: inline-block;
-  width: 0;
-  height: 0;
-  margin-left: 2px;
-  vertical-align: middle;
-  border-top:   @caret-width-base solid;
-  border-right: @caret-width-base solid transparent;
-  border-left:  @caret-width-base solid transparent;
-}
-
 // The dropdown wrapper (div)
 .dropdown {
   position: relative;
 }
 
-// Prevent the focus on the dropdown toggle when closing dropdowns
-.dropdown-toggle:focus {
-  outline: 0;
+.dropdown-toggle {
+  // Generate the caret automatically
+  &:after {
+    display: inline-block;
+    width: 0;
+    height: 0;
+    content: "";
+    margin-left: .25rem;
+    vertical-align: middle;
+    border-top:   @caret-width-base solid;
+    border-right: @caret-width-base solid transparent;
+    border-left:  @caret-width-base solid transparent;
+  }
+
+  // Prevent the focus on the dropdown toggle when closing dropdowns
+  &:focus {
+    outline: 0;
+  }
 }
 
 // The dropdown menu (ul)

less/variables.less

@@ -101,9 +101,9 @@
 @component-active-bg:       @brand-primary;
 
 //** Width of the `border` for generating carets that indicator dropdowns.
-@caret-width-base:          4px;
+@caret-width-base:          .3em;
 //** Carets increase slightly in size for larger components.
-@caret-width-large:         5px;
+@caret-width-large:         @caret-width-base;
 
 
 //== Tables