Centered line

By default, content shows in zig-zag mode. Apply .timeline-content-left or .timeline-content-right to your .timeline to place timeline-content in left or right respectively.

Content position

  1. Maryam Amiri updated her status

    Authoritatively syndicate goal-oriented leadership skills for clicks mortar outsourcing synergistically reconceptualize enabled.


  2. Hossein sent you friend request.

  3. Hossein twitted!

    Holisticly benchmark plug imperatives for multifunctional deliverables. Seamlessly incubate cross functional action.

  4. Maryam posted a new photo

  5. Important message
    CPU usage went above 80%

  6. New hit in page views


    Increase in page views


  7. New blog post
    08 January, 2017

    Awesome Blog Post

    Read More

  8. New photos added to the gallery

    Best memory from the beach...


    Tim Hank

    Continually drive user friendly solutions through performance based infomediaries.



Timeline component is highly customizeable. Following example showcases variety of timeline blocks that you may want to use.
You may change width of the timeline point which is the centered line in this example. You can apply .timeline-point-* to the .timeline which * can be xs, sm, lg, or xl.

Timeline size

  1. .timeline-content
  2. You might place anything inside a .timeline-content
  3. You might want to place your content inside a .card

  4. .timeline-detail

  5. Christmas Day

    .timeline-detail is a container, so you can place almost anything inside it. But you might usually need a time and a description.

  6. You may want to ignore .timeline-detail and place your time inside the .timeline-content; below or above a card.

  7. .timeline-point
    Basically you can put anything inside a .timeline-point. Here you can see common usage of a timeline-point.
  8. A .badge-dot
  9. A .badge-dot with .badge-xl
  10. A .badge-ring
  11. Line color

    .timeline-point-* applies to .timeline-point which * is a color name.

  12. An iconic avatar
  13. ...
    An image avatar