title: Bootstrap dropdown caret not showing in Firefox
body: <p>I want to show a caret on the right side of a bootstrap dropdown button within a button-group. </p>
  
  <p>My code is (see also <a href="http://jsfiddle.net/KdUdS/10/" rel="nofollow noreferrer">this fiddle</a>):</p>
  
  <pre><code>&lt;div class="span3 well"&gt;
      &lt;div class="btn-group btn-block"&gt;
          &lt;a class="btn btn-primary dropdown-toggle btn-block" data-toggle="dropdown" href="#"&gt;
          New &amp;hellip; &lt;i class="caret pull-right"&gt;&lt;/i&gt;
        &lt;/a&gt;
        &lt;ul class="dropdown-menu"&gt;
            &lt;li&gt;1&lt;/li&gt;
            &lt;li&gt;2&lt;/li&gt;
        &lt;/ul&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>and</p>
  
  <pre><code>.btn-group .dropdown-toggle {
    padding-left: 10px;
    padding-right: 10px;
  }
  </code></pre>
  
  <p>In webkit (Safari &amp; Chrome) it looks as intended:</p>
  
  <p><img src="https://i.stack.imgur.com/ZLPRO.png" alt="webkit"></p>
  
  <p>However Firefox does not work:</p>
  
  <p><img src="https://i.stack.imgur.com/a8ZkU.png" alt="gecko"></p>
  
  <p>Did I make a mistake here? Which behavior is correct? What should I do to make it work everywhere?</p>
  
  <p>​</p>