Bootstrap3 ブログのコメントやユーザを今風にスタイリング（Media object）

こんな感じ

HTML

<div class="media">
<!-- pull-right にすると、画像が右端に表示される -->
  <a class="pull-left" href="#">
    <img class="media-object" src="..." alt="...">
  </a>
  <div class="media-body">
    <h4 class="media-heading">名前とか</h4>
    ...文字とか。ネストとか
  </div>
</div>

リスト形式も可能

• <div class="media">の代わりに<ul class="media-list">を指定

<ul class="media-list">
  <li class="media">
    <!-- pull-right にすると、画像が右端に表示される -->
    <a class="pull-left" href="#">
      <img class="media-object" src="..." alt="...">
    </a>
    <div class="media-body">
      <h4 class="media-heading">名前とか</h4>
      ...文字とか
      <!-- ネスト: liじゃなくてdiv -->
      <div class="media">
        <a class="pull-left" href="#">
          <img class="media-object" src="..." alt="...">
        </a>
        <div class="media-body">
          <h4 class="media-heading">名前とか</h4>
          ...文字とか、またここにネストとか
        </div>
      </div>
      <!--ネスト終わり-->
    </div>
  </li>
  <!-- 次のli要素（<li class="media">...</li>） -->
</ul>

リンク

• Components · Bootstrap