How it works...

There are a lot of things happening in this recipe. In step 1, we add the recipe-specific HTML structure. To achieve the desired effect, we are using Bootstrap 4's media object. The structure is pretty easy to grasp, so we will not delve into details here. For some basic examples, refer to https://v4-alpha.getbootstrap.com/layout/media-object/.

Part of the HTML structure worth mentioning is the <img> tag, which calls the placehold.it as its source, with the custom size, background color, and text (the play symbol) passed to the src attribute as parameters.

We also use a paragraph with the class of lead to make the names more prominent, followed with the span with the float-right Bootstrap class. The three icons on the right use of Font Awesome styles, and we are adding our own custom color class of text-faded-green. A similar custom color background class is used on Bootstrap's badge class, which is added to the HTML's <time> element.

The lower half of the HTML structure is a made-up comment by Jane Doe, as a response to the notification posted by John Doe. Contrary to John Doe's icons, Jane Doe's icons are clickable, and clicking on any of the three icons (like Twitter or Facebook) will make custom alerts pop up underneath.

All of these css customizations are done in step 2. We can note that the *-faded-green class declarations dominate the top half of the style sheet. The custom-media class significantly changes the behavior of the media object by removing the left padding, thereby allowing it to take up more space, which is really important on smaller screens.

Finally, alert-twitter and alert-facebook are the added custom alert classes. The like button uses the regular alert-success class.

In step 3, we include the custom css, and in step 4, we make a smooth appearance of the alert boxes possible, triggered by clicking on the icons. The code is a bit clunky, and it is possible to improve it. However, just as it is, it is a great example of what is happening on each click and how all the parts come together. Since this example is already pretty advanced, we will not deal with refactoring of the jQuery code.