<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<div class="container-fluid">
<div class="col-md-12">
<div class="row">
<h1>bootstrap-responsive-timeline</h1>
<h3>Download sources for LESS, SASS and SCSS at <a href="https://github.com/sanex3339/bootstrap-responsive-timeline">https://github.com/sanex3339/bootstrap-responsive-timeline</a></h3>
</div>
<div class="row">
<h2>Usage example</h2>
<div class="timeline timeline-line-dotted">
<span class="timeline-label">
<span class="label label-primary">17.03.2016</span>
</span>
<div class="timeline-item">
<div class="timeline-point timeline-point-success">
<i class="fa fa-money"></i>
</div>
<div class="timeline-event">
<div class="timeline-heading">
<h4>MoneyService Transfer</h4>
</div>
<div class="timeline-body">
<p>Money transfer. By Alex, Wallet ID: 1234567890, Amount: 10$</p>
</div>
<div class="timeline-footer">
<p class="text-right">17.03.2016 10:00</p>
</div>
</div>
</div>
<span class="timeline-label">
<span class="label label-primary">09.03.2016</span>
</span>
<div class="timeline-item">
<div class="timeline-point timeline-point-success">
<i class="fa fa-money"></i>
</div>
<div class="timeline-event">
<div class="timeline-heading">
<h4>MoneyService Transfer</h4>
</div>
<div class="timeline-body">
<p>Money transfer. By Alex, Wallet ID: 1234567890, Amount: 2220$</p>
</div>
<div class="timeline-footer">
<p class="text-right">09.03.2016 09:00</p>
</div>
</div>
</div>
<span class="timeline-label">
<span class="label label-primary">09.02.2016</span>
</span>
<div class="timeline-item">
<div class="timeline-point timeline-point-success">
<i class="fa fa-money"></i>
</div>
<div class="timeline-event">
<div class="timeline-heading">
<h4>MoneyService Transfer</h4>
</div>
<div class="timeline-body">
<p>Money transfer. By John, Wallet ID: 1234567890, Amount: 261$</p>
</div>
<div class="timeline-footer">
<p class="text-right">09.02.2016 08:00</p>
</div>
</div>
</div>
<span class="timeline-label">
<span class="label label-primary">08.02.2016</span>
</span>
<div class="timeline-item">
<div class="timeline-point timeline-point-success">
<i class="fa fa-money"></i>
</div>
<div class="timeline-event">
<div class="timeline-heading">
<h4>MoneyService Transfer</h4>
</div>
<div class="timeline-body">
<p>Money transfer. By John, Wallet ID: 1234567890, Amount: 100$</p>
</div>
<div class="timeline-footer">
<p class="text-right">08.02.2016 14:00</p>
</div>
</div>
</div>
<div class="timeline-item">
<div class="timeline-point timeline-point-success">
<i class="fa fa-money"></i>
</div>
<div class="timeline-event">
<div class="timeline-heading">
<h4>MoneyService Transfer</h4>
</div>
<div class="timeline-body">
<p>Money transfer. By Alex, Wallet ID: 1234567890, Amount: 250$</p>
</div>
<div class="timeline-footer">
<p class="text-right">08.02.2016 12:00</p>
</div>
</div>
</div>
<div class="timeline-item">
<div class="timeline-point timeline-point-danger">
<i class="fa fa-times"></i>
</div>
<div class="timeline-event">
<div class="timeline-heading">
<h4>MoneyService Transfer</h4>
</div>
<div class="timeline-body">
<p>Money transfer. By Tom, Wallet ID: 1234567890, Amount: 10$</p>
</div>
<div class="timeline-footer">
<p class="text-right">08.02.2016 11:30</p>
</div>
</div>
</div>
<div class="timeline-item">
<div class="timeline-point timeline-point-danger">
<i class="fa fa-times"></i>
</div>
<div class="timeline-event">
<div class="timeline-heading">
<h4>MoneyService Transfer</h4>
</div>
<div class="timeline-body">
<p>Money transfer. By Alex, Wallet ID: 1234567890, Amount: 3$</p>
</div>
<div class="timeline-footer">
<p class="text-right">08.02.2016 11:00</p>
</div>
</div>
</div>
<div class="timeline-item">
<div class="timeline-point timeline-point-danger">
<i class="fa fa-times"></i>
</div>
<div class="timeline-event">
<div class="timeline-heading">
<h4>MoneyService Transfer</h4>
</div>
<div class="timeline-body">
<p>Money transfer. By Alex, Wallet ID: 1234567890, Amount: 25$</p>
</div>
<div class="timeline-footer">
<p class="text-right">08.02.2016 10:00</p>
</div>
</div>
</div>
<span class="timeline-label">
<span class="label label-primary">13.01.2016</span>
</span>
<div class="timeline-item">
<div class="timeline-point timeline-point-success">
<i class="fa fa-money"></i>
</div>
<div class="timeline-event">
<div class="timeline-heading">
<h4>MoneyService Transfer</h4>
</div>
<div class="timeline-body">
<p>Money transfer. By John, Wallet ID: 1234567890, Amount: 240$</p>
</div>
<div class="timeline-footer">
<p class="text-right">13.01.2016 15:00</p>
</div>
</div>
</div>
<div class="timeline-item">
<div class="timeline-point timeline-point-success">
<i class="fa fa-money"></i>
</div>
<div class="timeline-event">
<div class="timeline-heading">
<h4>MoneyService Transfer</h4>
</div>
<div class="timeline-body">
<p>Money transfer. By Steve, Wallet ID: 1234567890, Amount: 100'000'000$</p>
</div>
<div class="timeline-footer">
<p class="text-right">13.01.2016 10:00</p>
</div>
</div>
</div>
<span class="timeline-label">
<a href="#" class="btn btn-default" title="More...">
<i class="fa fa-fw fa-history"></i>
</a>
</span>
</div>
</div>
<div class="row">
<h2>Two columns</h2>
<div class="timeline">
<div class="timeline-item">
<div class="timeline-point timeline-point-default">
<i class="fa fa-circle"></i>
</div>
<div class="timeline-event timeline-event-default">
<div class="timeline-heading">
<h4>timeline-event timeline-event-default</h4>
</div>
<div class="timeline-body">
<p>Invitamus me testatur sed quod non dum animae tuae lacrimis ut libertatem deum rogus aegritudinis causet. Dicens hoc contra serpentibus isto.</p>
</div>
<div class="timeline-footer">
<p class="text-right">Feb-21-2014</p>
</div>
</div>
</div>
<span class="timeline-label">
<span class="label label-primary">timeline-label</span>
</span>
<div class="timeline-item">
<div class="timeline-point timeline-point-primary">
<i class="fa fa-star"></i>
</div>
<div class="timeline-event timeline-event-primary">
<div class="timeline-heading">
<h4>timeline-event timeline-event-primary</h4>
</div>
<div class="timeline-body">
<p>Stranguillione in deinde cepit roseo commendavit patris super color est se sed. Virginis plus plorantes abscederem assignato ipsum ait regem Ardalio nos filiae Hellenicus mihi cum. Theophilo litore in lucem in modo invenit quasi nomen magni ergo est se est Apollonius, habet clementiae venit ad nomine sed dominum depressit filia navem.</p>
</div>
<div class="timeline-footer">
<p class="text-right">Feb-23-2014</p>
</div>
</div>
</div>
<div class="timeline-item">
<div class="timeline-point timeline-point-info">
<i class="fa fa-star"></i>
</div>
<div class="timeline-event timeline-event-info">
<div class="timeline-heading">
<h4>timeline-event timeline-event-info</h4>
</div>
<div class="timeline-body">
<p>Advenientibus aliorum eam ad per te sed. Facere debetur aut veneris accedens.</p>
</div>
<div class="timeline-footer">
<p class="text-right">Feb-22-2014</p>
</div>
</div>
</div>
<div class="timeline-item">
<div class="timeline-point timeline-point-warning">
<i class="fa fa-star"></i>
</div>
<div class="timeline-event timeline-event-warning">
<div class="timeline-heading">
<h4>timeline-event timeline-event-warning</h4>
</div>
<div class="timeline-body">
<p>Stranguillione in deinde cepit roseo commendavit patris super color est se sed. Virginis plus plorantes abscederem assignato ipsum ait regem Ardalio nos filiae Hellenicus mihi cum. Theophilo litore in lucem in modo invenit quasi nomen magni ergo est se est Apollonius, habet clementiae venit ad nomine sed dominum depressit filia navem.</p>
</div>
<div class="timeline-footer">
<p class="text-right">Feb-23-2014</p>
</div>
</div>
</div>
<div class="timeline-item">
<div class="timeline-point timeline-point-danger">
<i class="fa fa-star"></i>
</div>
<div class="timeline-event timeline-event-danger">
<div class="timeline-heading">
<h4>timeline-event timeline-event-danger</h4>
</div>
<div class="timeline-body">
<p>Advenientibus aliorum eam ad per te sed. Facere debetur aut veneris accedens.</p>
</div>
<div class="timeline-footer">
<p class="text-right">Feb-22-2014</p>
</div>
</div>
</div>
<span class="timeline-label">
<span class="label label-info">timeline-label with label label-info</span>
</span>
<div class="timeline-item timeline-item-arrow-sm">
<div class="timeline-point timeline-point-primary">
<i class="fa fa-star"></i>
</div>
<div class="timeline-event timeline-event-primary">
<div class="timeline-heading">
<h4>timeline-item timeline-item-arrow-sm</h4>
</div>
<div class="timeline-body">
<p>Volvitur ingreditur id ait mea vero cum autem quod ait Cumque ego illum vero cum unde beata. Commendavi si non dum est in. Dionysiadem tuos ratio puella ut casus, tunc lacrimas effunditis magister cives Tharsis. Puellae addita verbaque' capellam sanctissima quid, apollinem existimas filiam rex cum autem quod tamen adnuente rediens eam est se in. Peracta licet ad nomine Maria non ait in modo compungi mulierem volutpat.</p>
</div>
<div class="timeline-footer">
<p class="text-right">Feb-27-2014</p>
</div>
</div>
</div>
<div class="timeline-item timeline-item-arrow-lg">
<div class="timeline-point timeline-point-blank">
</div>
<div class="timeline-event timeline-event-warning">
<div class="timeline-heading">
<h4>timeline-item timeline-item-arrow-lg timeline-point timeline-point-blank</h4>
</div>
<div class="timeline-body">
<p>Adfertur guttae sapientiae ducitur est Apollonius ut a a his domino Lycoridem in lucem. Theophile atque bona dei cenam veniebant est cum. Iusto opes mihi Tyrum in modo compungi mulierem ubi augue eiusdem ordo quos vero diam omni catervis famulorum. Bene dictis ut diem finito servis unde.</p>
</div>
<div class="timeline-footer">
<p class="text-right">Mar-01-2014</p>
</div>
</div>
</div>
<div class="timeline-item">
<div class="timeline-point timeline-point-blank"></div>
<div class="timeline-event timeline-event-success">
<div class="timeline-heading">
<h4>timeline-point timeline-point-blank</h4>
</div>
<div class="timeline-body">
<p>Crede respiciens loco dedit beneficio ad suis alteri si puella eius in. Acceptis codicello lenonem in deinde plectrum anni ipsa quod eam est Apollonius.</p>
</div>
<div class="timeline-footer primary">
<p class="text-right">Mar-02-2014</p>
</div>
</div>
</div>
<div class="timeline-item timeline-item-left">
<div class="timeline-point timeline-point-blank"></div>
<div class="timeline-event timeline-event-default">
<div class="timeline-heading">
<h4>timeline-item timeline-item-left</h4>
</div>
<div class="timeline-body">
<p>Invitamus me testatur sed quod non dum animae tuae lacrimis ut libertatem deum rogus aegritudinis causet. Dicens hoc contra serpentibus isto.</p>
</div>
<div class="timeline-footer">
<p class="text-right">Feb-21-2014</p>
</div>
</div>
</div>
<div class="timeline-item timeline-item-left">
<div class="timeline-point timeline-point-blank"></div>
<div class="timeline-event timeline-event-default">
<div class="timeline-heading">
<h4>timeline-item timeline-item-left</h4>
</div>
<div class="timeline-body">
<p>Invitamus me testatur sed quod non dum animae tuae lacrimis ut libertatem deum rogus aegritudinis causet. Dicens hoc contra serpentibus isto.</p>
</div>
<div class="timeline-footer">
<p class="text-right">Feb-21-2014</p>
</div>
</div>
</div>
<div class="timeline-item timeline-item-left">
<div class="timeline-point timeline-point-blank"></div>
<div class="timeline-event timeline-event-default">
<div class="timeline-heading">
<h4>timeline-item timeline-item-left</h4>
</div>
<div class="timeline-body">
<p>Invitamus me testatur sed quod non dum animae tuae lacrimis ut libertatem deum rogus aegritudinis causet. Dicens hoc contra serpentibus isto.</p>
</div>
<div class="timeline-footer">
<p class="text-right">Feb-21-2014</p>
</div>
</div>
</div>
<div class="timeline-item timeline-item-left">
<div class="timeline-point timeline-point-blank"></div>
<div class="timeline-event timeline-event-default">
<div class="timeline-heading">
<h4>timeline-item timeline-item-left</h4>
</div>
<div class="timeline-body">
<p>Invitamus me testatur sed quod non dum animae tuae lacrimis ut libertatem deum rogus aegritudinis causet. Dicens hoc contra serpentibus isto.</p>
</div>
<div class="timeline-footer">
<p class="text-right">Feb-21-2014</p>
</div>
</div>
</div>
<div class="timeline-item timeline-item-right">
<div class="timeline-point timeline-point-blank"></div>
<div class="timeline-event timeline-event-default">
<div class="timeline-heading">
<h4>timeline-item timeline-item-right</h4>
</div>
<div class="timeline-body">
<p>Invitamus me testatur sed quod non dum animae tuae lacrimis ut libertatem deum rogus aegritudinis causet. Dicens hoc contra serpentibus isto.</p>
</div>
<div class="timeline-footer">
<p class="text-right">Feb-21-2014</p>
</div>
</div>
</div>
<div class="timeline-item timeline-item-right">
<div class="timeline-point timeline-point-blank"></div>
<div class="timeline-event timeline-event-default">
<div class="timeline-heading">
<h4>timeline-item timeline-item-right</h4>
</div>
<div class="timeline-body">
<p>Invitamus me testatur sed quod non dum animae tuae lacrimis ut libertatem deum rogus aegritudinis causet. Dicens hoc contra serpentibus isto.</p>
</div>
<div class="timeline-footer">
<p class="text-right">Feb-21-2014</p>
</div>
</div>
</div>
<div class="timeline-item timeline-item-right">
<div class="timeline-point timeline-point-blank"></div>
<div class="timeline-event timeline-event-default">
<div class="timeline-heading">
<h4>timeline-item timeline-item-right</h4>
</div>
<div class="timeline-body">
<p>Invitamus me testatur sed quod non dum animae tuae lacrimis ut libertatem deum rogus aegritudinis causet. Dicens hoc contra serpentibus isto.</p>
</div>
<div class="timeline-footer">
<p class="text-right">Feb-21-2014</p>
</div>
</div>
</div>
<div class="timeline-item timeline-item-right">
<div class="timeline-point timeline-point-blank"></div>
<div class="timeline-event timeline-event-default">
<div class="timeline-heading">
<h4>timeline-item timeline-item-right</h4>
</div>
<div class="timeline-body">
<p>Invitamus me testatur sed quod non dum animae tuae lacrimis ut libertatem deum rogus aegritudinis causet. Dicens hoc contra serpentibus isto.</p>
</div>
<div class="timeline-footer">
<p class="text-right">Feb-21-2014</p>
</div>
</div>
</div>
<span class="timeline-label">
<button class="btn btn-danger"><i class="fa fa-ambulance"></i></button>
</span>
</div>
</div>
<div class="row">
<h2>Single column</h2>
<div class="timeline timeline-single-column">
<div class="timeline-item timeline-item-arrow-sm">
<div class="timeline-point timeline-point-primary">
<i class="fa fa-star"></i>
</div>
<div class="timeline-event timeline-event-primary">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">timeline-event timeline-event-primary with panel panel-default</h3>
</div>
<div class="panel-body">
Panel content
</div>
</div>
</div>
</div>
<span class="timeline-label">
<span class="label label-primary">label</span>
</span>
<div class="timeline-item timeline-item-arrow-sm">
<div class="timeline-point timeline-point-primary">
<i class="fa fa-star"></i>
</div>
<div class="timeline-event timeline-event-primary">
<table class="table table-striped table-hover">
<tr>
<th>timeline-event timeline-event-primary</th>
<th>with table table-stripped table-hover</th>
</tr>
<tr>
<td>cell</td>
<td>cell</td>
</tr>
<tr>
<td>cell</td>
<td>cell</td>
</tr>
<tr>
<td>cell</td>
<td>cell</td>
</tr>
</table>
</div>
</div>
<div class="timeline-item">
<div class="timeline-point">
<i class="fa fa-star"></i>
</div>
<div class="timeline-event">
<div class="timeline-heading">
<h4>Timeline Event</h4>
</div>
<div class="timeline-body">
<p>Advenientibus aliorum eam ad per te sed. Facere debetur aut veneris accedens.</p>
</div>
<div class="timeline-footer">
<p class="text-right">Feb-22-2014</p>
</div>
</div>
</div>
<span class="timeline-label">
<span class="label label-primary">label</span>
</span>
<div class="timeline-item">
<div class="timeline-point timeline-point-primary">
<i class="fa fa-star"></i>
</div>
<div class="timeline-event timeline-event-primary">
<div class="timeline-heading">
<h4>Timeline Event</h4>
</div>
<div class="timeline-body">
<p>Volvitur ingreditur id ait mea vero cum autem quod ait Cumque ego illum vero cum unde beata. Commendavi si non dum est in. Dionysiadem tuos ratio puella ut casus, tunc lacrimas effunditis magister cives Tharsis. Puellae addita verbaque' capellam sanctissima quid, apollinem existimas filiam rex cum autem quod tamen adnuente rediens eam est se in. Peracta licet ad nomine Maria non ait in modo compungi mulierem volutpat.</p>
</div>
<div class="timeline-footer">
<p class="text-right">Feb-27-2014</p>
</div>
</div>
</div>
<div class="timeline-item">
<div class="timeline-point timeline-point-warning">
<i class="fa fa-star"></i>
</div>
<div class="timeline-event timeline-event-warning">
<div class="timeline-heading">
<h4>Timeline Event</h4>
</div>
<div class="timeline-body">
<p>Adfertur guttae sapientiae ducitur est Apollonius ut a a his domino Lycoridem in lucem. Theophile atque bona dei cenam veniebant est cum. Iusto opes mihi Tyrum in modo compungi mulierem ubi augue eiusdem ordo quos vero diam omni catervis famulorum. Bene dictis ut diem finito servis unde.</p>
</div>
<div class="timeline-footer">
<p class="text-right">Mar-01-2014</p>
</div>
</div>
</div>
<div class="timeline-item">
<div class="timeline-point timeline-point-success">
<i class="fa fa-star"></i>
</div>
<div class="timeline-event timeline-event-success">
<div class="timeline-heading">
<h4>Timeline Event</h4>
</div>
<div class="timeline-body">
<p>Crede respiciens loco dedit beneficio ad suis alteri si puella eius in. Acceptis codicello lenonem in deinde plectrum anni ipsa quod eam est Apollonius.</p>
</div>
<div class="timeline-footer primary">
<p class="text-right">Mar-02-2014</p>
</div>
</div>
</div>
<span class="timeline-label">
<span class="label label-info">label</span>
</span>
<div class="timeline-item">
<div class="timeline-point timeline-point-blank">
</div>
<div class="timeline-event">
<div class="timeline-heading">
<h4>Timeline Event</h4>
</div>
<div class="timeline-body">
<p>Crede respiciens loco dedit beneficio ad suis alteri si puella eius in. Acceptis codicello lenonem in deinde plectrum anni ipsa quod eam est Apollonius.</p>
</div>
<div class="timeline-footer primary">
<p class="text-right">Mar-02-2014</p>
</div>
</div>
</div>
<span class="timeline-label">
<button class="btn btn-danger"><i class="fa fa-ambulance"></i></button>
</span>
</div>
</div>
</div>
</div>
.timeline {
width: 100%;
position: relative;
padding: 1px 0;
list-style: none;
font-weight: 300;
}
.timeline .timeline-item {
padding-left: 0;
padding-right: 30px;
}
.timeline .timeline-item.timeline-item-right,
.timeline .timeline-item:nth-of-type(even):not(.timeline-item-left) {
padding-left: 30px;
padding-right: 0;
}
.timeline .timeline-item .timeline-event {
width: 100%;
}
.timeline:before {
border-right-style: solid;
}
.timeline:before,
.timeline:after {
content: " ";
display: block;
}
.timeline:after {
clear: both;
}
.timeline:before {
content: "";
position: absolute;
top: 0;
left: 0;
bottom: 0;
width: 50%;
height: 100% !important;
margin-left: 1px;
border-right-width: 2px;
border-right-style: solid;
border-right-color: #888888;
}
.timeline.timeline-single-column.timeline {
width: 100%;
max-width: 768px;
}
.timeline.timeline-single-column.timeline .timeline-item {
padding-left: 72px;
padding-right: 0;
}
.timeline.timeline-single-column.timeline .timeline-item.timeline-item-right,
.timeline.timeline-single-column.timeline .timeline-item:nth-of-type(even):not(.timeline-item-left) {
padding-left: 72px;
padding-right: 0;
}
.timeline.timeline-single-column.timeline .timeline-item .timeline-event {
width: 100%;
}
.timeline.timeline-single-column.timeline:before {
left: 42px;
width: 0;
margin-left: -1px;
}
.timeline.timeline-single-column.timeline .timeline-item {
width: 100%;
margin-bottom: 20px;
}
.timeline.timeline-single-column.timeline .timeline-item:nth-of-type(even) {
margin-top: 0;
}
.timeline.timeline-single-column.timeline .timeline-item > .timeline-event {
float: right !important;
}
.timeline.timeline-single-column.timeline .timeline-item > .timeline-event:before,
.timeline.timeline-single-column.timeline .timeline-item > .timeline-event:after {
right: auto !important;
border-left-width: 0 !important;
}
.timeline.timeline-single-column.timeline .timeline-item > .timeline-event:before {
left: -15px !important;
border-right-width: 15px !important;
}
.timeline.timeline-single-column.timeline .timeline-item > .timeline-event:after {
left: -14px !important;
border-right-width: 14px !important;
}
.timeline.timeline-single-column.timeline .timeline-item > .timeline-point {
transform: translateX(-50%);
left: 42px !important;
margin-left: 0;
}
.timeline.timeline-single-column.timeline .timeline-label {
transform: translateX(-50%);
margin: 0 0 20px 42px;
}
.timeline.timeline-single-column.timeline .timeline-label + .timeline-item + .timeline-item {
margin-top: 0;
}
.timeline.timeline-line-solid:before {
border-right-style: solid;
}
.timeline.timeline-line-dotted:before {
border-right-style: dotted;
}
.timeline.timeline-line-dashed:before {
border-right-style: dashed;
}
.timeline .timeline-item {
position: relative;
float: left;
clear: left;
width: 50%;
margin-bottom: 20px;
}
.timeline .timeline-item:before,
.timeline .timeline-item:after {
content: "";
display: table;
}
.timeline .timeline-item:after {
clear: both;
}
.timeline .timeline-item:last-child {
margin-bottom: 0 !important;
}
.timeline .timeline-item.timeline-item-right > .timeline-event,
.timeline .timeline-item:nth-of-type(even):not(.timeline-item-left) > .timeline-event {
float: right !important;
}
.timeline .timeline-item.timeline-item-right > .timeline-event:before,
.timeline .timeline-item:nth-of-type(even):not(.timeline-item-left) > .timeline-event:before,
.timeline .timeline-item.timeline-item-right > .timeline-event:after,
.timeline .timeline-item:nth-of-type(even):not(.timeline-item-left) > .timeline-event:after {
right: auto !important;
border-left-width: 0 !important;
}
.timeline .timeline-item.timeline-item-right > .timeline-event:before,
.timeline .timeline-item:nth-of-type(even):not(.timeline-item-left) > .timeline-event:before {
left: -15px !important;
border-right-width: 15px !important;
}
.timeline .timeline-item.timeline-item-right > .timeline-event:after,
.timeline .timeline-item:nth-of-type(even):not(.timeline-item-left) > .timeline-event:after {
left: -14px !important;
border-right-width: 14px !important;
}
.timeline .timeline-item > .timeline-event:before {
top: 10px;
right: -15px;
border-top: 15px solid transparent;
border-left-width: 15px;
border-left-style: solid;
border-right-width: 0;
border-right-style: solid;
border-bottom: 15px solid transparent;
}
.timeline .timeline-item > .timeline-event:after {
top: 11px;
right: -14px;
border-top: 14px solid transparent;
border-left-width: 14px;
border-left-style: solid;
border-right-width: 0;
border-right-style: solid;
border-bottom: 14px solid transparent;
}
.timeline .timeline-item > .timeline-point {
top: 25px;
}
.timeline-single-column.timeline .timeline-item > .timeline-event {
float: right !important;
}
.timeline-single-column.timeline .timeline-item > .timeline-event:before,
.timeline-single-column.timeline .timeline-item > .timeline-event:after {
right: auto !important;
border-left-width: 0 !important;
}
.timeline-single-column.timeline .timeline-item > .timeline-event:before {
left: -15px !important;
border-right-width: 15px !important;
}
.timeline-single-column.timeline .timeline-item > .timeline-event:after {
left: -14px !important;
border-right-width: 14px !important;
}
.timeline .timeline-item:nth-of-type(2) {
margin-top: 40px;
}
.timeline .timeline-item.timeline-item-left,
.timeline .timeline-item.timeline-item-right {
clear: both !important;
}
.timeline .timeline-item.timeline-item-right,
.timeline .timeline-item:nth-of-type(even):not(.timeline-item-left) {
float: right;
clear: right;
}
.timeline .timeline-item.timeline-item-right > .timeline-point,
.timeline .timeline-item:nth-of-type(even):not(.timeline-item-left) > .timeline-point {
left: -24px;
}
.timeline .timeline-item.timeline-item-right > .timeline-point.timeline-point-blank,
.timeline .timeline-item:nth-of-type(even):not(.timeline-item-left) > .timeline-point.timeline-point-blank {
left: -12px;
}
.timeline .timeline-item.timeline-item-arrow-sm.timeline-item-right > .timeline-event,
.timeline .timeline-item.timeline-item-arrow-sm:nth-of-type(even):not(.timeline-item-left) > .timeline-event {
float: right !important;
}
.timeline .timeline-item.timeline-item-arrow-sm.timeline-item-right > .timeline-event:before,
.timeline .timeline-item.timeline-item-arrow-sm:nth-of-type(even):not(.timeline-item-left) > .timeline-event:before,
.timeline .timeline-item.timeline-item-arrow-sm.timeline-item-right > .timeline-event:after,
.timeline .timeline-item.timeline-item-arrow-sm:nth-of-type(even):not(.timeline-item-left) > .timeline-event:after {
right: auto !important;
border-left-width: 0 !important;
}
.timeline .timeline-item.timeline-item-arrow-sm.timeline-item-right > .timeline-event:before,
.timeline .timeline-item.timeline-item-arrow-sm:nth-of-type(even):not(.timeline-item-left) > .timeline-event:before {
left: -10px !important;
border-right-width: 10px !important;
}
.timeline .timeline-item.timeline-item-arrow-sm.timeline-item-right > .timeline-event:after,
.timeline .timeline-item.timeline-item-arrow-sm:nth-of-type(even):not(.timeline-item-left) > .timeline-event:after {
left: -9px !important;
border-right-width: 9px !important;
}
.timeline .timeline-item.timeline-item-arrow-sm > .timeline-event:before {
top: 4px;
right: -10px;
border-top: 10px solid transparent;
border-left-width: 10px;
border-left-style: solid;
border-right-width: 0;
border-right-style: solid;
border-bottom: 10px solid transparent;
}
.timeline .timeline-item.timeline-item-arrow-sm > .timeline-event:after {
top: 5px;
right: -9px;
border-top: 9px solid transparent;
border-left-width: 9px;
border-left-style: solid;
border-right-width: 0;
border-right-style: solid;
border-bottom: 9px solid transparent;
}
.timeline .timeline-item.timeline-item-arrow-sm > .timeline-point {
top: 14px;
}
.timeline-single-column.timeline .timeline-item.timeline-item-arrow-sm > .timeline-event {
float: right !important;
}
.timeline-single-column.timeline .timeline-item.timeline-item-arrow-sm > .timeline-event:before,
.timeline-single-column.timeline .timeline-item.timeline-item-arrow-sm > .timeline-event:after {
right: auto !important;
border-left-width: 0 !important;
}
.timeline-single-column.timeline .timeline-item.timeline-item-arrow-sm > .timeline-event:before {
left: -10px !important;
border-right-width: 10px !important;
}
.timeline-single-column.timeline .timeline-item.timeline-item-arrow-sm > .timeline-event:after {
left: -9px !important;
border-right-width: 9px !important;
}
.timeline .timeline-item.timeline-item-arrow-md.timeline-item-right > .timeline-event,
.timeline .timeline-item.timeline-item-arrow-md:nth-of-type(even):not(.timeline-item-left) > .timeline-event {
float: right !important;
}
.timeline .timeline-item.timeline-item-arrow-md.timeline-item-right > .timeline-event:before,
.timeline .timeline-item.timeline-item-arrow-md:nth-of-type(even):not(.timeline-item-left) > .timeline-event:before,
.timeline .timeline-item.timeline-item-arrow-md.timeline-item-right > .timeline-event:after,
.timeline .timeline-item.timeline-item-arrow-md:nth-of-type(even):not(.timeline-item-left) > .timeline-event:after {
right: auto !important;
border-left-width: 0 !important;
}
.timeline .timeline-item.timeline-item-arrow-md.timeline-item-right > .timeline-event:before,
.timeline .timeline-item.timeline-item-arrow-md:nth-of-type(even):not(.timeline-item-left) > .timeline-event:before {
left: -15px !important;
border-right-width: 15px !important;
}
.timeline .timeline-item.timeline-item-arrow-md.timeline-item-right > .timeline-event:after,
.timeline .timeline-item.timeline-item-arrow-md:nth-of-type(even):not(.timeline-item-left) > .timeline-event:after {
left: -14px !important;
border-right-width: 14px !important;
}
.timeline .timeline-item.timeline-item-arrow-md > .timeline-event:before {
top: 10px;
right: -15px;
border-top: 15px solid transparent;
border-left-width: 15px;
border-left-style: solid;
border-right-width: 0;
border-right-style: solid;
border-bottom: 15px solid transparent;
}
.timeline .timeline-item.timeline-item-arrow-md > .timeline-event:after {
top: 11px;
right: -14px;
border-top: 14px solid transparent;
border-left-width: 14px;
border-left-style: solid;
border-right-width: 0;
border-right-style: solid;
border-bottom: 14px solid transparent;
}
.timeline .timeline-item.timeline-item-arrow-md > .timeline-point {
top: 25px;
}
.timeline-single-column.timeline .timeline-item.timeline-item-arrow-md > .timeline-event {
float: right !important;
}
.timeline-single-column.timeline .timeline-item.timeline-item-arrow-md > .timeline-event:before,
.timeline-single-column.timeline .timeline-item.timeline-item-arrow-md > .timeline-event:after {
right: auto !important;
border-left-width: 0 !important;
}
.timeline-single-column.timeline .timeline-item.timeline-item-arrow-md > .timeline-event:before {
left: -15px !important;
border-right-width: 15px !important;
}
.timeline-single-column.timeline .timeline-item.timeline-item-arrow-md > .timeline-event:after {
left: -14px !important;
border-right-width: 14px !important;
}
.timeline .timeline-item.timeline-item-arrow-lg.timeline-item-right > .timeline-event,
.timeline .timeline-item.timeline-item-arrow-lg:nth-of-type(even):not(.timeline-item-left) > .timeline-event {
float: right !important;
}
.timeline .timeline-item.timeline-item-arrow-lg.timeline-item-right > .timeline-event:before,
.timeline .timeline-item.timeline-item-arrow-lg:nth-of-type(even):not(.timeline-item-left) > .timeline-event:before,
.timeline .timeline-item.timeline-item-arrow-lg.timeline-item-right > .timeline-event:after,
.timeline .timeline-item.timeline-item-arrow-lg:nth-of-type(even):not(.timeline-item-left) > .timeline-event:after {
right: auto !important;
border-left-width: 0 !important;
}
.timeline .timeline-item.timeline-item-arrow-lg.timeline-item-right > .timeline-event:before,
.timeline .timeline-item.timeline-item-arrow-lg:nth-of-type(even):not(.timeline-item-left) > .timeline-event:before {
left: -18px !important;
border-right-width: 18px !important;
}
.timeline .timeline-item.timeline-item-arrow-lg.timeline-item-right > .timeline-event:after,
.timeline .timeline-item.timeline-item-arrow-lg:nth-of-type(even):not(.timeline-item-left) > .timeline-event:after {
left: -17px !important;
border-right-width: 17px !important;
}
.timeline .timeline-item.timeline-item-arrow-lg > .timeline-event:before {
top: 10px;
right: -18px;
border-top: 18px solid transparent;
border-left-width: 18px;
border-left-style: solid;
border-right-width: 0;
border-right-style: solid;
border-bottom: 18px solid transparent;
}
.timeline .timeline-item.timeline-item-arrow-lg > .timeline-event:after {
top: 11px;
right: -17px;
border-top: 17px solid transparent;
border-left-width: 17px;
border-left-style: solid;
border-right-width: 0;
border-right-style: solid;
border-bottom: 17px solid transparent;
}
.timeline .timeline-item.timeline-item-arrow-lg > .timeline-point {
top: 28px;
}
.timeline-single-column.timeline .timeline-item.timeline-item-arrow-lg > .timeline-event {
float: right !important;
}
.timeline-single-column.timeline .timeline-item.timeline-item-arrow-lg > .timeline-event:before,
.timeline-single-column.timeline .timeline-item.timeline-item-arrow-lg > .timeline-event:after {
right: auto !important;
border-left-width: 0 !important;
}
.timeline-single-column.timeline .timeline-item.timeline-item-arrow-lg > .timeline-event:before {
left: -18px !important;
border-right-width: 18px !important;
}
.timeline-single-column.timeline .timeline-item.timeline-item-arrow-lg > .timeline-event:after {
left: -17px !important;
border-right-width: 17px !important;
}
.timeline .timeline-item > .timeline-event {
background: #fff;
border: 1px solid #888888;
color: #555;
position: relative;
float: left;
border-radius: 3px;
}
.timeline .timeline-item > .timeline-event:before {
border-left-color: #888888;
border-right-color: #888888;
}
.timeline .timeline-item > .timeline-event:after {
border-left-color: #fff;
border-right-color: #fff;
}
.timeline .timeline-item > .timeline-event * {
color: inherit;
}
.timeline .timeline-item > .timeline-event.timeline-event-default {
background: #fff;
border: 1px solid #888888;
color: #555;
}
.timeline .timeline-item > .timeline-event.timeline-event-default:before {
border-left-color: #888888;
border-right-color: #888888;
}
.timeline .timeline-item > .timeline-event.timeline-event-default:after {
border-left-color: #fff;
border-right-color: #fff;
}
.timeline .timeline-item > .timeline-event.timeline-event-default * {
color: inherit;
}
.timeline .timeline-item > .timeline-event.timeline-event-primary {
background: #f5f5f5;
border: 1px solid #888888;
color: #555;
}
.timeline .timeline-item > .timeline-event.timeline-event-primary:before {
border-left-color: #888888;
border-right-color: #888888;
}
.timeline .timeline-item > .timeline-event.timeline-event-primary:after {
border-left-color: #f5f5f5;
border-right-color: #f5f5f5;
}
.timeline .timeline-item > .timeline-event.timeline-event-primary * {
color: inherit;
}
.timeline .timeline-item > .timeline-event.timeline-event-success {
background: #F3F8ED;
border: 1px solid #72b92e;
color: #3F8100;
}
.timeline .timeline-item > .timeline-event.timeline-event-success:before {
border-left-color: #72b92e;
border-right-color: #72b92e;
}
.timeline .timeline-item > .timeline-event.timeline-event-success:after {
border-left-color: #F3F8ED;
border-right-color: #F3F8ED;
}
.timeline .timeline-item > .timeline-event.timeline-event-success * {
color: inherit;
}
.timeline .timeline-item > .timeline-event.timeline-event-info {
background: #F0F8FD;
border: 1px solid #3e93cf;
color: #0062A7;
}
.timeline .timeline-item > .timeline-event.timeline-event-info:before {
border-left-color: #3e93cf;
border-right-color: #3e93cf;
}
.timeline .timeline-item > .timeline-event.timeline-event-info:after {
border-left-color: #F0F8FD;
border-right-color: #F0F8FD;
}
.timeline .timeline-item > .timeline-event.timeline-event-info * {
color: inherit;
}
.timeline .timeline-item > .timeline-event.timeline-event-warning {
background: #FFF9E9;
border: 1px solid #d0aa42;
color: #ac7e00;
}
.timeline .timeline-item > .timeline-event.timeline-event-warning:before {
border-left-color: #d0aa42;
border-right-color: #d0aa42;
}
.timeline .timeline-item > .timeline-event.timeline-event-warning:after {
border-left-color: #FFF9E9;
border-right-color: #FFF9E9;
}
.timeline .timeline-item > .timeline-event.timeline-event-warning * {
color: inherit;
}
.timeline .timeline-item > .timeline-event.timeline-event-danger {
background: #FFC4BC;
border: 1px solid #d25a4b;
color: #B71500;
}
.timeline .timeline-item > .timeline-event.timeline-event-danger:before {
border-left-color: #d25a4b;
border-right-color: #d25a4b;
}
.timeline .timeline-item > .timeline-event.timeline-event-danger:after {
border-left-color: #FFC4BC;
border-right-color: #FFC4BC;
}
.timeline .timeline-item > .timeline-event.timeline-event-danger * {
color: inherit;
}
.timeline .timeline-item > .timeline-event:before,
.timeline .timeline-item > .timeline-event:after {
content: "";
display: inline-block;
position: absolute;
}
.timeline .timeline-item > .timeline-event .timeline-heading,
.timeline .timeline-item > .timeline-event .timeline-body,
.timeline .timeline-item > .timeline-event .timeline-footer {
padding: 4px 10px;
}
.timeline .timeline-item > .timeline-event .timeline-heading p,
.timeline .timeline-item > .timeline-event .timeline-body p,
.timeline .timeline-item > .timeline-event .timeline-footer p,
.timeline .timeline-item > .timeline-event .timeline-heading ul,
.timeline .timeline-item > .timeline-event .timeline-body ul,
.timeline .timeline-item > .timeline-event .timeline-footer ul {
margin-bottom: 0;
}
.timeline .timeline-item > .timeline-event .timeline-heading h4 {
font-weight: 400;
}
.timeline .timeline-item > .timeline-event .timeline-footer a {
cursor: pointer;
text-decoration: none;
}
.timeline .timeline-item > .timeline-event .panel,
.timeline .timeline-item > .timeline-event .table,
.timeline .timeline-item > .timeline-event .blankslate {
margin: 0;
border: none;
border-radius: inherit;
overflow: hidden;
}
.timeline .timeline-item > .timeline-event .table th {
border-top: 0;
}
.timeline .timeline-item > .timeline-point {
color: #888888;
background: #fff;
right: -24px;
width: 24px;
height: 24px;
margin-top: -12px;
margin-left: 12px;
margin-right: 12px;
position: absolute;
z-index: 100;
border-width: 2px;
border-style: solid;
border-radius: 100%;
line-height: 20px;
text-align: center;
}
.timeline .timeline-item > .timeline-point.timeline-point-blank {
right: -12px;
width: 12px;
height: 12px;
margin-top: -6px;
margin-left: 6px;
margin-right: 6px;
color: #888888;
background: #888888;
}
.timeline .timeline-item > .timeline-point.timeline-point-default {
color: #888888;
background: #fff;
}
.timeline .timeline-item > .timeline-point.timeline-point-primary {
color: #888888;
background: #fff;
}
.timeline .timeline-item > .timeline-point.timeline-point-success {
color: #72b92e;
background: #fff;
}
.timeline .timeline-item > .timeline-point.timeline-point-info {
color: #3e93cf;
background: #fff;
}
.timeline .timeline-item > .timeline-point.timeline-point-warning {
color: #d0aa42;
background: #fff;
}
.timeline .timeline-item > .timeline-point.timeline-point-danger {
color: #d25a4b;
background: #fff;
}
.timeline .timeline-label {
position: relative;
float: left;
clear: left;
width: 50%;
margin-bottom: 20px;
top: 1px;
width: 100%;
margin-left: auto;
margin-right: auto;
padding: 0;
text-align: center;
}
.timeline .timeline-label:before,
.timeline .timeline-label:after {
content: "";
display: table;
}
.timeline .timeline-label:after {
clear: both;
}
.timeline .timeline-label:last-child {
margin-bottom: 0 !important;
}
.timeline .timeline-label + .timeline-item {
margin-top: 0;
}
.timeline .timeline-label + .timeline-item + .timeline-item {
margin-top: 40px;
}
.timeline .timeline-label .label-default {
background-color: #888888;
}
.timeline .timeline-label .label-primary {
background-color: #888888;
}
.timeline .timeline-label .label-info {
background-color: #3e93cf;
}
.timeline .timeline-label .label-warning {
background-color: #d0aa42;
}
.timeline .timeline-label .label-danger {
background-color: #d25a4b;
}
@media (max-width: 768px) {
.timeline.timeline {
width: 100%;
max-width: 100%;
}
.timeline.timeline .timeline-item {
padding-left: 72px;
padding-right: 0;
}
.timeline.timeline .timeline-item.timeline-item-right,
.timeline.timeline .timeline-item:nth-of-type(even):not(.timeline-item-left) {
padding-left: 72px;
padding-right: 0;
}
.timeline.timeline .timeline-item .timeline-event {
width: 100%;
}
.timeline.timeline:before {
left: 42px;
width: 0;
margin-left: -1px;
}
.timeline.timeline .timeline-item {
width: 100%;
margin-bottom: 20px;
}
.timeline.timeline .timeline-item:nth-of-type(even) {
margin-top: 0;
}
.timeline.timeline .timeline-item > .timeline-event {
float: right !important;
}
.timeline.timeline .timeline-item > .timeline-event:before,
.timeline.timeline .timeline-item > .timeline-event:after {
right: auto !important;
border-left-width: 0 !important;
}
.timeline.timeline .timeline-item > .timeline-event:before {
left: -15px !important;
border-right-width: 15px !important;
}
.timeline.timeline .timeline-item > .timeline-event:after {
left: -14px !important;
border-right-width: 14px !important;
}
.timeline.timeline .timeline-item > .timeline-point {
transform: translateX(-50%);
left: 42px !important;
margin-left: 0;
}
.timeline.timeline .timeline-label {
transform: translateX(-50%);
margin: 0 0 20px 42px;
}
.timeline.timeline .timeline-label + .timeline-item + .timeline-item {
margin-top: 0;
}
}
