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 agai

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%;
}