The list group already looks pretty decent. However, one nice modification would be if the purchase price for each item would stand out a bit more. To this end, we can use Bootstrap's badges. Badges provide a nice way to create content that stands out and catches the user's eye. To this end, we simply place the prices inside a span and apply the badge classes to it, along with selecting an appropriate context color:
<ul class="list-group">
<a
href="#"
class="list-group-item list-group-item-action active">
Photo #123.A purchased for
<span class="badge badge-warning badge-pill">€23
</span>
</a>
<a
href="#"
class="list-group-item list-group-item-action">
Photo #456.A purchased for
<span class="badge badge-warning badge-pill">€42</span>
</a>
<a href="#" class="list-group-item list-group-item-action">
Photo #123.B purchased for
<span class="badge badge-warning badge-pill">€42</span>
</a>
</ul>
![](http://images-20200215.ebookreading.net/12/4/4/9781788834902/9781788834902__mastering-bootstrap-4__9781788834902__assets__c39005d3-ce1d-4dcf-92eb-f3a12669c7bd.png)
Figure 9.4: Making the purchase price stand out by applying Bootstrap's badges
Note that badges support any of the nine context colors. Therefore, badge-warning can be replaced with badge-primary, badge-secondary, badge-danger, badge-info, badge-warning, badge-success, badge-light, or badge-dark.