Timelines
Use the premium timeline elements to show a information in a cronological way
Example
React
Exercitation photo booth stumptown tote bag Banksy, elit small batch freegan sed. Craft beer elit seitan exercitation, photo booth et 8-bit kale chips proident chillwave deep v laborum.
VueJs
Bootstrap. Build responsive, mobile-first projects on the web with the world's most popular front-end component library. Bootstrap is an open source toolkit for developing with HTML, CSS, and JS. Quickly prototype your ideas.
Angular
AngularJS is a JavaScript-based open-source front-end web application framework mainly maintained by Google and by a community of individuals and corporations to address many of the challenges encountered in developing single-page applications.
<div class="timeline timeline-one">
<!-- Timeline Item 1 -->
<div class="timeline-item">
<span class="icon icon-info icon-lg"><span class="fab fa-react"></span></span>
<h2 class="h5 my-3">React</h2>
<p>Exercitation photo booth stumptown tote bag Banksy, elit small batch freegan sed. Craft beer elit seitan exercitation, photo booth et 8-bit kale chips proident chillwave deep v laborum.</p>
</div>
<!-- Timeline Item 2 -->
<div class="timeline-item">
<span class="icon icon-success"><span class="fab fa-vuejs"></span></span>
<h2 class="h5 my-3">VueJs</h2>
<p>Bootstrap. Build responsive, mobile-first projects on the web with the world's most popular front-end component library. Bootstrap is an open source toolkit for developing with HTML, CSS, and JS. Quickly prototype your
ideas.
</p>
</div>
<!-- Timeline Item 3 -->
<div class="timeline-item">
<span class="icon icon-danger"><span class="fab fa-angular"></span></span>
<h2 class="h5 my-3">Angular</h2>
<p>AngularJS is a JavaScript-based open-source front-end web application framework mainly maintained by Google and by a community of individuals and corporations to address many of the challenges encountered in developing
single-page applications.</p>
</div>
</div>Posts
We open our first office
Exercitation photo booth stumptown tote bag Banksy, elit small batch freegan sed. Craft beer elit seitan exercitation, photo booth et 8-bit kale chips proident chillwave deep v laborum.
See storyWe sold more than 1000 copies
Bootstrap. Build responsive, mobile-first projects on the web with the world's most popular front-end component library. Bootstrap is an open source toolkit for developing with HTML, CSS, and JS. Quickly prototype your ideas.
See storyThe begining
AngularJS is a JavaScript-based open-source front-end web application framework mainly maintained by Google and by a community of individuals and corporations to address many of the challenges encountered in developing single-page applications.
See story<div class="timeline timeline-two">
<!-- Timeline Item 1 -->
<div class="timeline-item rounded border border-gray-300">
<div class="post-meta mb-3">
<a class="fw-bold me-3" href="#"><span class="far fa-heart me-1"></span>2.1k</a>
<span class="text-gray"><span class="far fa-clock me-1"></span>Jan 03, 2019</span>
</div>
<h2 class="h4 mb-4">We open our first office</h2>
<p>Exercitation photo booth stumptown tote bag Banksy, elit small batch freegan sed. Craft beer elit seitan exercitation, photo booth et 8-bit kale chips proident chillwave deep v laborum.</p>
<a href="#" class="btn btn-primary btn-sm btn-icon animate-up-1">
See story
</a>
</div>
<!-- Timeline Item 2 -->
<div class="timeline-item rounded border border-gray-300">
<div class="post-meta mb-3">
<a class="fw-bold me-3" href="#"><span class="far fa-heart me-1"></span>10k</a>
<span class="text-gray"><span class="far fa-clock me-1"></span>Mar 10, 2021</span>
</div>
<h2 class="h4 mb-4">We sold more than 1000 copies </h2>
<p>Bootstrap. Build responsive, mobile-first projects on the web with the world's most popular front-end component library. Bootstrap is an open source toolkit for developing with HTML, CSS, and JS. Quickly prototype your ideas.</p>
<a href="#" class="btn btn-primary btn-sm btn-icon animate-up-1">
See story
</a>
</div>
<!-- Timeline Item 3 -->
<div class="timeline-item rounded border border-gray-300">
<div class="post-meta mb-3">
<a class="fw-bold me-3" href="#"><span class="far fa-heart me-1"></span>10k</a>
<span class="text-gray"><span class="far fa-clock me-1"></span>Aug 20, 2029</span>
</div>
<h2 class="h4 mb-4">The begining</h2>
<p>AngularJS is a JavaScript-based open-source front-end web application framework mainly maintained by Google and by a community of individuals and corporations to address many of the challenges encountered in developing single-page applications.</p>
<a href="#" class="btn btn-primary btn-sm btn-icon animate-up-1">
See story
</a>
</div>
</div>Alternating
Organic shape
Picseel ipsum dolor sit amet, consectetur adipiscing elit. Sed porttitor gravida aliquam. Morbi orci urna, iaculis in ligula et, posuere interdum lectus.
Circle shape
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed porttitor gravida aliquam. Morbi orci urna, iaculis in ligula et, posuere interdum lectus.
Square shape
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed porttitor gravida aliquam. Morbi orci urna, iaculis in ligula et, posuere interdum lectus.
<div class="vertical-timeline">
<!-- Timeline Item 1 -->
<div class="row d-flex align-items-center">
<div class="col-md-2 text-center bottom">
<div class="shape bg-secondary d-flex align-items-center justify-content-center organic-radius icon-white">
<span class="fab fa-angular"></span>
</div>
</div>
<div class="col-md-6">
<h2 class="h6">Organic shape</h2>
<p>Picseel ipsum dolor sit amet, consectetur adipiscing elit. Sed porttitor gravida aliquam. Morbi orci urna, iaculis in ligula et, posuere interdum lectus.</p>
</div>
</div>
<div class="row timeline-inner">
<div class="col-md-2">
<div class="corner top-right"></div>
</div>
<div class="col-md-8">
<hr>
</div>
<div class="col-md-2">
<div class="corner left-bottom"></div>
</div>
</div>
<!-- Timeline Item 2 -->
<div class="row align-items-center justify-content-end vertical-timeline">
<div class="col-md-6 text-right">
<h2 class="h6">Circle shape</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed porttitor gravida aliquam. Morbi orci urna, iaculis in ligula et, posuere interdum lectus.</p>
</div>
<div class="col-md-2 text-center full">
<div class="shape bg-secondary right d-flex align-items-center justify-content-center icon-white rounded-circle">
<span class="fab fa-vuejs"></span>
</div>
</div>
</div>
<div class="row timeline-inner">
<div class="col-md-2">
<div class="corner right-bottom"></div>
</div>
<div class="col-md-8">
<hr>
</div>
<div class="col-md-2">
<div class="corner top-left"></div>
</div>
</div>
<!-- Timeline Item 3 -->
<div class="row align-items-center vertical-timeline">
<div class="col-md-2 text-center top">
<div class="shape bg-secondary rounded d-flex align-items-center justify-content-center icon-white">
<span class="fab fa-react"></span>
</div>
</div>
<div class="col-md-6">
<h2 class="h6">Square shape</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed porttitor gravida aliquam. Morbi orci urna, iaculis in ligula et, posuere interdum lectus.</p>
</div>
</div>
</div>Alternating creative
2018-2019
Business
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed efficitur ex sit amet massa scelerisque scelerisque. Aliquam erat volutpat. Aenean interdum finibus efficitur.
2017-2018
Development
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed efficitur ex sit amet massa scelerisque scelerisque. Aliquam erat volutpat. Aenean interdum finibus efficitur.
2015-2016
Marketing
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed efficitur ex sit amet massa scelerisque scelerisque. Aliquam erat volutpat. Aenean interdum finibus efficitur.
<!-- Timeline -->
<div class="timeline timeline-four">
<!-- Timeline Item 1 -->
<div class="timeline-item">
<div class="icon"></div>
<div class="date-content">
<div class="date-outer">
<span class="date">
<span class="year">2018-2019</span>
</span>
</div>
</div>
<div class="timeline-content">
<h2 class="h5 title">Business</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed efficitur ex sit amet massa scelerisque scelerisque. Aliquam erat volutpat. Aenean interdum finibus efficitur.</p>
</div>
</div>
<!-- Timeline Item 2 -->
<div class="timeline-item">
<div class="icon"></div>
<div class="date-content">
<div class="date-outer">
<span class="date">
<span class="year">2017-2018</span>
</span>
</div>
</div>
<div class="timeline-content">
<h2 class="h5 title">Development</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed efficitur ex sit amet massa scelerisque scelerisque. Aliquam erat volutpat. Aenean interdum finibus efficitur.</p>
</div>
</div>
<!-- Timeline Item 3 -->
<div class="timeline-item">
<div class="icon"></div>
<div class="date-content">
<div class="date-outer">
<span class="date">
<span class="year">2015-2016</span>
</span>
</div>
</div>
<div class="timeline-content">
<h2 class="h5 title">Marketing</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed efficitur ex sit amet massa scelerisque scelerisque. Aliquam erat volutpat. Aenean interdum finibus efficitur.</p>
</div>
</div>
</div>
<!-- End of Timeline -->User posts
Time Schedule 1
Stay organized, reduce stress, and accomplish personal and business goals with a daily schedule template. It’s a simple yet effective time-management tool for any daily activity, whether you’re managing a busy work schedule, academic assignments or family chores.
08:30 - 09:00 Breakfast in Town
09:00 - 10:30 Attend a team meeting
10:30 - 10:45 Research on new technologies and tools
10:45 - 12:00 It’s a good idea to review the day’s work
Time Schedule 2
Stay organized, reduce stress, and accomplish personal and business goals with a daily schedule template. It’s a simple yet effective time-management tool for any daily activity, whether you’re managing a busy work schedule, academic assignments or family chores.
08:30 - 09:00 Breakfast in Town
09:00 - 10:30 Attend a team meeting
10:30 - 10:45 Research on new technologies and tools
10:45 - 12:00 It’s a good idea to review the day’s work
Time Schedule 3
Stay organized, reduce stress, and accomplish personal and business goals with a daily schedule template. It’s a simple yet effective time-management tool for any daily activity, whether you’re managing a busy work schedule, academic assignments or family chores.
08:30 - 09:00 Breakfast in Town
09:00 - 10:30 Attend a team meeting
10:30 - 10:45 Research on new technologies and tools
10:45 - 12:00 It’s a good idea to review the day’s work
<div class="timeline timeline-five px-3 px-sm-0">
<!-- Item 1 -->
<div class="row">
<!-- timeline item 1 center image & middle line -->
<div class="col-auto text-center flex-column d-none d-sm-flex">
<div class="d-flex h-50">
<div class="col"> </div>
<div class="col"> </div>
</div>
<span class="m-3 avatar-separator">
<img class="img-fluid rounded-circle" src="../../assets/img/team/profile-picture-1.jpg" alt="John Portrait">
</span>
<div class="d-flex h-50">
<div class="col middle-line"> </div>
<div class="col"> </div>
</div>
</div>
<!-- Timeline item 1 content-->
<div class="col-12 col-lg-12 col-xl-11 my-4">
<div class="card border-gray-300 text-primary p-4">
<div class="card-body">
<div class="post-meta mb-3">
<a class="text-primary" href="#"><span class="far fa-thumbs-up me-1"></span>345</a>
</div>
<h2 class="h5 card-title text-primary">Time Schedule 1</h2>
<p>Stay organized, reduce stress, and accomplish personal and business goals with a daily schedule template. It’s a simple yet effective time-management tool for any daily activity, whether you’re managing a busy work schedule, academic assignments or family chores. </p>
<button class="btn btn-sm btn-primary" type="button" data-bs-target="#t1_details" data-bs-toggle="collapse">Show Details <span class="fas fa-angle-down toggle-arrow ms-1"></span></button>
<div class="collapse" id="t1_details">
<div class="p-2 mt-3 text-monospace">
<div>08:30 - 09:00 Breakfast in Town</div>
<div>09:00 - 10:30 Attend a team meeting</div>
<div>10:30 - 10:45 Research on new technologies and tools</div>
<div>10:45 - 12:00 It’s a good idea to review the day’s work</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Item 2 -->
<div class="row">
<!-- timeline item 2 center image & middle line -->
<div class="col-auto text-center flex-column d-none d-sm-flex">
<div class="d-flex h-50">
<div class="col middle-line"> </div>
<div class="col"> </div>
</div>
<span class="m-3 avatar-separator">
<img class="img-fluid rounded-circle" src="../../assets/img/team/profile-picture-2.jpg" alt="Bonnie Portrait">
</span>
<div class="d-flex h-50">
<div class="col middle-line"> </div>
<div class="col"> </div>
</div>
</div>
<!-- Timeline item 2 content -->
<div class="col-12 col-lg-12 col-xl-11 my-4">
<div class="card border-gray-300 p-4">
<div class="card-body">
<div class="post-meta mb-3">
<a class="text-secondary" href="#"><span class="far fa-thumbs-up me-1"></span>515</a>
</div>
<h2 class="h5 card-title">Time Schedule 2</h2>
<p>Stay organized, reduce stress, and accomplish personal and business goals with a daily schedule template. It’s a simple yet effective time-management tool for any daily activity, whether you’re managing a busy work schedule, academic assignments or family chores. </p>
<button class="btn btn-sm btn-primary" type="button" data-bs-target="#t2_details" data-bs-toggle="collapse">Show Details <span class="fas fa-angle-down toggle-arrow ms-1"></span></button>
<div class="collapse" id="t2_details">
<div class="p-2 mt-3 text-monospace">
<div>08:30 - 09:00 Breakfast in Town</div>
<div>09:00 - 10:30 Attend a team meeting</div>
<div>10:30 - 10:45 Research on new technologies and tools</div>
<div>10:45 - 12:00 It’s a good idea to review the day’s work</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Timeline Item 3 -->
<div class="row">
<!-- timeline item 3 center image & middle line -->
<div class="col-auto text-center flex-column d-none d-sm-flex">
<div class="d-flex h-50">
<div class="col middle-line"> </div>
<div class="col"> </div>
</div>
<span class="m-3 avatar-separator">
<img class="img-fluid rounded-circle" src="../../assets/img/team/profile-picture-3.jpg" alt="Jax Portrait">
</span>
<div class="d-flex h-50">
<div class="col middle-line"> </div>
<div class="col"> </div>
</div>
</div>
<!-- Timeline item 3 content -->
<div class="col-12 col-lg-12 col-xl-11 my-4">
<div class="card border-gray-300 p-4">
<div class="card-body">
<div class="post-meta mb-3">
<a href="#"><span class="far fa-thumbs-up me-1"></span>115</a>
</div>
<h2 class="h5 card-title">Time Schedule 3</h2>
<p>Stay organized, reduce stress, and accomplish personal and business goals with a daily schedule template. It’s a simple yet effective time-management tool for any daily activity, whether you’re managing a busy work schedule, academic assignments or family chores. </p>
<button class="btn btn-sm btn-primary" type="button" data-bs-target="#t3_details" data-bs-toggle="collapse">Show Details <span class="fas fa-angle-down toggle-arrow ms-1"></span></button>
<div class="collapse" id="t3_details">
<div class="p-2 mt-3 text-monospace">
<div>08:30 - 09:00 Breakfast in Town</div>
<div>09:00 - 10:30 Attend a team meeting</div>
<div>10:30 - 10:45 Research on new technologies and tools</div>
<div>10:45 - 12:00 It’s a good idea to review the day’s work</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>User posts alternating
<!-- Timeline -->
<div class="timeline timeline-six px-3 px-sm-0">
<!-- Timeline Item 1 -->
<div class="row g-0">
<div class="col-sm">
<!--spacer-->
</div>
<!-- timeline item 1 center image & middle line -->
<div class="col-sm-2 col-md-1 text-center flex-column d-none d-sm-flex">
<div class="d-flex h-50">
<div class="col"> </div>
<div class="col"> </div>
</div>
<span class="m-3 avatar-separator">
<img class="img-fluid organic-radius border-primary" src="../../assets/img/team/profile-picture-1.jpg" alt="Christopher Portrait">
</span>
<div class="d-flex h-50">
<div class="col middle-line"> </div>
<div class="col"> </div>
</div>
</div>
<!-- timeline profile card -->
<div class="col-sm py-2">
<div class="card border-gray-300">
<div class="card-body">
<h2 class="h5 mb-2">Christopher Wood</h2>
<span class="h6 text-gray">Director</span>
<p class="card-text mt-3 mb-4">I spend my days with my hands in many different areas of web development from back end programming to front end engineering, digital accessibility, user experience and visual design.</p>
<ul class="list-unstyled d-flex mt-3 mb-0">
<li>
<a href="#" target="_blank" aria-label="facebook social link" class="icon icon-xs icon-facebook me-3">
<span class="fab fa-facebook-f"></span>
</a>
</li>
<li>
<a href="#" target="_blank" aria-label="twitter social link" class="icon icon-xs icon-twitter me-3">
<span class="fab fa-twitter"></span>
</a>
</li>
<li>
<a href="#" target="_blank" aria-label="slack social link" class="icon icon-xs icon-slack me-3">
<span class="fab fa-slack-hash"></span>
</a>
</li>
<li>
<a href="#" target="_blank" aria-label="dribbble social link" class="icon icon-xs icon-dribbble me-3">
<span class="fab fa-dribbble"></span>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<!-- Timeline Item 2 -->
<div class="row g-0">
<!-- timeline profile card -->
<div class="col-sm py-2">
<div class="card border-gray-300">
<div class="card-body">
<h2 class="h5 mb-2">Jose Leos</h2>
<span class="h6 text-gray">Web Developer</span>
<p class="card-text mt-3 mb-4">I spend my days with my hands in many different areas of web development from back end programming to front end engineering, digital accessibility, user experience and visual design.</p>
<ul class="list-unstyled d-flex mt-3 mb-0">
<li>
<a href="#" target="_blank" aria-label="facebook social link" class="icon icon-xs icon-facebook me-3">
<span class="fab fa-facebook-f"></span>
</a>
</li>
<li>
<a href="#" target="_blank" aria-label="twitter social link" class="icon icon-xs icon-twitter me-3">
<span class="fab fa-twitter"></span>
</a>
</li>
<li>
<a href="#" target="_blank" aria-label="slack social link" class="icon icon-xs icon-slack me-3">
<span class="fab fa-slack-hash"></span>
</a>
</li>
<li>
<a href="#" target="_blank" aria-label="dribbble social link" class="icon icon-xs icon-dribbble me-3">
<span class="fab fa-dribbble"></span>
</a>
</li>
</ul>
</div>
</div>
</div>
<!-- timeline item 2 center image & middle line -->
<div class="col-sm-2 col-md-1 text-center flex-column d-none d-sm-flex">
<div class="d-flex h-50">
<div class="col middle-line"> </div>
<div class="col"> </div>
</div>
<span class="m-3 avatar-separator">
<img class="img-fluid organic-radius border-primary" src="../../assets/img/team/profile-picture-2.jpg" alt="Jose Portrait">
</span>
<div class="d-flex h-50">
<div class="col middle-line"> </div>
<div class="col"> </div>
</div>
</div>
<div class="col-sm">
<!--spacer-->
</div>
</div>
<!-- Timeline Item 3 -->
<div class="row g-0">
<div class="col-sm">
<!--spacer-->
</div>
<!-- timeline item 3 center image & middle line -->
<div class="col-sm-2 col-md-1 text-center flex-column d-none d-sm-flex">
<div class="d-flex h-50">
<div class="col middle-line"> </div>
<div class="col"> </div>
</div>
<span class="m-3 avatar-separator">
<img class="img-fluid organic-radius border-primary" src="../../assets/img/team/profile-picture-3.jpg" alt="Bonnie Portrait">
</span>
<div class="d-flex h-50">
<div class="col middle-line"> </div>
<div class="col"> </div>
</div>
</div>
<!-- timeline profile card -->
<div class="col-sm py-2">
<div class="card border-gray-300">
<div class="card-body">
<h2 class="h5 mb-2">Bonnie Green</h2>
<span class="h6 text-gray">Marketing / SEO</span>
<p class="card-text mt-3 mb-4">I spend my days with my hands in many different areas of web development from back end programming to front end engineering, digital accessibility, user experience and visual design.</p>
<ul class="list-unstyled d-flex mt-3 mb-0">
<li>
<a href="#" target="_blank" aria-label="facebook social link" class="icon icon-xs icon-facebook me-3">
<span class="fab fa-facebook-f"></span>
</a>
</li>
<li>
<a href="#" target="_blank" aria-label="twitter social link" class="icon icon-xs icon-twitter me-3">
<span class="fab fa-twitter"></span>
</a>
</li>
<li>
<a href="#" target="_blank" aria-label="slack social link" class="icon icon-xs icon-slack me-3">
<span class="fab fa-slack-hash"></span>
</a>
</li>
<li>
<a href="#" target="_blank" aria-label="dribbble social link" class="icon icon-xs icon-dribbble me-3">
<span class="fab fa-dribbble"></span>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<!-- Timeline Item 4 -->
<div class="row g-0">
<!-- timeline profile card -->
<div class="col-sm py-2">
<div class="card border-gray-300">
<div class="card-body">
<h2 class="h5 mb-2">Neil Sims</h2>
<span class="h6 text-gray">Photoshop Artist</span>
<p class="card-text mt-3 mb-4">I spend my days with my hands in many different areas of web development from back end programming to front end engineering, digital accessibility, user experience and visual design.</p>
<ul class="list-unstyled d-flex mt-3 mb-0">
<li>
<a href="#" target="_blank" aria-label="facebook social link" class="icon icon-xs icon-facebook me-3">
<span class="fab fa-facebook-f"></span>
</a>
</li>
<li>
<a href="#" target="_blank" aria-label="twitter social link" class="icon icon-xs icon-twitter me-3">
<span class="fab fa-twitter"></span>
</a>
</li>
<li>
<a href="#" target="_blank" aria-label="slack social link" class="icon icon-xs icon-slack me-3">
<span class="fab fa-slack-hash"></span>
</a>
</li>
<li>
<a href="#" target="_blank" aria-label="dribbble social link" class="icon icon-xs icon-dribbble me-3">
<span class="fab fa-dribbble"></span>
</a>
</li>
</ul>
</div>
</div>
</div>
<!-- timeline item 4 center image & middle line -->
<div class="col-sm-2 col-md-1 text-center flex-column d-none d-sm-flex">
<div class="d-flex h-50">
<div class="col middle-line"> </div>
<div class="col"> </div>
</div>
<span class="m-3 avatar-separator">
<img class="img-fluid organic-radius border-primary" src="../../assets/img/team/profile-picture-4.jpg" alt="Neil Portrait">
</span>
<div class="d-flex h-50">
<div class="col"> </div>
<div class="col"> </div>
</div>
</div>
<div class="col-sm">
<!--spacer-->
</div>
</div>
</div>
<!-- End of Timeline -->