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. Flora L. Cherry 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

    6,374

    Increase in page views

    1,8,6,5,6,8,7,9,7,8,10,16

  7. New blog post
    ...
    08 January, 2018

    Awesome Blog Post



    Read More

  8. New photos added to the gallery
    ...

    Best memory from the beach...

    ...

    Tracy J. Hanzella

    Continually drive user friendly solutions through performance based infomediaries.

    ...



Documentation

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
Activity Timeline

The activity timeline displays each of the user’s upcoming, current, and past activities.

Basic

  1. Finish writing Grunt tasks.

  2. Called a customer to take a survey.

  3. Prepare for the presentation.

  4. Maryam assigned task prototype design to you.

  5. Meeting with the leader to talk about vacation.

Right aligned

  1. Finish writing Grunt tasks.

  2. Called a customer to take a survey.

  3. Prepare for the presentation.

  4. Maryam assigned task prototype design to you.

  5. Meeting with the leader to talk about vacation.

Colored dots

  1. Finish writing Grunt tasks.

  2. Called a customer to take a survey.

  3. Prepare for the presentation.

  4. Maryam assigned task prototype design to you.

  5. Meeting with the leader to talk about vacation.

Colorful

  1. Finish writing Grunt tasks.

  2. Called a customer to take a survey.

  3. Prepare for the presentation.

  4. Maryam assigned task prototype design to you.

  5. Meeting with the leader to talk about vacation.

Advanced

  1. New comment on sample post title.

    This product is really wonderful! Keep going with good work.


  2. ...

    Uploaded new photos to album London Trip 2016.

    ... ... ...

  3. You moved to group Moderators.