In the following CSS layout how can I make my arrow right aligned?

Question

I have a mockup here

http://jsfiddle.net/pJCfE/

At the moment the down arrow is sitting next to 'All Services'. I would like to make it right aligned. How can I do this?

Answer 1

Add class "pull-right" to the caret

<span class="caret pull-right">

It's one of the utility classes included in bootstrap: https://github.com/twitter/bootstrap/blob/master/less/utilities.less

Answer 2

I lack of reputation for commenting best answer, but I have simple clarification in case "it doesn't stay vertically in the middle when using pull-right (float)". Solution is:

<span class="pull-right">
        <span class="caret"></span>
    </span>

Answer 3

Previous answer doesn't keep carte's vertical align, as @Omu says. Instead, you should extend .caret's css class:

.caret {
  position: absolute;
  right: 1%;
  top: 45%;
}

Check it out >> https://jsfiddle.net/twtvcx4n/