Adding content using media objects

As you add more contents to your website or web application, you will notice that a large proportion of this content revolves around the text aligned next to an image. Indeed, text and image alignment form the basis from which most modern websites are built, and combining these two elements into a reusable component results in what are called media objects (Figure 4.20). Take a look at the following screenshot:

Figure 4.20: A media object refers to the combination of a title, text, and image element in such a way that they form a reusable entity.

Given how fundamental these media objects are to a website's content, it is of no surprise that Bootstrap 4 offers out-of-the-box support for them. Let's see how we can make use of Bootstrap's media-object to improve the appearance of our About Us section. One suggestion for improvement could be to add some profile information about one of the photographers at MyPhoto. To do so, go ahead and create a new div...