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
-
Maryam Amiri updated her status
-
Hossein sent you friend request. -
Hossein twitted! -
Maryam posted a new photo
-
Important messageCPU usage went above 80% -
New hit in page views
6,374Increase in page views
1,8,6,5,6,8,7,9,7,8,10,16 -
New blog post
-
New photos added to the gallery
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
- .timeline-content
-
You might place anything inside a
.timeline-content -
You might want to place your content inside a
.card - .timeline-detail
-
Christmas Day.timeline-detailis a container, so you can place almost anything inside it. But you might usually need a time and a description. -
You may want to ignore .timeline-detail and place your time inside the .timeline-content; below or above a card.
-
.timeline-point
Basically you can put anything inside a .timeline-point. Here you can see common usage of a timeline-point. -
A
.badge-dot -
A
.badge-dotwith.badge-xl -
A
.badge-ring -
Line color
.timeline-point-*applies to .timeline-point which*is a color name. -
An iconic avatar
-
An image avatar