Bootstrap Media Object

This tutorial about another important component of Bootstrap Media Object. There are 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. There are two types of media objects.

Media

This class .media allows floating a media objects like images, video, and audio to the left or right of a content block. As you see an example below of default media object:

<div class="media">
 <a class="pull-left" href="#">
 <img class="media-object" src="images/64.jpg" 
 alt="Media Object">
 </a>
 <div class="media-body">
 <h4 class="media-heading">Media heading</h4>
 This is some sample text. This is some sample text. 
 This is some sample text. This is some sample text.
 This is some sample text. This is some sample text. 
 This is some sample text. This is some sample text.
 </div>
</div>
<div class="media">
 <a class="pull-left" href="#">
 <img class="media-object" src="images/64.jpg" 
 alt="Media Object">
 </a>
 <div class="media-body">
 <h4 class="media-heading">Media heading</h4>
 This is some sample text. This is some sample text. 
 This is some sample text. This is some sample text.
 This is some sample text. This is some sample text. 
 This is some sample text. This is some sample text.
 <div class="media">
 <a class="pull-left" href="#">
 <img class="media-object" src="images/64.jpg" 
 alt="Media Object">
 </a>
 <div class="media-body">
 <h4 class="media-heading">Media heading</h4>
 This is some sample text. This is some sample text. 
 This is some sample text. This is some sample text.
 This is some sample text. This is some sample text. 
 This is some sample text. This is some sample text.
 </div>
 </div>
 </div>
</div>

Demo

Media List

If the content will be part of an unordered list and you are getting ready a list the use this class .meida-list. This class is useful for articles lists and comments threads. As you see an example below of media list:

<ul class="media-list">
 <li class="media">
 <a class="pull-left" href="#">
 <img class="media-object" src="images/64.jpg" 
 alt="Generic placeholder image">
 </a>
 <div class="media-body">
 <h4 class="media-heading">Media heading</h4>
 <p>This is some sample text. This is some sample text. 
 This is some sample text. This is some sample text.
 This is some sample text. This is some sample text. 
 This is some sample text. This is some sample text.</p>
 <!-- Nested media object -->
 <div class="media">
 <a class="pull-left" href="#">
 <img class="media-object" src="images/64.jpg" 
 alt="Generic placeholder image">
 </a>
 <div class="media-body">
 <h4 class="media-heading">Nested media heading</h4>
 This is some sample text. This is some sample text. 
 This is some sample text. This is some sample text.
 This is some sample text. This is some sample text. 
 This is some sample text. This is some sample text.
 <!-- Nested media object -->
 <div class="media">
 <a class="pull-left" href="#">
 <img class="media-object" src="images/64.jpg" 
 alt="Generic placeholder image">
 </a>
 <div class="media-body">
 <h4 class="media-heading">Nested media heading</h4>
 This is some sample text. This is some sample text. 
 This is some sample text. This is some sample text.
 This is some sample text. This is some sample text. 
 This is some sample text. This is some sample text.
 </div>
 </div>
 </div>
 </div>
 <!-- Nested media object -->
 <div class="media">
 <a class="pull-left" href="#">
 <img class="media-object" src="images/64.jpg" 
 alt="Generic placeholder image">
 </a>
 <div class="media-body">
 <h4 class="media-heading">Nested media heading</h4>
 This is some sample text. This is some sample text. 
 This is some sample text. This is some sample text.
 This is some sample text. This is some sample text. 
 This is some sample text. This is some sample text.
 </div>
 </div>
 </div>
 </li>
 <li class="media">
 <a class="pull-right" href="#">
 <img class="media-object" src="images/64.jpg" 
 alt="Generic placeholder image">
 </a>
 <div class="media-body">
 <h4 class="media-heading">Media heading</h4>
 This is some sample text. This is some sample text. 
 This is some sample text. This is some sample text.
 This is some sample text. This is some sample text. 
 This is some sample text. This is some sample text.
 </div>
 </li>
</ul>

Demo

Bootstrap Media Object