Bootstrap 4 – Adding content using media objects

ASP.NET Core MVC Web Application Project Structure” href=”” target=”_blank”>ASP.NET Core MVC Web Application Project Structure

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 >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.
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).

Comments are closed.