user1227914 user1227914 - 1 month ago 45
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="#">
<span class="caret"></span>
<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>

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:

.dropdown-menu > li > a {
.dropdown-menu > li > a > .badge {

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

Remove pull-right class from badge.