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 the following badges on the product's search result page to indicate the number of units currently in stock:
<a href="@Url.Action("Edit","Products", new { [email protected]})" class="list-group-item">@item.ProductName <span class="badge">@item.UnitsInStock</span></a>
Adding a badge to an element is as simple as adding a <span>
element and setting its class name to badge
.