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="#"
        class="list-group-item list-group-item-action">
        Photo #123.A purchased for €23
    </a>
     <a
        href="#"
        class="list-group-item list-group-item-action">
        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:

1. 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).
2. 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.
3. Ensuring that the list item's width is set to 100%.

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>
     <a
        href="#"
        class="list-group-item list-group-item-action">
        Photo #123.B purchased for €42
    </a>
 </ul>