Bootstrap Media Object

In this chapter, we will explain the Media Object in Bootstrap, such as images, videos, and audio.

The styles of the Media Object can be used to create various types of components (e.g., blog comments), where we can use mixed text and images, with images aligned to the left or right. Media Objects allow for the combination of media and text with less code.

Let's start by looking at an example:

Example

<!-- Left Aligned -->
<div class="media">
  <div class="media-left">
    <img decoding="async" src="img_avatar1.png" class="media-object" style="width:60px">
  </div>
  <div class="media-body">
    <h4 class="media-heading">Left Aligned</h4>
    <p>This is some sample text...</p>
  </div>
</div>

<!-- Right Aligned -->
<div class="media">
  <div class="media-body">
    <h4 class="media-heading">Left Aligned</h4>
    <p>This is some sample text...</p>
  </div>
  <div class="media-right">
    <img decoding="async" src="img_avatar1.png" class="media-object" style="width:60px">
  </div>
</div>

The result is as follows:

Example Analysis

Add the .media class to the <div> element to create a media object.

Use the .media-left class to align the media object (image) to the left, and similarly, the .media-right class to align it to the right.

The text content is placed inside the <div> with the class media-body, with the image aligned to the left before the media-body, and the image aligned to the right after the media-body.

Additionally, you can use the .media-heading class to set the title.

Let's look at an example of a media object list, .media-list:

Top, Bottom, Center Alignment

Example

<!-- Top Aligned -->
<div class="media">
  <div class="media-left media-top">
    <img decoding="async" src="img_avatar1.png" class="media-object" style="width:60px">
  </div>
  <div class="media-body">
    <h4 class="media-heading">Top Aligned</h4>
    <p>This is some sample text...</p>
  </div>
</div>

<!-- Center Aligned -->
<div class="media">
  <div class="media-left media-middle">
    <img decoding="async" src="img_avatar1.png" class="media-object" style="width:60px">
  </div>
  <div class="media-body">
    <h4 class="media-heading">Center Aligned</h4>
    <p>This is some sample text...</p>
  </div>
</div>

<!-- Bottom Aligned -->
<div class="media">
  <div class="media-left media-bottom">
    <img decoding="async" src="img_avatar1.png" class="media-object" style="width:60px">
  </div>
  <div class="media-body">
    <h4 class="media-heading">Bottom Aligned</h4>
    <p>This is some sample text...</p>
  </div>
</div>

The result is as follows:

Nested Media Objects

A media object can also contain multiple media objects:

Example

<div class="media">
  <div class="media-left">
```html
<div class="media">
  <div class="media-left">
    <img decoding="async" src="https://static.tutorialpro.org/images/mix/img_avatar.png" class="media-object" style="width:45px">
  </div>
  <div class="media-body">
    <h4 class="media-heading">tutorialpro-1 <small><i>Posted on February 19, 2016</i></small></h4>
    <p>This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text.</p>

    <!-- Nested media object -->
    <div class="media">
      <div class="media-left">
        <img decoding="async" src="https://static.tutorialpro.org/images/mix/img_avatar.png" class="media-object" style="width:45px">
      </div>
      <div class="media-body">
        <h4 class="media-heading">tutorialpro-2 <small><i>Posted on February 19, 2016</i></small></h4>
        <p>This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text.</p>

        <!-- Nested media object -->
        <div class="media">
          <div class="media-left">
            <img decoding="async" src="https://static.tutorialpro.org/images/mix/img_avatar.png" class="media-object" style="width:45px">
          </div>
          <div class="media-body">
            <h4 class="media-heading">tutorialpro-3 <small><i>Posted on February 19, 2016</i></small></h4>
            <p>This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text.</p>
          </div>
        </div>

      </div>
    </div>

  </div>
</div>

<h4 class="media-heading">tutorialpro-2 <small><i>Posted on February 20, 2016</i></small></h4>
<p>This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text.</p>

<!-- Embedded media object -->
<div class="media">
  <div class="media-left">
    <img decoding="async" src="https://static.tutorialpro.org/images/mix/img_avatar.png" class="media-object" style="width:45px">
  </div>
  <div class="media-body">
    <h4 class="media-heading">tutorialpro-3 <small><i>Posted on February 21, 2016</i></small></h4>
    <p>This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text.</p>
  </div>
</div>

</div>

<!-- Embedded media object -->
<div class="media">
  <div class="media-left">
    <img decoding="async" src="https://static.tutorialpro.org/images/mix/img_avatar.png" class="media-object" style="width:45px">
  </div>
  <div class="media-body">
    <h4 class="media-heading">tutorialpro-4 <small><i>Posted on February 20, 2016</i></small></h4>
    <p>This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text.</p>
  </div>
</div>

</div>
</div>

<!-- Embedded media object -->    
<div class="media">
  <div class="media-left">
    <img decoding="async" src="https://static.tutorialpro.org/images/mix/img_avatar.png" class="media-object" style="width:45px">
  </div>
  <div class="media-body">
    <h4 class="media-heading">tutorialpro-5 <small><i>Posted on February 19, 2016</i></small></h4>
    <p>This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text. This is some sample text.</p>
  </div>
</div>
</div>