Timelines
Use timelines to indicate a cronological type of information
Timeline with icons
You can use any icons from the Font Awesome library to add for each timeline element:
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="row mt-4">
<div class="col-12 mx-auto">
<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>
</div>
</div>Timeline stories
The following timeline can be used for stories, events, blog 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="row mt-4">
<div class="col-12 mx-auto">
<!-- Timeline -->
<div class="timeline timeline-two">
<!-- Timeline Item 1 -->
<div class="timeline-item rounded border border-light">
<div class="post-meta mb-3">
<a class="font-weight-bold mr-3" href="#"><i class="far fa-heart mr-1"></i>2.1k</a>
<span class="text-gray"><i class="far fa-clock mr-1"></i>Jan 03, 2019</span>
</div>
<h4 class="mb-4">We open our first office</h4>
<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-light">
<div class="post-meta mb-3">
<a class="font-weight-bold mr-3" href="#"><i class="far fa-heart mr-1"></i>10k</a>
<span class="text-gray"><i class="far fa-clock mr-1"></i>Mar 10, 2020</span>
</div>
<h4 class="mb-4">We sold more than 1000 copies </h4>
<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-light">
<div class="post-meta mb-3">
<a class="font-weight-bold mr-3" href="#"><i class="far fa-heart mr-1"></i>10k</a>
<span class="text-gray"><i class="far fa-clock mr-1"></i>Aug 20, 2029</span>
</div>
<h4 class="mb-4">The begining</h4>
<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>
<!-- End of Timeline -->
</div>
</div>Timeline shapes
You can use organic, circle and square shapes for the icons on the timeline:
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.
<div class="row mt-4">
<div class="col-12">
<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>
</div>Timeline date
The following example indicates a date and it is also a creative timeline:
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.
<div class="row mt-4">
<div class="col-md-12 mx-auto">
<!-- 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">
<i class="far fa-money-bill-alt"></i>
<span class="year mt-1">2018-2019</span>
</span>
</div>
</div>
<div class="timeline-content">
<h5 class="title">Business</h5>
<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">
<i class="far fa-lightbulb"></i>
<span class="year mt-1">2017-2018</span>
</span>
</div>
</div>
<div class="timeline-content">
<h5 class="title">Development</h5>
<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">
<i class="far fa-paper-plane"></i>
<span class="year mt-1">2015-2016</span>
</span>
</div>
</div>
<div class="timeline-content">
<h5 class="title">Marketing</h5>
<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 -->
</div>
</div>Timeline events
The following timeline indicates events and there’s also a toggle to show more details:
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="row mt-4 justify-content-center">
<div class="col-12">
<!-- Timeline -->
<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="row 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="row 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-light text-primary p-4">
<div class="card-body">
<div class="post-meta float-right">
<a class="text-primary" href="#"><span class="far fa-thumbs-up mr-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-target="#t1_details" data-toggle="collapse">Show Details <span class="fas fa-angle-down toggle-arrow ml-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="row 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="row 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-light p-4">
<div class="card-body">
<div class="post-meta float-right">
<a class="text-secondary" href="#"><span class="far fa-thumbs-up mr-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-target="#t2_details" data-toggle="collapse">Show Details <span class="fas fa-angle-down toggle-arrow ml-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="row 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="row 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-light p-4">
<div class="card-body">
<div class="post-meta float-right">
<a href="#"><span class="far fa-thumbs-up mr-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-target="#t3_details" data-toggle="collapse">Show Details <span class="fas fa-angle-down toggle-arrow ml-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>
<!-- End of Timeline -->
</div>
</div>Timeline user activity
This example can be used to show activity by a user:
<div class="row mt-4">
<div class="col-12">
<div class="timeline timeline-six px-3 px-sm-0">
<!-- Timeline Item 1 -->
<div class="row no-gutters">
<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="row 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="row 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-light">
<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 mr-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 mr-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 mr-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 mr-3">
<span class="fab fa-dribbble"></span>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<!-- Timeline Item 2 -->
<div class="row no-gutters">
<!-- timeline profile card -->
<div class="col-sm py-2">
<div class="card border-light">
<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 mr-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 mr-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 mr-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 mr-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="row 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="row 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 no-gutters">
<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="row 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="row 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-light">
<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 mr-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 mr-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 mr-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 mr-3">
<span class="fab fa-dribbble"></span>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<!-- Timeline Item 4 -->
<div class="row no-gutters">
<!-- timeline profile card -->
<div class="col-sm py-2">
<div class="card border-light">
<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 mr-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 mr-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 mr-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 mr-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="row 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="row h-50">
<div class="col"> </div>
<div class="col"> </div>
</div>
</div>
<div class="col-sm">
<!--spacer-->
</div>
</div>
</div>
</div>
</div>