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 element, and assign it the media class. This identifies the element as a media object and gives the element a top margin of 15 px. To add a left aligned image of one of the MyPhoto photographers, create a new div element, set its class to media-left and create a nested image element to which the class media-object is applied. This ensures that the image is aligned to the left of our content, with appropriate padding (specifically, a padding-right of 10 px and a top vertical alignment). To add some biographical information about our photographer, we must use the media-body class. Create a second div inside the media element, assign it the media-body class, and add some text. Use a header element in conjunction with the media-heading class to create a title:

    <div class="media">
        <div class="media-left">   
<img class="media-object" src="images/jason.jpg" alt="Jason">
    </div>
    <div class="media-body"> 
<h4 class="media-heading">Jason</h4>
            Some text about Jason, our photographer. Aeterno meliore has
            ut, sed ad.
            Tollit volumus mea id, sed dicunt aliquando cu. Ea reque 
            dmedsimilique deseruisse duo
            Est te essent argumentum, mea et error tritani eleifend. Eum 
            appellantur intellegebat at, ne graece repudiandae 
            vituperatoribus duo.
    </div> 
    </div>

Take a look at the following screenshot:

Figure 4.21: Using Bootstrap's media objects to add a photographer profile to MyPhoto's About Us section.

Instead of top aligning our media element, we could also:

Of course, media elements do not need to appear on their own. Instead, they can be both nested and/or combined into lists. To nest a media element, simply place the child element inside the parent's body element (recall from our example above that body elements are denoted using the media-heading class).

Lists of media elements are created using the media-list class. Simply apply it to a list element (ul or ol tag), and use the media class in conjunction with the individual list items (li tags).