Bootstrap Tutorial - Media List








The following code marks media inside list.

Example

<!DOCTYPE HTML>
<html>
<head>
<link href="http://java2s.com/style/bootstrap.min.css" rel="stylesheet">
<!--from ww w. j av  a2  s  .  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>

Click to view the demo