CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
NaughtySquid
NaughtySquid

Reputation: 2097

twitter bootstrap - getting a badge beside a list item

I am needing help using twitters bootstrap. (http://twitter.github.io/bootstrap/index.html)

I am using a list

<li>

With a badge I want displayed beside the list items text, problem is it keeps going below the text as if it's not in the list item?

<ul class="dropdown-menu">
<li><a href="/admin.php">Admin CP</a> <span class="badge badge-important">1</span></li>

Here's an image that shows the admin cp link with a badge below it: http://img195.imageshack.us/img195/3645/screenshotfrom201305201.png

Upvotes: 4

Views: 6151

Answers (1)

Paulo Bu
Paulo Bu

Reputation: 29804

Include the span inside the anchor tag like this:

<li><a href="/admin.php">Admin CP <span class="badge badge-important">1</span> </a></li>

And double check that the span tag doesn't have declared display:block nor display:block-inline somewhere. That might be the reason.

UPDATE

Also it might help forcing the badge to float intentionally like this:

<span class="badge badge-important pull-right">1</span>

Hope this helps!

Upvotes: 11

Related Questions