List groups are UI components used for displaying sets of data, such as a series of messages or a log of recent purchases. For argument’s sake, let’s assume that, in the case of MyPhoto, we wish to build an administration backend that allows the owner of the site to quickly review purchases and view any messages that buyers of photographs might have sent the owner. To this end, we first create a ul or ol element and apply the list-group class to it. The list-group class will merely adjust the margin, bottom and, if flexbox is enabled, set the display property of the element to flex and the flex-direction property to column. The list-group-item item class should be applied to any list item elements contained within the list group. This list-group-item class is responsible for styling the list item so that the elements appear neatly grouped (take a look at figure 9.1). This is achieved by doing the following:
- Setting the padding of the element so that the text contained within the list element is neatly offset from the border surrounding it.
- Explicitly giving the list item a white background.
- Giving the list item a 1 px wide border.
Now that we know what the list group classes do, we can go ahead and create a simple price list:
<ul class=”list-group”>
<li class=Mlist-group-itemM>Photo #123.A purchased for €23</li>
<li class=”list-group-item”>Photo #456.A purchased for €42</li>
<li class=”list-group-item”>Photo #123.B purchased for €42</li> </ul>
Figure 9.1: Creating a list of purchases using the Bootstrap list group classes
1. Interacting with list items
Merely displaying a list of purchased items will not be sufficient for the MyPhoto admin backend. As an additional functionality, the user should be able to select a purchased item and then view additional information (such as the delivery status or the purchaser contact details). While we will not be implementing this functionality, we will look at how we can style our list items appropriately so that clicked items are marked, and moving the mouse over an item will clearly indicate to the user that the list item is clickable. In order to achieve the former, we will apply the list-group-item-action class to each one of our list items. Furthermore, we will replace the li element with an anchor element so that the mouse cursor changes as we hover over an item:
<ul class=”list-group”>
<a
href=M#M
class=Mlist-group-item list-group-item-actionM>
Photo #123.A purchased for €23
</a>
<a
href=M#M
class=Mlist-group-item list-group-item-actionM>
Photo #456.A purchased for €42
</a>
<a
href=”#”
class=”list-group-item list-group-item-action”>
Photo #123.B purchased for €42
</a>
</ul>
All that the list-group-item-action class does is as follows:
- Ensuring that the element contains no text decoration (that is, this is why the item text is not underlined even though we used an anchor element to represent the list item).
- Adjusting the foreground and background colors to #495057 and #f8f9fa on hover. On click—without the active class having been applied—the foreground and background colors change to #212529 and #e9ecef respectively.
- Ensuring that the list item’s width is set to 100%.
Figure 9.2: Hovering over a list item changes its background color once the list-group-item-action class is applied
In order to mark a clicked item as active, we must only apply the active class to the list item. This class is similar to the other classes used to mark activity that we have previously encountered in that it merely adjusts the text color, background color, and border color to #fff, #007bff, and #007bff respectively (refer to figure 9.3):
<ul class=”list-group”>
<a
href=”#”
class=”list-group-item list-group-item-action active”>
Photo #123.A purchased for €23
</a>
<a
href=”#”
class=”list-group-item list-group-item-action”>
Photo #456.A purchased for €42
</a>
href=”#”
class=”list-group-item list-group-item-actionM> Photo #123.B purchased for €42
</a>
</ul>
Figure 9.3: Marking a list item as active by applying the active class
2. 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=M#M
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=M#M
class=Mlist-group-item list-group-item-actionM>
Photo #456.A purchased for
<span class=”badge badge-warning badge-pill”>€42</span>
</a>
<a href=M#M class=Mlist-group-item list-group-item-actionM>
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, badgewarning, badge-success, badge-light, or badge-dark.
3. Applying context classes
Just as with the badges themselves, the individual list group items can be styled with any of the nine available context colors using the list-group-item-* class, whereby * denotes a context color. For example, to apply the danger and success context colors to the second and last of our list items, we will need to apply the list-group-item-danger and list- group-item-secondary classes as follows:
<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 list-group- item-danger”>
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 list-group- item-secondary”>
Photo #123.B purchased for
<span class=”badge badge-warning badge-pill”>€42</span>
</a>
</ul>
Figure 9.5: Styling the group list items using Bootstrap’s context colors
Source: Jakobus Benjamin, Marah Jason (2018), Mastering Bootstrap 4: Master the latest version of Bootstrap 4 to build highly customized responsive web apps, Packt Publishing; 2nd Revised edition.