Bootstrap Media Object

Bootstrap Media Object

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

Bootstrap Media Object 2nd-example

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