<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.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 ---------->
<div class="container">
<div class="row">
<ul class="timeline">
<li class="year">2013</li>
<li class="event offset-first">
<div class="event-date">
Dependent certainty off discovery him his tolerably offending
<small>23 October 2013</small>
</div>
<div class="event-body">
<div class="row">
<div class="col-md-12">
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
<br><br>
It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
</p>
</div>
</div>
</div>
<div class="event-footer">
<a href="#" class="btn btn-xs btn-three pull-right">Read more</a>
</div>
</li>
<li class="event">
<div class="event-date">
Dependent certainty off discovery him his tolerably offending
<small>20 October 2013</small>
</div>
<div class="row">
<div class="col-md-12">
<div class="event-body">
<div class="row">
<div class="col-md-12">
<img src="http://lorempixel.com/530/330/fashion" class="img-responsive" alt="">
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
<br><br>
It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
</p>
</div>
</div>
</div>
</div>
</div>
<div class="event-footer">
<a href="#" class="btn btn-xs btn-three pull-right">Read more</a>
</div>
</li>
<li class="event">
<div class="event-date">
Dependent certainty off discovery him his tolerably offending
<small>3 October 2013</small>
</div>
<div class="row">
<div class="col-md-12">
<div class="event-body">
<div class="row">
<div class="col-md-12">
<img src="http://lorempixel.com/530/330/nightlife" class="img-responsive" alt="">
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
<br><br>
It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
</p>
</div>
</div>
</div>
</div>
</div>
<div class="event-footer">
<a href="#" class="btn btn-xs btn-three pull-right">Read more</a>
</div>
</li>
<li class="event">
<div class="event-date">
Dependent certainty off discovery him his tolerably offending
<small>30 September 2013</small>
</div>
<div class="row">
<div class="col-md-12">
<div class="event-body">
<div class="row">
<div class="col-md-12">
<iframe src="http://player.vimeo.com/video/66288274?badge=0" height="281"></iframe>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
<br><br>
It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
</p>
</div>
</div>
</div>
</div>
</div>
<div class="event-footer">
<a href="#" class="btn btn-xs btn-three pull-right">Read more</a>
</div>
</li>
<li class="clearfix"></li>
<li class="year">2012</li>
<li class="event offset-first">
<div class="event-date">
Dependent certainty off discovery him his tolerably offending
<small>23 October 2013</small>
</div>
<div class="event-body">
<div class="row">
<div class="col-md-12">
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
<br><br>
It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
</p>
</div>
</div>
</div>
<div class="event-footer">
<a href="#" class="btn btn-xs btn-three pull-right">Read more</a>
</div>
</li>
<li class="event">
<div class="event-date">
Dependent certainty off discovery him his tolerably offending
<small>20 October 2013</small>
</div>
<div class="row">
<div class="col-md-12">
<div class="event-body">
<div class="row">
<div class="col-md-12">
<img src="http://lorempixel.com/530/330/people" class="img-responsive" alt="">
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
<br><br>
It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
</p>
</div>
</div>
</div>
</div>
</div>
<div class="event-footer">
<a href="#" class="btn btn-xs btn-three pull-right">Read more</a>
</div>
</li>
<li class="event">
<div class="event-date">
Dependent certainty off discovery him his tolerably offending
<small>3 October 2013</small>
</div>
<div class="row">
<div class="col-md-12">
<div class="event-body">
<div class="row">
<div class="col-md-12">
<img src="http://lorempixel.com/530/330/city" class="img-responsive" alt="">
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
<br><br>
It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
</p>
</div>
</div>
</div>
</div>
</div>
<div class="event-footer">
<a href="#" class="btn btn-xs btn-three pull-right">Read more</a>
</div>
</li>
<li class="event">
<div class="event-date">
Dependent certainty off discovery him his tolerably offending
<small>30 September 2013</small>
</div>
<div class="row">
<div class="col-md-12">
<div class="event-body">
<div class="row">
<div class="col-md-12">
<iframe src="http://player.vimeo.com/video/66288274?badge=0" height="281"></iframe>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
<br><br>
It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
</p>
</div>
</div>
</div>
</div>
</div>
<div class="event-footer">
<a href="#" class="btn btn-xs btn-three pull-right">Read more</a>
</div>
</li>
</ul>
</div>
</div>
.timeline {
margin: 0px auto;
/* max-width: 700px; */
overflow: hidden;
height: auto;
position: relative;
padding: 0px;
list-style-type: none;
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAACCAYAAACZgbYnAAAAEElEQVQIW2NMTEz8z8gABAAPKwIlXWq1kgAAAABJRU5ErkJggg==);
background-repeat: repeat-y;
background-position: 50% 0;
}
.timeline .year {
width: 100%;
background: #333;
padding: 8px 10px;
margin: 20px auto 40px !important;
font-size: 20px;
}
.timeline .year {
border-radius: 3px;
}
.timeline .event {
position: relative;
text-align: center;
float: right;
clear: right;
width: 45%;
margin: 10px 2.5%;
border-radius: 5px;
list-style-type: none;
display: block;
padding: .4em;
background: white;
z-index: 15;
color: #4d4d4d;
border: 1px solid #9d9d9d;
text-decoration: none;
-webkit-transition: background .15s linear;
-moz-transition: background .15s linear;
-ms-transition: background .15s linear;
-o-transition: background .15s linear;
transition: background .15s linear;
}
.timeline .event.offset-first {
margin-top: -1.5em !important;
}
.timeline .event:nth-child(2n) {
float: left;
clear: left;
}
.timeline .event-date {
margin: 0;
background: #FFF;
border-bottom: 1px solid #e0eded;
text-align: left;
padding: 10px 10px;
font-weight: 500;
font-size: 14px;
}
.timeline .event-date small {
display: block;
font-size: 12px;
color: #a1a1a1;
font-weight: normal;
}
.timeline .event-body {
background: #f8f8f8;
}
.timeline p {
padding: 20px 10px;
text-align: left;
}
.btn {
font-weight: normal;
white-space: nowrap;
vertical-align: middle;
cursor: pointer;
background-image: none;
border: 1px solid transparent;
border-radius: 2px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
user-select: none;
}
.btn-xs {
padding: 4px 10px;
margin-bottom: 6px;
}
.timeline .event-footer {
margin: 0;
text-align: left;
padding: 8px 10px;
background: none;
border-top: 1px solid #e0eded;
}
.timeline .event:nth-child(2n) .event-date:after {
content: "";
display: inline-block;
position: absolute;
right: -12px !important;
top: 12px;
width: 0;
height: 0;
border-left: 12px solid #fff;
border-top: 12px solid transparent;
border-bottom: 12px solid transparent;
z-index: 20;
}
.timeline .event:nth-child(2n) .event-date:after {
content: "";
display: inline-block;
position: absolute;
right: -12px !important;
top: 12px;
width: 0;
height: 0;
border-left: 12px solid #fff;
border-top: 12px solid transparent;
border-bottom: 12px solid transparent;
z-index: 20;
}
.timeline .event:nth-child(2n-1):before {
content: "";
display: inline-block;
position: absolute;
left: -6.5% !important;
top: 20px;
width: 10px;
height: 10px;
background: #59b2e5;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
border-radius: 50%;
}
.timeline .event:nth-child(2n):before {
content: "";
display: inline-block;
position: absolute;
right: -6.8% !important;
top: 20px;
width: 10px;
height: 10px;
background: #59b2e5;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
border-radius: 50%;
}
.timeline .event:nth-child(2n) .event-date:before {
content: "";
display: inline-block;
position: absolute;
top: 11px;
right: -13px;
width: 0;
height: 0;
border-left: 13px solid #ddd;
border-top: 13px solid transparent;
border-bottom: 13px solid transparent;
z-index: 0;
}
.timeline .event:nth-child(2n-1) .event-date:after {
content: "";
display: inline-block;
position: absolute;
left: -12px !important;
top: 12px;
width: 0;
height: 0;
border-right: 12px solid #fff;
border-top: 12px solid transparent;
border-bottom: 12px solid transparent;
z-index: 20;
}
.timeline .event:nth-child(2n-1) .event-date:before {
content: "";
display: inline-block;
position: absolute;
top: 11px;
left: -13px;
width: 0;
height: 0;
border-right: 13px solid #ddd;
border-top: 13px solid transparent;
border-bottom: 13px solid transparent;
z-index: 0;
}
.btn-three {
color: #ffffff;
background-color: #333;
border: 1px solid;
border-color: #292929;
}
.timeline .event {
padding: 0;
border: 1px solid #e0eded;
border-radius: 0;
}
.timeline .year {
background: #505050;
font-size: 3em;
max-width: 4em;
clear: both;
margin: 1em auto;
color: white;
border-radius: 30%/100%;
text-align: center;
margin-top: 50px;
}