CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
z_av
z_av

Reputation: 83

Adding an arrow on the right side of the badge in list group

I'm trying to add an arrow icon (from font-awsome) in a list group. The problem is it shows up on the left side of the badge instead of the right. How can I fix it?

Example: enter image description here

My HTML (using Bootstrap):

   <ul class="list-group">
        <li class="list-group-item">Friends
            <span class="badge">0</span>
            <span class="icon-angle-right pull-right"></span>
        </li>
        <li class="list-group-item">Items
            <span class="badge">0</span> 
        </li>
    </ul>

Upvotes: 1

Views: 9309

Answers (1)

omma2289
omma2289

Reputation: 54639

By default the .badge is floated right, so you need to change the order of the elements:

<li class="list-group-item">Friends
    <span class="icon-angle-right pull-right"></span>
    <span class="badge">0</span>
</li>

Demo fiddle

Upvotes: 5

Related Questions