Timeline

Default

  • 2008
  • 2009
  • 2010
  • 2011
  • 2012
  • 2013
  • 2014
<div class="timeline">
  <ul>
    <li><span class="title">2008</span></li>
    <li><span class="title">2009</span></li>
    <li><span class="title">2010</span></li>
    <li><span class="title">2011</span></li>
    <li><span class="title">2012</span></li>
    <li><span class="title">2013</span></li>
    <li class="active"><span class="title">2014</span></li>
  </ul>
</div>

Colors

Add .primary, .success, .info, .warning, .danger classes

  • 2008
  • 2009
  • 2010
  • 2011
  • 2012
  • 2013
  • 2014
  • 2008
  • 2009
  • 2010
  • 2011
  • 2012
  • 2013
  • 2014
  • 2008
  • 2009
  • 2010
  • 2011
  • 2012
  • 2013
  • 2014
  • 2008
  • 2009
  • 2010
  • 2011
  • 2012
  • 2013
  • 2014
  • 2008
  • 2009
  • 2010
  • 2011
  • 2012
  • 2013
  • 2014
<div class="timeline primary">
  ...
</div>
<div class="timeline success">
  ...
</div>
<div class="timeline info">
  ...
</div>
<div class="timeline warning">
  ...
</div>
<div class="timeline danger">
  ...
</div>

Has link

<div class="timeline">
  <ul>
    <li><a href="#2008" class="title">2008</a></li>
    <li><a href="#2009" class="title">2009</a></li>
    <li><a href="#2010" class="title">2010</a></li>
    <li><a href="#2011" class="title">2011</a></li>
    <li><a href="#2012" class="title">2012</a></li>
    <li><a href="#2013" class="title">2013</a></li>
    <li class="active"><a href="#2014" class="title">2014</a></li>
  </ul>
</div>

Sizing

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 2008
  • 2009
  • 2010
  • 2011
  • 2012
  • 2013
  • 2014
  • 2010
  • 2011
  • 2012
  • 2013
  • 2014
<div class="timeline small">
  ...
</div>

<div class="timeline">
  ...
</div>

<div class="timeline large">
  ...
</div>