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-md-12 mx-auto">
<!-- Timeline -->
<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>
<h3 class="h5 my-3">React</h3>
<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>
<h3 class="h5 my-3">VueJs</h3>
<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>
<h3 class="h5 my-3">Angular</h3>
<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>
<!--End of Timeline-->
</div>
</div>Timeline stories
The following timeline can be used for stories, events, blog 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 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 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
<div class="row mt-4">
<!-- Timeline -->
<div class="timeline timeline-two 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">
<span class="my-lg-3 timeline-separator bg-primary shadow-inset rounded-circle">
</span>
<div class="row h-100">
<div class="col middle-line"> </div>
</div>
</div>
<!-- Timeline item 1 content-->
<div class="col-12 col-lg-12 col-xl-11 my-4">
<div class="card bg-primary shadow-inset bw-md border-0 p-4">
<div class="card-body">
<div class="post-meta float-right">
<a class="text-dark" href="#"><span class="far fa-thumbs-up"></span>345</a>
</div>
<h3 class="h5 card-title">Time Schedule 1</h3>
<p class="card-text my-4">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">
<span class="my-lg-3 timeline-separator bg-primary shadow-inset rounded-circle border-light">
</span>
<div class="row h-100">
<div class="col middle-line"> </div>
</div>
</div>
<!-- Timeline item 2 content -->
<div class="col-12 col-lg-12 col-xl-11 my-4">
<div class="card bg-primary shadow-inset bw-md border-0 p-4">
<div class="card-body">
<div class="post-meta float-right">
<a class="text-dark" href="#"><span class="far fa-thumbs-up"></span>645</a>
</div>
<h3 class="h5 card-title">Time Schedule 1</h3>
<p class="card-text my-4">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">
<span class="my-lg-3 timeline-separator bg-primary shadow-inset rounded-circle border-light">
</span>
<div class="row h-100">
<div class="col middle-line"> </div>
</div>
</div>
<!-- Timeline item 3 content -->
<div class="col-12 col-lg-12 col-xl-11 my-4">
<div class="card bg-primary shadow-inset bw-md border-0 p-4">
<div class="card-body">
<div class="post-meta float-right">
<a class="text-dark" href="#"><span class="far fa-thumbs-up"></span>1.1k</a>
</div>
<h3 class="h5 card-title">Time Schedule 1</h3>
<p class="card-text my-4">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>Timeline user activity
This example can be used to show activity by a user:
<div class="row mt-4">
<!-- Timeline -->
<div class="timeline timeline-three 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-2 col-md-2 text-center flex-column d-none d-md-flex">
<span class="m-3 avatar-separator shadow-inset rounded-circle">
<img class="img-fluid rounded-circle p-1 p-lg-2" src="../../assets/img/team/profile-picture-1.jpg" alt="Jose avatar">
</span>
<div class="row h-100">
<div class="col middle-line"> </div>
</div>
</div>
<!-- timeline profile card -->
<div class="col-12 col-md py-2">
<div class="profile-card">
<div class="card bg-primary shadow-soft border-light p-4">
<div class="card-body">
<h3 class="h5 mb-2">Jose Leos</h3>
<span class="h6 font-weight-normal text-gray mb-3">Co-Founder</span>
<p class="card-text my-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.</p>
<ul class="list-unstyled d-flex mt-3 mb-4">
<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>
</div>
<!-- Timeline Item 2 -->
<div class="row no-gutters">
<!-- timeline profile card -->
<div class="col-12 col-md py-2">
<div class="card bg-primary shadow-soft border-light p-4">
<div class="card-body">
<h3 class="h5 mb-2">Neil Sims</h3>
<span class="h6 font-weight-normal text-gray mb-3">Web Designer</span>
<p class="card-text my-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.</p>
<ul class="list-unstyled d-flex mt-3 mb-4">
<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-2 col-md-2 text-center flex-column d-none d-md-flex">
<span class="m-3 avatar-separator shadow-inset rounded-circle">
<img class="img-fluid rounded-circle p-1 p-lg-2" src="../../assets/img/team/profile-picture-2.jpg" alt="Neil portrait">
</span>
<div class="row h-100">
<div class="col middle-line"> </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-2 col-md-2 text-center flex-column d-none d-md-flex">
<span class="m-3 avatar-separator shadow-inset rounded-circle">
<img class="img-fluid rounded-circle p-1 p-lg-2" src="../../assets/img/team/profile-picture-3.jpg" alt="Bonnie portrait">
</span>
<div class="row h-100">
<div class="col middle-line"> </div>
</div>
</div>
<!-- timeline profile card -->
<div class="col-12 col-md py-2">
<div class="card bg-primary shadow-soft border-light p-4">
<div class="card-body">
<h3 class="h5 mb-2">Bonnie Green</h3>
<span class="h6 font-weight-normal text-gray mb-3">Marketing</span>
<p class="card-text my-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.</p>
<ul class="list-unstyled d-flex mt-3 mb-4">
<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-12 col-md py-2">
<div class="card bg-primary shadow-soft border-light p-4">
<div class="card-body">
<h3 class="h5 mb-2">Christopher Wood</h3>
<span class="h6 font-weight-normal text-gray mb-3">SEO Specialist</span>
<p class="card-text my-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.</p>
<ul class="list-unstyled d-flex mt-3 mb-4">
<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-2 col-md-2 text-center flex-column d-none d-md-flex">
<span class="m-3 avatar-separator shadow-inset rounded-circle">
<img class="img-fluid rounded-circle p-1 p-lg-2" src="../../assets/img/team/profile-picture-4.jpg" alt="Wood avatar">
</span>
</div>
<div class="col-sm">
<!--spacer-->
</div>
</div>
</div>
<!-- End of Timeline -->
</div>