Bootstrap Media Objects

Media objects are used to align images, videos, or other media elements with text. This is useful for comments, testimonials, and content with images.

Basic Media Object

A media object consists of an image on one side and text content on the other.

<div class="media">
  <img src="image.jpg" class="mr-3" alt="Sample Image" width="64">
  <div class="media-body">
    <h5 class="mt-0">Media Heading</h5>
    This is an example of Bootstrap media object.
  </div>
</div>

Top, Middle, or Bottom Alignment

You can align media elements at the top, middle, or bottom with the media-top, media-middle or media-bottom class.

For example,

<div class="media">
  <img src="image.jpg" class="align-self-start mr-3" alt="Top aligned">
  <div class="media-body">Top aligned content</div>
</div>

<div class="media">
  <img src="image.jpg" class="align-self-center mr-3" alt="Middle aligned">
  <div class="media-body">Middle aligned content</div>
</div>

<div class="media">
  <img src="image.jpg" class="align-self-end mr-3" alt="Bottom aligned">
  <div class="media-body">Bottom aligned content</div>
</div>

Nesting Media Objects

You can nest media objects within each other.

<div class="media">
  <img src="image.jpg" class="mr-3" alt="Parent Image">
  <div class="media-body">
    <h5>Parent Media</h5>
    <div class="media">
      <img src="child.jpg" class="mr-3" alt="Child Image">
      <div class="media-body">Nested media object.</div>
    </div>
  </div>
</div>

Request more information

Bootstrap Media Objects