Media

Media was dropped in v5.x. This article is for v4.x.

The media object helps build complex and repetitive components where some media is positioned alongside content that doesn’t wrap around said media.

This is based on flex model, so you can align media vertically by align-self-start, align-self-center, align-self-end classes.

Media objects can be nested.

<ul class="list-unstyle"> 

  <li class="media border-bottom py-3">
    <img src="..." class="align-self-start mr-3" width="64" height="64">
    <div class="media-body">
       <h5 class="mt-0 mb-1">Top-aligned media</h5>
       <p>...</p>
       <p class="mb-0">...</p>
    </div>   
  </li>   
    
  <li class="media border-bottom py-3">
    <img src="..." class="align-self-center mr-3"  width="64" height="64">
    <div class="media-body">
       <h5 class="mt-0 mb-1">Center-aligned media</h5>
       <p>...</p>
       <p class="mb-0">...</p>
    </div>   
  </li>   
    
  <li class="media border-bottom py-3">
    <img src="..." class="align-self-end mr-3" width="64" height="64">
    <div class="media-body">
       <h5 class="mt-0 mb-1">Bottom-aligned media</h5>
       <p>...</p>
       <p class="mb-0">...</p>
    </div>   
  </li>
</ul>