As you add more contents to your website or web application, you will note 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.21):
Figure 4.22: 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 can 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 simply sets its display property to flex.
To add a left-aligned image of one of the MyPhoto photographers, create a new img element and set its class to mr-3. The mr-* classes set the right margin of an element. For example, mr-3 simply applies a margin-right of 1 rem to the element. Similarly, consider the following:
- m-* wraps the margin: * !important; rule
- mt-* wraps the margin-top: * !important; rule
- mr-* wraps the margin-right: * !important; rule
- mb-* wraps the margin-bottom: * !important; rule
- ml-* wraps the margin-left: * !important; rule
- mx-* wraps the margin-right: * !important; margin-left: * !important; rule
- my-* wraps the margin-top: * !important; margin-bottom: * !important; rule
The m-*, mt-*, mb-*, ml-*, and mx-* classes range from 0 to 5, whereby each successively increases the margin property. For example, applying the class m-0 to an element will set the element’s margin property to 0. Applying m-1 will set the margin property to 0.25 rem, m-2 to 0.5 rem, and so on.
Returning to our media object, if we were to add some content, such as biographical information about our photographer, we must use the media-body class. Create a div inside the media element, assign it the media-body class, and add some text:
<div class=”media”>
<img class=”mr-3″ src=”images/jason.jpg” alt=”Jason”>
<div class=”media-body”>
<h5 class=”mt-0″>Jason</h5>
Some text about Jason, our photographer.
Aeterno meliore has ut, sed ad nibh sadipscing accommodare. Tollit volumus mea id, sed dicunt aliquando cu. Ea reque similique deseruisse duo. Est te essent argumentum, mea et error tritani eleifend. Eum appellantur intellegebat at, ne graece repudiandae vituperatoribus duo.
</div>
</div>
Figure 4.22: Using Bootstrap’s media objects to add a photographer profile to MyPhoto’s About Us section (example10.html)
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 preceding example that body elements are denoted using the media-heading class).
Lists of media elements are created using the list class. Simply apply it to a list element (the ul or ol tag) and use the media class in conjunction with the individual list items (li tags).
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.