Media object
Abstract object styles for building various types of components (like blog comments, Tweets, etc) that feature a left- or right-aligned image alongside textual content.
The default media allow to float a media object (images, video, audio) to the left or right of a content block.
<div class="media">
<a class="pull-left" href="#">
<img class="media-object" src="/portals/30/..." alt="...">
</a>
<div class="media-body">
<h4 class="media-heading">Media heading</h4>
...
</div>
</div>
Media list
With a bit of extra markup, you can use media inside list (useful for comment threads or articles lists).
<ul class="media-list">
<li class="media">
<a class="pull-left" href="#">
<img class="media-object" src="/portals/30/..." alt="...">
</a>
<div class="media-body">
<h4 class="media-heading">Media heading</h4>
...
</div>
</li>
</ul>