How to get a badge in-line on the right side inside a Bootstrap dropdown menu?

css, html, twitter-bootstrap

Solution

.dropdown-menu > li > a {
    position:relative;
}
.dropdown-menu > li > a > .badge {
    position:absolute;
    right:5px
}

Add `position:relative` to `.dropdown-menu > li > a`.

Remove `pull-right` class from badge.

Problem

I have a Bootstrap dropdown menu like this: ``` <div class="dropdown btn-group"> <a class="btn dropdown-toggle" data-toggle="dropdown" href="#"> Action <span class="caret"></span> </a> <ul class="dropdown-menu"> <li><a href="#">Foo <span class="badge pull-right">63</span></a></li> <li><a href="#">Bar <span class="badge pull-right">12</span></a></li> </ul> </div> ``` I'm trying to get a "badge" counter on the right side for each of the items, but somehow it always jumps to the next line. I assume that's because the dropdown "li" > "a" items are block items. When I don't use the pull-right, it works ...but obviously I want them aligned on the right side. Is there any easy way around that? Here is a jsfiddle: http://jsfiddle.net/BqKNV/392/

Original source