CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
krystan honour
krystan honour

Reputation: 6793

badges in a linkified list group

Hi there I am fairly new to bootstrap and am using the latest release (3.x) and have a list-group which I have rendered as a linkified group e.g

what I want to end up with is a linkified list-group with a badge on the right of each element, this is simple with an un ordered list group but I cannot get it to work with links

by a linkified group i mean

<div class="list-group row">
    @foreach (var dept in Model.Units)
    {
        @Html.ActionLink(@dept, "TrackingLists", "TrackingLists", new { department = @dept }, new {@class="list-group-item"})
    }
</div>

I'm just not sure where to put the badge here.

Upvotes: 0

Views: 1143

Answers (1)

SW4
SW4

Reputation: 71170

Have you tried, e.g.:

<div class="list-group">
    <a href="#" class="list-group-item">some text<span class="badge">14</span></a>
</div>

Demo Fiddle

update:

If you cant add HTML to your link, use the below HTML

<ul class="list-group">
    <li class="list-group-item"> 
        <a href="#">some text</a><span class="badge">14</span>    
    </li>
</ul>

CSS .list-group-item a { display:inline-block; width:90%; height:100%; color:black; } .list-group-item a:hover { text-decoration:none; }

Demo Fiddle

Upvotes: 1

Related Questions