CODEWITHSUNDEEP
twitter-bootstrap
lostintranslation
lostintranslation

Reputation: 24583

Cannot get badge to line up with link in navbar

I am having trouble figuring out how to get a badge next to a link in my navbar and have it line up correctly.

<ul class="nav">
 <li><a href="#">Home</a></li>
 <li><a href="#">Link</a><span class="badge badge-important">4</span></li>

Here is a JSFiddle example of my problem: http://jsfiddle.net/pHRc9/3/

Upvotes: 7

Views: 5095

Answers (3)

alans
alans

Reputation: 1040

Not sure why you would want the badge outside the link as the entire link becomes a block. The best way to have the badges to the right is similar to lostintranslation's answer, but instead of using .badge-important use .pull-right.

Upvotes: 2

moskyt
moskyt

Reputation: 71

What I do is to place the badges as list elements:

  %ul.nav.navbar-nav.navbar-right
    %li.navbar-text
      %span.badge boo
    %li.navbar-text
      %span.label.label-primary foo

That seems to work nice for me.

Upvotes: 1

thtsigma
thtsigma

Reputation: 4938

Try putting the close of the a href outside of the span close.

<ul class="nav">
<li><a href="#">Home</a></li>
<li><a href="#">Link <span class="badge badge-important">4</span></a></li>

Updated Answer

You didn't specify that in your question. Using the code you have already existing, and placing this css worked okay for me. 

a {
    float:left !important;
}
span {
    float: left !important;
    margin-top: 10px;
}

Upvotes: 5

Related Questions