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">&nbsp;</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">&nbsp;</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">&nbsp;</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:

Jose avatar
 

Jose Leos

Co-Founder

I spend my days with my hands in many different areas of web development from back end programming to front end engineering, digital accessibility.

Neil Sims

Web Designer

I spend my days with my hands in many different areas of web development from back end programming to front end engineering, digital accessibility.

Neil portrait
 
Bonnie portrait
 

Bonnie Green

Marketing

I spend my days with my hands in many different areas of web development from back end programming to front end engineering, digital accessibility.

Christopher Wood

SEO Specialist

I spend my days with my hands in many different areas of web development from back end programming to front end engineering, digital accessibility.

Wood avatar
<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">&nbsp;</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">&nbsp;</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">&nbsp;</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>