Bootstrap - Media Object

In this tutorial we will learn about media object in Bootstrap.

In Bootstrap we can use media object to create components like blog comments, tweets etc.

Default Media Object

To create media object we use the .media class.

<div class="media">
  <div class="media-left">
    <a href="#">
      <img class="media-object"
           src="/path/to/image"
           alt="profile-image">
    </a>
  </div>
  <div class="media-body">
    <h4 class="media-heading">Media heading</h4>
    <p>Some text goes here....</p>
  </div>
</div>

For the above code I have used image of dimensions 48px width and 48px height.

Output:

Media Right

To make the image in the media object be placed at the right side we use the .media-right class.

The .media-right div must be placed after the .media-body div.

<div class="media">
  <div class="media-body">
    <h4 class="media-heading">Media heading</h4>
    <p>Some text goes here....</p>
  </div>
  <div class="media-right">
    <a href="#">
      <img class="media-object"
           src="/path/to/image"
           alt="profile-image">
    </a>
  </div>
</div>

For the above code I have used image of dimensions 48px width and 48px height.

Output:

Media alignment

We can align the media using the following .media-middle and .media-bottom classes.

<div class="media">
  <div class="media-left">
    <a href="#">
      <img class="media-object"
           src="/path/to/image"
           alt="profile-image"
           style="width: 48px; height: 48px;">
    </a>
  </div>
  <div class="media-body">
    <h4 class="media-heading">Media heading</h4>
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry....</p>
  </div>
</div>

<div class="media">
  <div class="media-left media-middle">
    <a href="#">
      <img class="media-object"
           src="/path/to/image"
           alt="profile-image"
           style="width: 48px; height: 48px;">
    </a>
  </div>
  <div class="media-body">
    <h4 class="media-heading">Media heading</h4>
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry...</p>
  </div>
</div>

<div class="media">
  <div class="media-left media-bottom">
    <a href="#">
      <img class="media-object"
           src="/path/to/image"
           alt="profile-image"
           style="width: 48px; height: 48px;">
    </a>
  </div>
  <div class="media-body">
    <h4 class="media-heading">Media heading</h4>
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry...</p>
  </div>
</div>

Output:

Media list

This can be used to create comments in a blog or website. To create a media list we use the .media-list class.

<ul class="media-list">
  <li class="media">
    <div class="media-left">
      <a href="#">
        <img class="media-object"
             src="/path/to/image.png"
             alt="profile-image"
             style="width: 48px; height: 48px;">
      </a>
    </div>
    <div class="media-body">
      <h4 class="media-heading">Media heading</h4>
      <p>some text goes here...</p>
      
      <ul class="media-list">
        <li class="media">
          <div class="media-left">
            <a href="#">
              <img class="media-object"
                   src="/path/to/image.png"
                   alt="profile-image"
                   style="width: 48px; height: 48px;">
            </a>
          </div>
          <div class="media-body">
            <h4 class="media-heading">Media heading</h4>
            <p>some text goes here...</p>
          </div>
        </li>
        <li class="media">
          <div class="media-left">
            <a href="#">
              <img class="media-object"
                   src="/path/to/image.png"
                   alt="profile-image"
                   style="width: 48px; height: 48px;">
            </a>
          </div>
          <div class="media-body">
            <h4 class="media-heading">Media heading</h4>
            <p>some text goes here...</p>
          </div>
        </li>
      </ul>
      
    </div>
  </li>
  <li class="media">
    <div class="media-left">
      <a href="#">
        <img class="media-object"
             src="/path/to/image.png"
             alt="profile-image"
             style="width: 48px; height: 48px;">
      </a>
    </div>
    <div class="media-body">
      <h4 class="media-heading">Media heading</h4>
      <p>some text goes here...</p>
    </div>
  </li>
</ul>

Output: