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:

2.1k Jan 03, 2019

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 story

10k Mar 10, 2020

We sold more than 1000 copies

See story

10k Aug 20, 2029

The begining

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>