title: How to change the bootstrap caret pointing position?
body: <p>Within bootstrap the caret is always pointing down. I would like it to point to the right when when the menu is closed. See demo.</p>
  
  <p>Demo: <a href="http://jsfiddle.net/Maty2/" rel="nofollow">http://jsfiddle.net/Maty2/</a></p>
  
  <p>HTML</p>
  
  <pre><code>&lt;div class="functionbox funtog"&gt; &lt;a class="btn dropdown-toggle fleft" data-toggle="collapse" data-target="#demo-1" href="#"&gt;&lt;span class="caret"&gt;&lt;/span&gt;&lt;/a&gt;
          &lt;h3&gt;Recent&lt;/h3&gt;
        &lt;/div&gt;
        &lt;div id="demo-1" class="collapse in"&gt;
          &lt;div class="whitebox"&gt;
            &lt;div id="myprojs"&gt;Hide this&lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>​</p>
  
  <p>CSS</p>
  
  <pre><code>.whitebox { padding: 20px; border-top: 1px dotted #b3b3b3; border-left: 1px dotted #b3b3b3; color: #444; background-color: white; position: relative; } 
  .functionbox .btn { border: 2px solid #888; background: none; padding: 4px; margin: 0; height: 10px; }
  .functionbox .btn .caret { margin: 2px; border-top: 4px solid #888; }
  .functionbox { position: relative; }
  .functionbox h3 { font-size: 1.4em; border-bottom: 3px solid #F2F2F2; }
  .functionbox h2 { font-size: 1.8em; border-bottom: 3px solid #F2F2F2; }
  .dropdown-menu { mid-width: 250px; }
  .funtog .fleft { float: left; border: none; margin: 10px 10px 0 0; }
  .funtog h3 { border-bottom: 1px dotted #b3b3b3; }
  </code></pre>
  
  <p>​JS</p>
  
  <pre><code>&lt;script src="js/jquery.js"&gt;&lt;/script&gt; 
  &lt;script src="js/bootstrap-dropdown.js"&gt;&lt;/script&gt; 
  &lt;script src="js/bootstrap-button.js"&gt;&lt;/script&gt; 
  &lt;script src="js/bootstrap-collapse.js"&gt;&lt;/script&gt; 
  </code></pre>
  
  <p>I am not sure what I need to change in order to add this functionality. Does anyone have a suggestion? or possibly a solution?</p>
  
  <p>Thanks</p>