CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
user1227914
user1227914

Reputation: 3514

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/

Upvotes: 3

Views: 1933

Answers (1)

Deepak David
Deepak David

Reputation: 145

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

Upvotes: 4

Related Questions