Media List
Description
The following code marks media inside list.
Example
<!DOCTYPE HTML>
<html>
<head>
<link href="http://java2s.com/style/bootstrap.min.css" rel="stylesheet">
<!--from w w w .j a v a 2s . c o m-->
<script src="http://java2s.com/style/jquery-1.8.0.min.js"></script>
<script src="http://java2s.com/style/bootstrap.min.js"></script>
</head>
<body style='margin: 20px;'>
<ul class="media-list">
<li class="media"><a class="pull-left" href="#"> <img
class="media-object" data-src="holder.js/64x64" alt="64x64"
style="width: 64px; height: 64px;" src="">
</a>
<div class="media-body">
<h4 class="media-heading">Media heading</h4>
<p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus
scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum
in vulputate at, tempus viverra turpis.</p>
<!-- Nested media object -->
<div class="media">
<a class="pull-left" href="#"> <img class="media-object"
data-src="holder.js/64x64" alt="64x64"
style="width: 64px; height: 64px;" src="">
</a>
<div class="media-body">
<h4 class="media-heading">Nested media heading</h4>
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus
scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum
in vulputate at, tempus viverra turpis.
<!-- Nested media object -->
<div class="media">
<a class="pull-left" href="#"> <img class="media-object"
data-src="holder.js/64x64" alt="64x64"
style="width: 64px; height: 64px;" src="">
</a>
<div class="media-body">
<h4 class="media-heading">Nested media heading</h4>
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus
scelerisque ante sollicitudin commodo. Cras purus odio,
vestibulum in vulputate at, tempus viverra turpis.
</div>
</div>
</div>
</div>
<!-- Nested media object -->
<div class="media">
<a class="pull-left" href="#"> <img class="media-object"
data-src="holder.js/64x64" alt="64x64"
style="width: 64px; height: 64px;" src="">
</a>
<div class="media-body">
<h4 class="media-heading">Nested media heading</h4>
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus
scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum
in vulputate at, tempus viverra turpis.
</div>
</div>
</div></li>
<li class="media"><a class="pull-right" href="#"> <img
class="media-object" data-src="holder.js/64x64" alt="64x64"
style="width: 64px; height: 64px;" src="">
</a>
<div class="media-body">
<h4 class="media-heading">Media heading</h4>
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus
scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum
in vulputate at, tempus viverra turpis.
</div></li>
</ul>
</body>
</html>