Badges

Badges are used to highlight items. You would normally see badges to indicate the number of new or unread items depending on the type of application. We used badges on the product search result page to indicate the number of units currently in stock:

<li class="list-group-item"> 
    <span class="tag tag-default tag-pill pull-xs-right">@item.UnitsInStock</span> 
    @item.Name 
</li> 
 

Adding a badge to an element is as simple as adding a <span> element and setting its class name to .tag. You'll also notice that you can set the color of the badge using the default Bootstrap context classes. For example, to change the badge color to red, change the .tag-default class name to .tag-danger.