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
A much simpler solution exists for this problem. This style should look the most natural and be the most responsive to all usages as it does not depend on any predetermined layout (other than default bootstrap styles).
.dropdown > .btn > .caret {
float: right;
margin: 6px 0;
// if you are using Less, the you can reuse the actual vertical padding
// margin: @padding-base-vertical 0;
}