Applying badges

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>
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.

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset
18.119.172.61