title: Change the outline color of bootstrap caret
body: <p>I am trying to figure out how to change the bootstrap caret color. Please see below the code:</p>
  
  <pre><code>&lt;div class="share-popup dropup dropdown-toggle"&gt;
      Open Dropdown
      &lt;ul class="share-dropdown-menu"&gt;
          &lt;li&gt;&lt;a href=""&gt;Link 1&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href=""&gt;Link 2&lt;/a&gt;&lt;/li&gt;
          &lt;span class="caret"&gt;&lt;/span&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I have created jsfiddle <a href="http://jsfiddle.net/jason99/k43FT/" rel="nofollow noreferrer">http://jsfiddle.net/jason99/k43FT/</a>. Following image will show you what I am trying to accomplish.</p>
  
  <p><img src="https://i.stack.imgur.com/xkCQq.png" alt="enter image description here"></p>
  
  <p>I am playing with the following css class but can't figure out how to add outline in caret:</p>
  
  <pre><code>.dropup .caret {
      border-top: 6px solid #fff;
      bottom: -4px;
      content: "";
      position: absolute;
      right: 130px;
  }
  </code></pre>