"Timeline"
Bootstrap 3.1.0 Snippet by ppulp

<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; }

Related: See More


Questions / Comments: