Bootstrap 4 Media Objects

Bootstrap 4 media objects provides functionality to place image either left or right to the textual content.

Follow the following steps to create bootstrap 4 media objects

To create a media object, you have to place .media to the parent container of the media object.
Place .media-body to the child element of media container that contains textual information.
Place <img> inside the media container having .media.

Example

Web Designing

The web design learning process is very easy. You have to learn design techniques and tools that improve the design layout.

Web Designing

The web design learning process is very easy. You have to learn design techniques and tools that improve the design layout.

General Syntax

      <div class="media">
  <img src="https://picsum.photos/200/300" class="rounded img-fluid" alt="Rounded Image" />
  <div class="media-body"></div>
</div>

Try it now

Source Code

          <div class="container text-center mt-4">
  <h2 class="text-center">Bootstrap Media Object</h2>
  <div class="media">
    <img src="https://picsum.photos/200/300" class="rounded img-fluid m-4" 
     alt="Rounded Image" style="width: 80px; height: 80px;" />
    <div class="media-body p-2">
      <h4 class="mt-0">Media Object:Left Image</h4>
      <p class="text-justify">
        This is an example of a media object having the image in the left direction.
      </p>
    </div>
  </div><!--media object having image right direction-->
  <div class="media">
    <div class="media-body p-2">
      <h4 class="mt-0">Media Object:Right Image</h4>
      <p class="text-justify p-3">In this example,image is placed right side to the content.</p>
    </div>
    <img src="https://picsum.photos/200/300" class="rounded img-fluid" 
    alt="Rounded Image" style="width: 80px; height: 80px;" />
  </div>
</div>
<!--/container-->

Try it now

Source Code: Output

Bootstrap Media Object

Media Object:Left Image

This is an example of a media object having the image in the left direction.

Media Object:Right Image

In this example,image is placed right side to the content.

Note:In the above example, assign .media to the media object container and place the textual content inside the child element of media object having .media-object. In the end, place the image inside the media object.

Note: Media object provides facility to place image either left or right of the content that lies vertically center to the content.

Nested Media Objects

Media objects can be nested inside other media objects. It can be widely used in a blog post since more than one user interacts regarding any topic.

Smith Roy Posted on 10 Jan ,2021

Bootstrap provides media object concept that id widely used in the blogging system. Most of the blogging comment system is designed on the concept of media object.

John Doe Posted on 12 Jan,2021

Really your comment is very useful during blogging system development.

Source Code

          <div class="container mt-4">
  <h2>Nested Nested Media Objects</h2>
  <p class="text-justify">
    Media objects can be nested inside other media objects. It is widely used in the blogging system.
  </p>
  <div class="media">
    <img src="https://picsum.photos/200/300" class="rounded img-fluid m-4" alt="Rounded Image" style="width: 80px; height: 80px;" />
    <div class="media-body">
      <h5 class="mt-0">Smith Roy<small><i>Posted on 10 Jan ,2021</i></small>
      </h5>
      <p class="text-justify">
        Bootstrap provides a media object concept that Id widely used in the blogging system.
      </p>
      <!-- Nested media object -->
      <div class="media mt-2">
        <img src="https://picsum.photos/200/300" class="rounded img-fluid m-4" 
        alt="Rounded Image" style="width: 80px; height: 80px;" />
        <div class="media-body">
          <h5 class="mt-0">John Doe <small> <i>Posted on 12 Jan,2021</i></small></h5>
          <p class="text-justify">
            Really your comment is very useful during blogging system development.
          </p>
        </div>
      </div>
    </div>
  </div>
</div>

Try it now

Note:Please keep in mind that In the nested media object, the second media object is placed within .media-body section of first media object.

Alignment Of Media Objects

You can put image either left or right in media object. To put image left in media object place <img> inside media container as a first child and then place the <div> containing .media-body and to place right image ,you have to put the <div> containing .media-body class first and then <img>.

Generally image is aligned vertically at the top position. You can change it center by adding .align-self-center class to <img > tag base class and to align vertically end of the container by adding .align-self-end class to the <img> element base class.

Source Code

          <div class="container text-center mt-4">
  <h2 class="text-center">Bootstrap Media Object</h2>
  <div class="media">
    <img src="https://picsum.photos/200/300" class="rounded img-fluid m-4" alt="Rounded Image" 
     style="width: 80px; height: 80px;" />
    <div class="media-body p-2">
      <h4 class="mt-0">Media Object:Left Image</h4>
      <p class="text-justify">
        This is an example of a media object having the image in the left direction.
      </p>
    </div>
  </div>
</div>

Try it now

Source Code: Output

Bootstrap Media Object

Media Object:Left Image

This is an example of a media object having the image in the left direction.

Note:Please keep in mind that image can be placed either left or right inside the media object.