title: twitter bootstrap issue : Right align the caret in the dropdown header
body: <p>I have an issue with the right alignment of the caret. Using .pull-right in the span makes it go to the top  right corner.</p>
  
  <p>How can I make it vertically centered again ?
  I also would like to align the text to the left</p>
  
  <p><a href="http://www.bootply.com/r8x7g5Bw5R" rel="noreferrer">http://www.bootply.com/r8x7g5Bw5R</a></p>
  
  <pre><code>                    &lt;div class="btn-group cust-dropdown"&gt;
                      &lt;button type="button" class="btn btn-default dropdown-toggle cust-dropdown" data-toggle="dropdown"&gt;&lt;span class="caret pull-right"&gt;&lt;/span&gt;&lt;span&gt;test&lt;/span&gt;
                      &lt;/button&gt;
                      &lt;ul class="dropdown-menu" role="menu"&gt;
                          &lt;li&gt;&lt;a href="#"&gt;test&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href="#"&gt;tes2&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href="#"&gt;test3&lt;/a&gt;&lt;/li&gt;
                      &lt;/ul&gt;
                  &lt;/div&gt;
  </code></pre>
  
  <p>and the CSS</p>
  
  <pre><code>.cust-dropdown {
  width: 200px;}
  </code></pre>