Bootstrap4 Media Objects

Bootstrap provides an excellent way to handle media objects (images or videos) and content layout. Application scenarios include blog comments, microblogs, etc:

Basic Media Object

To create a media object, you can add the .media class to the container element, then place the media content in a child container, which needs to be added with the .media-body class, and then add effects such as margin, padding, etc:

Example

<div class="media border p-3">
  <img decoding="async" src="mobile-icon.png" alt="John Doe" class="mr-3 mt-3 rounded-circle" style="width:60px;">
  <div class="media-body">
    <h4>tutorialpro.org</h4>
    <p>Learning is not just about technology, it's about dreams!!!</p>
  </div>
</div>

Nested Media Objects

Media objects can be nested multiple times (a media object containing another media object)

To nest media objects, you can place the new .media container inside the .media-body container:

Example

<div class="media border p-3">
  <img decoding="async" src="mobile-icon.png" alt="John Doe" class="mr-3 mt-3 rounded-circle" style="width:60px;">
  <div class="media-body">
    <h4>tutorialpro.org</h4>
    <p>Learning is not just about technology, it's about dreams!!!</p>
    <div class="media p-3">
      <img decoding="async" src="mobile-icon.png" alt="Jane Doe" class="mr-3 mt-3 rounded-circle" style="width:45px;">
      <div class="media-body">
        <h4>tutorialpro.org</h4>
        <p>Learning is not just about technology, it's about dreams!!!</p>
      </div>
    </div>  
  </div>
</div>

Media Object Image on the Right

If you want to display the avatar image on the right, you can add the image after the .media-body container:

Example

<div class="media border p-3">
  <div class="media-body">
    <h4>tutorialpro.org</h4>
    <p>Learning is not just about technology, it's about dreams!!!</p>
  </div>
  <img decoding="async" src="mobile-icon.png" alt="John Doe" class="ml-3 mt-3 rounded-circle" style="width:60px;">
</div>

Positioning Media Image

We can use the align-self-* related classes to set the display position of the media object's image:

Example

<!-- Top -->
<div class="media">
  <img decoding="async" src="https://static.tutorialpro.org/images/mobile-icon.png" class="align-self-start mr-3" style="width:60px">
  <div class="media-body">
    <h4>Top -- tutorialpro.org</h4>
    <p>Learning is not just about technology, it's about dreams!!!</p>
  </div>
</div>

<!-- Center -->
<div class="media">
  <img decoding="async" src="https://static.tutorialpro.org/images/mobile-icon.png" class="align-self-center mr-3" style="width:60px">
  <div class="media-body">
    <h4>Center -- tutorialpro.org</h4>
    <p>Learning is not just about technology, it's about dreams!!!</p>
  </div>
</div>

<!-- Bottom -->
<div class="media">
  <img decoding="async" src="https://static.tutorialpro.org/images/mobile-icon.png" class="align-self-end mr-3" style="width:60px">
  <div class="media-body">
    <h4>Bottom -- tutorialpro.org</h4>
    <p>Learning is not just about technology, it's about dreams!!!</p>
  </div>
</div>

![Mobile Icon](https://static.tutorialpro.org/images/mobile-icon.png)
<div class="media-body">
  <h4>Bottom -- tutorialpro.org</h4>
  <p>Learning is not just about technology, it's about dreams!!!</p>
</div>