user1227914 user1227914 - 7 days ago 7
CSS Question

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

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/

Answer
.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.