<div class="padding">
  <ul class="timeline">
    <li class="tl-header">
      <div class="btn white" ui-toggle-class="timeline-center" ui-target=".timeline">Center me</div>
    </li>
    <li class="tl-item">
      <div class="tl-wrap b-info">
        <span class="tl-date text-muted">5s ago</span>
        <div class="tl-content">
          Simple timeline title
        </div>
      </div>
    </li>
    <li class="tl-item">
      <div class="tl-wrap b-success">
        <span class="tl-date text-muted">2h ago</span>
        <div class="tl-content box-color text-color  p-a-sm">
          <span class="arrow b-white left pull-top"></span>
          <div>Content in a box with arrow</div>
        </div>
      </div>
    </li>
    <li class="tl-item tl-left">
      <div class="tl-wrap b-primary">
        <span class="tl-date text-muted">7:30 am</span>
        <div class="tl-content box-color primary p-a-sm">
          <span class="arrow b-primary left pull-top hidden-left"></span>
          <span class="arrow b-primary right pull-top visible-left"></span>
          <div class="text-lt">Content with background </div>
        </div>
      </div>
    </li>
    <li class="tl-item">
      <div class="tl-wrap b-primary">
        <span class="tl-date text-muted">04.2014</span>
        <div class="tl-content box-color text-color w-xl w-auto-xs">
          <span class="arrow b-white left pull-top"></span>
          <div class="text-lt p-x m-b-sm">With Title</div>
          <div class="p-a b-t b-light">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi id neque quam. Aliquam sollicitudin venenatis ipsum ac feugiat. Vestibulum ullamcorper
          </div>
        </div>
      </div>
    </li>
    <li class="tl-item tl-left">
      <div class="tl-wrap b-success">
        <span class="tl-date text-muted">04.2014</span>
        <div class="tl-content box-color info block">
          <span class="arrow b-info left pull-top hidden-left"></span>
          <span class="arrow b-info right pull-top visible-left"></span>
          <div class="p-x m-b-sm font-bold">Block</div>
          <div class="box-body b-t b-info">
            Consectetur adipiscing elit. Morbi id neque quam. Aliquam sollicitudin venenatis ipsum ac feugiat. Vestibulum ullamcorper
          </div>             
        </div>
      </div>
    </li>
    <li class="tl-header">
      <div class="btn btn-sm white btn-rounded">2014</div>
    </li>
    <li class="tl-item">
      <div class="tl-wrap b-primary">
        <span class="tl-date text-muted">10.08.2013</span>
        <div class="tl-content box-color text-color p-a-sm">
          <span class="arrow b-white left pull-up hidden-left"></span>
          <span class="arrow b-white right pull-up visible-left"></span>
          <div class="text-lt">A good story to hear.</div>
        </div>
      </div>
    </li>
    <li class="tl-header">
      <i class="ui-icon fa fa-twitter b-white b-2x info"></i>
    </li>
    <li class="tl-item tl-left">
      <div class="tl-wrap b-warn">
        <span class="tl-date text-muted">5.07.2013</span>
        <div class="tl-content box-color text-color p-a-sm">
          <span class="arrow b-white left pull-up hidden-left"></span>
          <span class="arrow b-white right pull-up visible-left"></span>
          <div class="text-lt">Yesterday is History</div>
        </div>
      </div>
    </li>
    <li class="tl-header">
      <div class="btn btn-sm white btn-rounded">more</div>
    </li>
  </ul>
</div>
