The media object is a theoretical component and easy way to align media objects utilized as the reason for building more complex and repetitive components(like blog comments, Tweets, and so forth). 

There are two structures to the media object − 

.media − This class permits to float a media object (images, video, and audio) to the left or right of a content block.

<div class = "media">
   <a class = "pull-left" href = "#">
      <img class = "media-object" src = "/bootstrap/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 = "/bootstrap/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 = "/bootstrap/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>

https://jsfiddle.net/2dno5bf6/3/

.media-list − If you are setting up a list where the items will be a part of an unordered list, utilize this class. 

<ul class = "media-list">
   <li class = "media">
      <a class = "pull-left" href = "#">
         <img class = "media-object" src = "/bootstrap/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 = "/bootstrap/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 = "/bootstrap/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 = "/bootstrap/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 = "/bootstrap/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>

https://jsfiddle.net/2dno5bf6/5/