Media Objects in Bootstrap :

Media objects are used to create repetive contents with a media like image or videos. Think about a list of blog comments where user image is placed on the left side of the comment. We can easily create components like comments using media objects. Two classes are required for creating a media object :

1. .media and
2. .media-body

Let’s try to create one simple blog comment component with an image, comment title and description :

<div class="media">
    <img class="mr-3" src="http://lorempixel.com/64/64">
    <div class="media-body">
      <h5 class="mt-0">Chat title</h5>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
      Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
    </div>
</div>

It will give the output like below :

As you can see that by default, the image is aligned to the top of the media-body. The media alignment can be changed to top, end or middle if you want to.

top, middle and end aligned media :

For top,middle and end aligned media, we need to use align-self-start, align-self-center and align-self-end respectively. align-self-start is the default class that will be used by default.Let’s modify the above example as below :

<div class="media mt-4 ml-4 mr-4">
  <img class="align-self-start mr-3" src="http://lorempixel.com/64/64">
  <div class="media-body">
    <h5 class="mt-0">Top aligned</h5>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  </div>
</div>

<div class="media mt-4 ml-4 mr-4">
  <img class="align-self-center mr-3" src="http://lorempixel.com/64/64">
  <div class="media-body">
    <h5 class="mt-0">Center aligned</h5>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  </div>
</div>

<div class="media mt-4 ml-4 mr-4">
  <img class="align-self-end mr-3" src="http://lorempixel.com/64/64">
  <div class="media-body">
    <h5 class="mt-0">Bottom aligned</h5>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  </div>
</div>

The output will look like below :

Nested media objects :

Nesting of media objects can be done for infinite time. For nesting, simply place the child .media inside the parent media’s .media-body. e.g. :

<div class="media mt-4 ml-4 mr-4">
    <img class="align-self-start mr-3" src="http://lorempixel.com/64/64">
    <div class="media-body">
      <h5 class="mt-0">Parent media</h5>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
      Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
      <div class="media mt-4 ml-4 mr-4">
        <img class="align-self-start mr-3" src="http://lorempixel.com/64/64">
        <div class="media-body">
          <h5 class="mt-0">Child Media</h5>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
          Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
        </div>
      </div>
    </div>
  </div>

Output :

Using media objects in list :

Media objects can be used in a

or
as list elements. To implement this, you need to do the following changes :
1. Use .list-unstyled class to the list for removing all browser default list style.
2. Add class .media to the list items.

<c>
  <ul class="list-unstyled">
  <li class="media mt-4 ml-4 mr-4">
    <img class="align-self-start mr-3" src="http://picsum.photos/64/64" />
    <div class="media-body">
      <h5 class="mt-0">Item 1</h5>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit...
    </div>
  </li>

  <li class="media mt-4 ml-4 mr-4">
    <img class="align-self-start mr-3" src="http://picsum.photos/64/64">
    <div class="media-body">
      <h5 class="mt-0">Item 2</h5>
      sed do eiusmod tempor incididunt ut labore et dolore magna aliqua..
    </div>
  </li>

  <li class="media mt-4 ml-4 mr-4">
    <img class="align-self-start mr-3" src="http://picsum.photos/64/64">
    <div class="media-body">
      <h5 class="mt-0">Item 3</h5>
      Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
    </div>
  </li>

  <li class="media mt-4 ml-4 mr-4">
    <img class="align-self-start mr-3" src="http://picsum.photos/64/64">
    <div class="media-body">
      <h5 class="mt-0">Item 4</h5>
      Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
    </div>
  </li>
</ul>

Output :



Conclusion :

Media objects is really a useful component of bootstrap for creating complex list of items like commenting, tweet feed etc. Try the examples we have described above and drop one comment below if you have any queries.