Activities Timeline with Twitter Bootstrap 2.3

activities_timeline_twb23.html

<table>
  <tr>
    <td valign="top">2/4/2013</td>
    <td>
      <dl class="dl-activities">
        <dt>
          <button type="button" class="btn btn-mini btn-success disabled" disabled="disabled">
            <i class="icon-plus icon-white"></i>
          </button>
        </dt>
        <dd>
          <blockquote>
            <p>File #345</p>
            <small>by Leo</small>
          </blockquote>
        </dd>
      </dl>
    </td>
  </tr>
  <tr>
    <td valign="top">2/4/2013</td>
    <td>
      <dl class="dl-activities">
        <dt>
          <button type="button" class="btn btn-mini btn-warning disabled" disabled="disabled">
            <i class="icon-pencil icon-white"></i>
          </button>
        </dt>
        <dd>
          <blockquote>
            <p>File #345</p>
            <small>by Leo</small>
          </blockquote>
        </dd>
      </dl>
    </td>
  </tr>
</table>

activities_timeline_twb23_dl.html

<dl class="dl-activities">
  <dt>
    <button type="button" class="btn btn-mini btn-success disabled" disabled="disabled">
      <i class="icon-plus icon-white"></i>
    </button>
    <small>2/4/2013</small>
  </dt>
  <dd>
    <blockquote>
      <p>File #345</p>
      <small>by Leo</small>
    </blockquote>
  </dd>
  <dt>
    <button type="button" class="btn btn-mini btn-warning disabled" disabled="disabled">
      <i class="icon-pencil icon-white"></i>
    </button>
    <small>2/4/2013</small>
  </dt>
  <dd>
    <blockquote>
      <p>File #345</p>
      <small>by Leo</small>
    </blockquote>
  </dd>
  <dt>
    <button type="button" class="btn btn-mini btn-danger disabled" disabled="disabled">
      <i class="icon-trash icon-white"></i>
    </button>
    <small>2/4/2013</small>
  </dt>
  <dd>
    <blockquote>
      <p>File #345</p>
      <small>by Leo</small>
    </blockquote>
  </dd>
</dl>

<dl class="dl-activities">
  <dt>
    <code><i class="icon-plus"></i></code>
    <span class="text-success">Create</span>
  </dt>
  <dd>
    <blockquote>
      <p>File #345</p>
      <small>by Leo <cite title="Source Title">at 2/4/2013</cite></small>
    </blockquote>
  </dd>
  <dt>
    <code><i class="icon-pencil"></i></code>
    <span class="text-warning">Update</span>
  </dt>
  <dd>
    <blockquote>
      <p>File #345</p>
      <small>by Leo <cite title="Source Title">at 2/4/2013</cite></small>
    </blockquote>
  </dd>
  <dt>
    <code><i class="icon-trash"></i></code>
    <span class="text-error">Destroy</span>
  </dt>
  <dd>
    <blockquote>
      <p>File #345</p>
      <small>by Leo <cite title="Source Title">at 2/4/2013</cite></small>
    </blockquote>
  </dd>
</dl>

<div class="media">
  <a class="pull-left" href="#">
    <img class="media-object" src="http://placehold.it/64x64" />
  </a>
  <div class="media-body">
    <h4 class="media-heading">Media heading</h4>
    ...
  </div>
</div>

<ul class="media-list">
  <li class="media">
    <a class="pull-left" href="#">
      <img class="media-object" src="http://placehold.it/64x64" />
    </a>
    <div class="media-body">
      <h4 class="media-heading">Media heading</h4>
      ...

      <!-- Nested media object -->
      <div class="media">
        <a class="pull-left" href="#">
          <img class="media-object" src="http://placehold.it/64x64" />
        </a>
        <div class="media-body">
          <h4 class="media-heading">Media heading</h4>
          ...
        </div>
      </div>
    </div>
  </li>
</ul>