admin-lte

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta http-equiv="x-ua-compatible" content="ie=edge"> <title>Timeline Component | AdminLTE 3 Documentation</title>  <title>Timeline Component | AdminLTE v3 Documentaion</title> <meta name="generator" content="Jekyll v3.8.5" /> <meta property="og:title" content="Timeline Component" /> <meta property="og:locale" content="en_US" /> <meta name="description" content="AdminLTE v3 Documentaion" /> <meta property="og:description" content="AdminLTE v3 Documentaion" /> <meta property="og:site_name" content="AdminLTE v3 Documentaion" /> <script type="application/ld+json"> {"description":"AdminLTE v3 Documentaion","@type":"WebPage","url":"/components/timeline.html","headline":"Timeline Component","@context":"http://schema.org"}</script>  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700"> <link rel="stylesheet" href="/assets/plugins/fontawesome-free/css/all.min.css"> <link rel="stylesheet" href="/assets/plugins/overlayScrollbars/css/OverlayScrollbars.min.css"> <link rel="stylesheet" href="/assets/css/docs.css"> <link rel="stylesheet" href="/assets/css/highlighter.css"> <link rel="stylesheet" href="/assets/css/adminlte.min.css"> </head> <body class="hold-transition sidebar-mini layout-fixed layout-navbar-fixed"> <div class="wrapper"> <nav class="main-header navbar navbar-expand navbar-white navbar-light"> <ul class="navbar-nav"> <li class="nav-item"> <a class="nav-link" data-widget="pushmenu" href="#"><i class="fa fa-bars"></i></a> </li> <li class="nav-item dropdown"> <a class="nav-link bg-info rounded dropdown-toggle" href="#" id="navbarVersionDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> v3.0 </a> <div class="dropdown-menu py-0" aria-labelledby="navbarVersionDropdown"> <a class="dropdown-item bg-info disabled" href="#">v3.0</a> <div class="dropdown-divider"></div> <a class="dropdown-item" href="https://adminlte.io/docs/2.4/installation">v2.4</a> <a class="dropdown-item" href="https://adminlte.io/themes/AdminLTE/documentation/index.html"><= v2.3</a> </div> </li> </ul> <ul class="navbar-nav ml-auto">  </ul>   </nav> <aside class="main-sidebar sidebar-dark-primary elevation-4"> <a href="/index.html" class="brand-link logo-switch"> <img src="/assets/img/logo-xs.png" alt="AdminLTE Docs Logo Small" class="brand-image-xl logo-xs"> <img src="/assets/img/logo-xl.png" alt="AdminLTE Docs Logo Large" class="brand-image-xs logo-xl" style="left: 12px"> </a> <div class="sidebar"> <nav class="mt-2"> <ul class="nav nav-pills nav-sidebar nav-child-indent flex-column" data-widget="treeview" role="menu"> <li class="nav-item "> <a href="/index.html" class="nav-link "> <i class="nav-icon fas fa-microchip"></i> <p> Installation </p> </a> </li> <li class="nav-item "> <a href="/dependencies.html" class="nav-link "> <i class="nav-icon fas fa-handshake"></i> <p> Dependencies & Plugins </p> </a> </li> <li class="nav-item "> <a href="/layout.html" class="nav-link "> <i class="nav-icon fas fa-copy"></i> <p> Layout </p> </a> </li> <li class="nav-item has-treeview menu-open"> <a href="/components" class="nav-link active"> <i class="nav-icon fas fa-th"></i> <p> Components <i class="right fas fa-angle-left"></i> </p> </a> <ul class="nav nav-treeview"> <li class="nav-item"> <a href="/components/main-header.html" class="nav-link "> <i class="far fa-circle nav-icon"></i> <p>Main Header</p> </a> </li> <li class="nav-item"> <a href="/components/main-sidebar.html" class="nav-link "> <i class="far fa-circle nav-icon"></i> <p>Main Sidebar</p> </a> </li> <li class="nav-item"> <a href="/components/control-sidebar.html" class="nav-link "> <i class="far fa-circle nav-icon"></i> <p>Control Sidebar</p> </a> </li> <li class="nav-item"> <a href="/components/cards.html" class="nav-link "> <i class="far fa-circle nav-icon"></i> <p>Card</p> </a> </li> <li class="nav-item"> <a href="/components/boxes.html" class="nav-link "> <i class="far fa-circle nav-icon"></i> <p>Small-/ Info-Box</p> </a> </li> <li class="nav-item"> <a href="/components/direct-chat.html" class="nav-link "> <i class="far fa-circle nav-icon"></i> <p>Direct Chat</p> </a> </li> <li class="nav-item"> <a href="/components/timeline.html" class="nav-link active"> <i class="far fa-circle nav-icon"></i> <p>Timeline</p> </a> </li> <li class="nav-item"> <a href="/components/ribbons.html" class="nav-link "> <i class="far fa-circle nav-icon"></i> <p>Ribbons</p> </a> </li> <li class="nav-item"> <a href="/components/miscellaneous.html" class="nav-link "> <i class="far fa-circle nav-icon"></i> <p>Miscellaneous</p> </a> </li> <li class="nav-item"> <a href="/components/plugins.html" class="nav-link "> <i class="far fa-circle nav-icon"></i> <p>Plugins</p> </a> </li> </ul> </li> <li class="nav-item has-treeview "> <a href="/javascript" class="nav-link "> <i class="nav-icon fas fa-code"></i> <p> JavaScript <i class="right fas fa-angle-left"></i> </p> </a> <ul class="nav nav-treeview"> <li class="nav-item"> <a href="/javascript/layout.html" class="nav-link "> <i class="far fa-circle nav-icon"></i> <p>Layout</p> </a> </li> <li class="nav-item"> <a href="/javascript/push-menu.html" class="nav-link "> <i class="far fa-circle nav-icon"></i> <p>Push Menu</p> </a> </li> <li class="nav-item"> <a href="/javascript/treeview.html" class="nav-link "> <i class="far fa-circle nav-icon"></i> <p>Treeview</p> </a> </li> <li class="nav-item"> <a href="/javascript/card-widget.html" class="nav-link "> <i class="far fa-circle nav-icon"></i> <p>Card Widget</p> </a> </li> <li class="nav-item"> <a href="/javascript/card-refresh.html" class="nav-link "> <i class="far fa-circle nav-icon"></i> <p>CardRefresh</p> </a> </li> <li class="nav-item"> <a href="/javascript/control-sidebar.html" class="nav-link "> <i class="far fa-circle nav-icon"></i> <p>Control Sidebar</p> </a> </li> <li class="nav-item"> <a href="/javascript/direct-chat.html" class="nav-link "> <i class="far fa-circle nav-icon"></i> <p>Direct Chat</p> </a> </li> <li class="nav-item"> <a href="/javascript/todo-list.html" class="nav-link "> <i class="far fa-circle nav-icon"></i> <p>Todo List</p> </a> </li> <li class="nav-item"> <a href="/javascript/toasts.html" class="nav-link "> <i class="far fa-circle nav-icon"></i> <p>Toasts</p> </a> </li> </ul> </li> <li class="nav-item "> <a href="/browser-support.html" class="nav-link "> <i class="nav-icon fab fa-chrome"></i> <p> Browser Support </p> </a> </li> <li class="nav-item "> <a href="/upgrade-guide.html" class="nav-link "> <i class="nav-icon fas fa-hand-point-up"></i> <p> Upgrade Guide </p> </a> </li> <li class="nav-item "> <a href="/implementations.html" class="nav-link "> <i class="nav-icon fas fa-bookmark"></i> <p> Implementations </p> </a> </li> <li class="nav-item "> <a href="/faq.html" class="nav-link "> <i class="nav-icon fas fa-question-circle"></i> <p> FAQ </p> </a> </li> <li class="nav-item "> <a href="/license.html" class="nav-link "> <i class="nav-icon fas fa-file-alt"></i> <p> License </p> </a> </li> </ul> </nav> </div> </aside> <div class="content-wrapper px-4 py-2"> <div class="content-header"> <h1 class="text-dark">Timeline Component</h1> </div> <div class="content px-2"> <p>The timeline component displays an event history. You can use it for descriptions of events that occurred in a particular time section.</p> <h5>Default</h5> <div class="language-html max-height-300 highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c"></span> <span class="nt"><div</span> <span class="na">class=</span><span class="s">"timeline"</span><span class="nt">></span> <span class="c"></span> <span class="nt"><div</span> <span class="na">class=</span><span class="s">"time-label"</span><span class="nt">></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"bg-green"</span><span class="nt">></span>23 Aug. 2019<span class="nt"></span></span> <span class="nt"></div></span> <span class="nt"><div></span> <span class="c"></span> <span class="nt"><i</span> <span class="na">class=</span><span class="s">"fas fa-envelope bg-blue"</span><span class="nt">></i></span> <span class="c"></span> <span class="nt"><div</span> <span class="na">class=</span><span class="s">"timeline-item"</span><span class="nt">></span> <span class="c"></span> <span class="nt"><span</span> <span class="na">class=</span><span class="s">"time"</span><span class="nt">><i</span> <span class="na">class=</span><span class="s">"fas fa-clock"</span><span class="nt">></i></span> 12:05<span class="nt"></span></span> <span class="c"></span> <span class="nt"><h3</span> <span class="na">class=</span><span class="s">"timeline-header"</span><span class="nt">><a</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span>Support Team<span class="nt"></a></span> sent you an email<span class="nt"></h3></span> <span class="c"></span> <span class="nt"><div</span> <span class="na">class=</span><span class="s">"timeline-body"</span><span class="nt">></span> Etsy doostang zoodles disqus groupon greplin oooj voxy zoodles, weebly ning heekya handango imeem plugg dopplr jibjab, movity jajah plickers sifteo edmodo ifttt zimbra. Babblely odeo kaboodle quora plaxo ideeli hulu weebly balihoo... <span class="nt"></div></span> <span class="c"></span> <span class="nt"><div</span> <span class="na">class=</span><span class="s">"timeline-footer"</span><span class="nt">></span> <span class="nt"><a</span> <span class="na">class=</span><span class="s">"btn btn-primary btn-sm"</span><span class="nt">></span>Read more<span class="nt"></a></span> <span class="nt"><a</span> <span class="na">class=</span><span class="s">"btn btn-danger btn-sm"</span><span class="nt">></span>Delete<span class="nt"></a></span> <span class="nt"></div></span> <span class="nt"></div></span> <span class="nt"></div></span> <span class="c"></span> <span class="nt"><div></span> <span class="nt"><i</span> <span class="na">class=</span><span class="s">"fas fa-clock bg-gray"</span><span class="nt">></i></span> <span class="nt"></div></span> <span class="nt"></div></span> </code></pre></div></div> <h5>Extra style</h5> <p>There is an additional class for styling. It darkens the elements, highlighting it against the general background. You can use it with adding <code class="highlighter-rouge">.timeline-inverse</code> to <code class="highlighter-rouge">.timeline</code>.</p> <div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><div</span> <span class="na">class=</span><span class="s">"timeline timeline-inverse"</span><span class="nt">></span> <span class="c"></span> <span class="nt"></div></span> </code></pre></div></div> </div> </div> <footer class="main-footer"> <div class="float-right d-none d-sm-inline"> v3.0.1 </div> <strong>Copyright © 2014-2019 <a href="https://adminlte.io">AdminLTE.io</a>.</strong> All rights reserved. </footer> </div> <script src="/assets/plugins/jquery/jquery.min.js"></script> <script src="/assets/plugins/bootstrap/js/bootstrap.bundle.min.js"></script> <script src="/assets/plugins/overlayScrollbars/js/jquery.overlayScrollbars.min.js"></script> <script src="/assets/js/adminlte.min.js"></script> </body> </html>