Timelines

Center Timeline

A timeline is useful to display a series of events, history, or news in a unique way.

• 2014

• First Event

  Aug 01, 2014

  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam id ipsum varius, tincidunt odio nec, placerat enim.

• Second Event

  Aug 05, 2014

  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam id ipsum varius, tincidunt odio nec, placerat enim.

• Third Event

  Aug 07, 2014

  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam id ipsum varius, tincidunt odio nec, placerat enim.

• Fourth Event

  Sep 10, 2014

  Donec eu sem placerat, porta nulla a, dignissim tellus. Praesent non lorem leo. Mauris quis hendrerit metus, id vehicula leo. Cum sociis natoque penatibus et magnis dis parturient montes.

• Fifth Event

  Oct 14, 2014

  Donec eu sem placerat, porta nulla a, dignissim tellus. Praesent non lorem leo. Mauris quis hendrerit metus, id vehicula leo. Cum sociis natoque penatibus et magnis dis parturient montes.

• Sixth Event

  Nov 21, 2014

  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam id ipsum varius, tincidunt odio nec, placerat enim.

• 2015

Left Timeline

For a left-aligned timeline, add the .timeline-left modifier to the ul.timeline.

• 2014

• First Event

  Aug 01, 2014

  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam id ipsum varius, tincidunt odio nec, placerat enim.

• Second Event

  Aug 05, 2014

  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam id ipsum varius, tincidunt odio nec, placerat enim.

• Third Event

  Aug 07, 2014

  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam id ipsum varius, tincidunt odio nec, placerat enim.

• Fourth Event

  Sep 10, 2014

  Donec eu sem placerat, porta nulla a, dignissim tellus. Praesent non lorem leo. Mauris quis hendrerit metus, id vehicula leo. Cum sociis natoque penatibus et magnis dis parturient montes.

• Fifth Event

  Oct 14, 2014

  Donec eu sem placerat, porta nulla a, dignissim tellus. Praesent non lorem leo. Mauris quis hendrerit metus, id vehicula leo. Cum sociis natoque penatibus et magnis dis parturient montes.

• Sixth Event

  Nov 21, 2014

  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam id ipsum varius, tincidunt odio nec, placerat enim.

• 2015

Right Timeline

For a right-aligned timeline, add the .timeline-right modifier to the ul.timeline.

• 2014

• First Event

  Aug 01, 2014

  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam id ipsum varius, tincidunt odio nec, placerat enim.

• Second Event

  Aug 05, 2014

  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam id ipsum varius, tincidunt odio nec, placerat enim.

• Third Event

  Aug 07, 2014

  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam id ipsum varius, tincidunt odio nec, placerat enim.

• Fourth Event

  Sep 10, 2014

  Donec eu sem placerat, porta nulla a, dignissim tellus. Praesent non lorem leo. Mauris quis hendrerit metus, id vehicula leo. Cum sociis natoque penatibus et magnis dis parturient montes.

• Fifth Event

  Oct 14, 2014

  Donec eu sem placerat, porta nulla a, dignissim tellus. Praesent non lorem leo. Mauris quis hendrerit metus, id vehicula leo. Cum sociis natoque penatibus et magnis dis parturient montes.

• Sixth Event

  Nov 21, 2014

  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam id ipsum varius, tincidunt odio nec, placerat enim.

• 2015