Documentation
Timelines
Timeline
Timeline
-
10 hrs ago
+1150 Followers
You’re getting more and more followers, keep it up!
-
2 hrs ago
+3 New Products were added!
Congratulations!
-
1 day ago
+290 Page Likes
This is great, keep it up!
-
2 days ago
+3 Friend Requests
JL
<div class="card">
<div class="card-header">
<h3 class="card-title">Timeline</h3>
</div>
<div class="card-body">
<ul class="list list-timeline">
<li>
<div class="list-timeline-icon bg-twitter"><!-- SVG icon code -->
</div>
<div class="list-timeline-content">
<div class="list-timeline-time">10 hrs ago</div>
<p class="list-timeline-title">+1150 Followers</p>
<p class="text-muted">You’re getting more and more followers, keep it up!</p>
</div>
</li>
<li>
<div class="list-timeline-icon bg-red"><!-- SVG icon code -->
</div>
<div class="list-timeline-content">
<div class="list-timeline-time">2 hrs ago</div>
<p class="list-timeline-title">+3 New Products were added!</p>
<p class="text-muted">Congratulations!</p>
</div>
</li>
<li>
<div class="list-timeline-icon bg-success"><!-- SVG icon code -->
</div>
<div class="list-timeline-content">
<div class="list-timeline-time">1 day ago</div>
<p class="list-timeline-title">Database backup completed!</p>
<p class="text-muted">Download the <a href="#">latest backup</a>.</p>
</div>
</li>
<li>
<div class="list-timeline-icon bg-facebook"><!-- SVG icon code -->
</div>
<div class="list-timeline-content">
<div class="list-timeline-time">1 day ago</div>
<p class="list-timeline-title">+290 Page Likes</p>
<p class="text-muted">This is great, keep it up!</p>
</div>
</li>
<li>
<div class="list-timeline-icon bg-teal"><!-- SVG icon code -->
</div>
<div class="list-timeline-content">
<div class="list-timeline-time">2 days ago</div>
<p class="list-timeline-title">+3 Friend Requests</p>
<div class="avatar-list mt-3">
<span class="avatar" style="background-image: url(...)">
<span class="badge bg-success"></span></span>
<span class="avatar">
<span class="badge bg-success"></span>JL</span>
<span class="avatar" style="background-image: url(...)">
<span class="badge bg-success"></span></span>
</div>
</div>
</li>
<li>
<div class="list-timeline-icon bg-yellow"><!-- SVG icon code -->
</div>
<div class="list-timeline-content">
<div class="list-timeline-time">3 days ago</div>
<p class="list-timeline-title">+2 New photos</p>
<div class="mt-3">
<div class="row row-sm">
<div class="col-6">
<div class="media media-2x1 rounded">
<a class="media-content" style="background-image: url(...)"></a>
</div>
</div>
<div class="col-6">
<div class="media media-2x1 rounded">
<a class="media-content" style="background-image: url(...)"></a>
</div>
</div>
</div>
</div>
</div>
</li>
<li>
<div class="list-timeline-icon"><!-- SVG icon code -->
</div>
<div class="list-timeline-content">
<div class="list-timeline-time">2 weeks ago</div>
<p class="list-timeline-title">System updated to v2.02</p>
<p class="text-muted">Check the complete changelog at the <a href="#">activity
page</a>.</p>
</div>
</li>
</ul>
</div>
</div>Simple Timeline
Timeline
-
10 hrs ago
+1150 Followers
You’re getting more and more followers, keep it up!
-
2 hrs ago
+3 New Products were added!
Congratulations!
-
1 day ago
+290 Page Likes
This is great, keep it up!
-
2 days ago
+3 Friend Requests
JL
<div class="card">
<div class="card-header">
<h3 class="card-title">Timeline</h3>
</div>
<div class="card-body">
<ul class="list list-timeline list-timeline-simple">
<li>
<div class="list-timeline-icon bg-twitter"><!-- SVG icon code -->
</div>
<div class="list-timeline-content">
<div class="list-timeline-time">10 hrs ago</div>
<p class="list-timeline-title">+1150 Followers</p>
<p class="text-muted">You’re getting more and more followers, keep it up!</p>
</div>
</li>
<li>
<div class="list-timeline-icon bg-red"><!-- SVG icon code -->
</div>
<div class="list-timeline-content">
<div class="list-timeline-time">2 hrs ago</div>
<p class="list-timeline-title">+3 New Products were added!</p>
<p class="text-muted">Congratulations!</p>
</div>
</li>
<li>
<div class="list-timeline-icon bg-success"><!-- SVG icon code -->
</div>
<div class="list-timeline-content">
<div class="list-timeline-time">1 day ago</div>
<p class="list-timeline-title">Database backup completed!</p>
<p class="text-muted">Download the <a href="#">latest backup</a>.</p>
</div>
</li>
<li>
<div class="list-timeline-icon bg-facebook"><!-- SVG icon code -->
</div>
<div class="list-timeline-content">
<div class="list-timeline-time">1 day ago</div>
<p class="list-timeline-title">+290 Page Likes</p>
<p class="text-muted">This is great, keep it up!</p>
</div>
</li>
<li>
<div class="list-timeline-icon bg-teal"><!-- SVG icon code -->
</div>
<div class="list-timeline-content">
<div class="list-timeline-time">2 days ago</div>
<p class="list-timeline-title">+3 Friend Requests</p>
<div class="avatar-list mt-3">
<span class="avatar" style="background-image: url(...)">
<span class="badge bg-success"></span></span>
<span class="avatar">
<span class="badge bg-success"></span>JL</span>
<span class="avatar" style="background-image: url(...)">
<span class="badge bg-success"></span></span>
</div>
</div>
</li>
<li>
<div class="list-timeline-icon bg-yellow"><!-- SVG icon code -->
</div>
<div class="list-timeline-content">
<div class="list-timeline-time">3 days ago</div>
<p class="list-timeline-title">+2 New photos</p>
<div class="mt-3">
<div class="row row-sm">
<div class="col-6">
<div class="media media-2x1 rounded">
<a class="media-content" style="background-image: url(...)"></a>
</div>
</div>
<div class="col-6">
<div class="media media-2x1 rounded">
<a class="media-content" style="background-image: url(...)"></a>
</div>
</div>
</div>
</div>
</div>
</li>
<li>
<div class="list-timeline-icon"><!-- SVG icon code -->
</div>
<div class="list-timeline-content">
<div class="list-timeline-time">2 weeks ago</div>
<p class="list-timeline-title">System updated to v2.02</p>
<p class="text-muted">Check the complete changelog at the <a href="#">activity
page</a>.</p>
</div>
</li>
</ul>
</div>
</div>