twitter bootstrap issue : Right align the caret in the dropdown header

Question

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.

How can I make it vertically centered again ? I also would like to align the text to the left

http://www.bootply.com/r8x7g5Bw5R

                    <div class="btn-group cust-dropdown">                     <button type="button" class="btn btn-default dropdown-toggle cust-dropdown" data-toggle="dropdown"><span class="caret pull-right"></span><span>test</span>                     </button>                     <ul class="dropdown-menu" role="menu">                         <li><a href="#">test</a></li>                         <li><a href="#">tes2</a></li>                         <li><a href="#">test3</a></li>                     </ul>                 </div> 

and the CSS

.cust-dropdown { width: 200px;} 

Answer 1

.caret {     border-left: 6px solid transparent;     border-right: 6px solid transparent;     border-top: 8px solid #fff;     left: 90%;     top: 45%;     position: absolute; } 

Using position absolute and a percentage top and left I was able to right align my caret within the dropdown. Works in Chrome, IE, and FF.

EDIT

Previous code will work but changes the style of the caret. If you just want to reposition it maintaining its style, just extend Bootstrap's .caret class:

.caret {     position: absolute;     left: 90%;     top: 45%; }