"Timeline (responsive)"
Bootstrap 3.0.3 Snippet by luisrudge

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.3/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="page-header"> <h1 id="timeline">Timeline</h1> </div> <ul class="timeline"> <li> <div class="timeline-badge"><i class="glyphicon glyphicon-check"></i></div> <div class="timeline-panel"> <div class="timeline-heading"> <h4 class="timeline-title">Mussum ipsum cacilds</h4> <p><small class="text-muted"><i class="glyphicon glyphicon-time"></i> 11 hours ago via Twitter</small></p> </div> <div class="timeline-body"> <p>Mussum ipsum cacilds, vidis litro abertis. Consetis adipiscings elitis. Pra lá , depois divoltis porris, paradis. Paisis, filhis, espiritis santis. Mé faiz elementum girarzis, nisi eros vermeio, in elementis mé pra quem é amistosis quis leo. Manduma pindureta quium dia nois paga. Sapien in monti palavris qui num significa nadis i pareci latim. Interessantiss quisso pudia ce receita de bolis, mais bolis eu num gostis.</p> </div> </div> </li> <li class="timeline-inverted"> <div class="timeline-badge warning"><i class="glyphicon glyphicon-credit-card"></i></div> <div class="timeline-panel"> <div class="timeline-heading"> <h4 class="timeline-title">Mussum ipsum cacilds</h4> </div> <div class="timeline-body"> <p>Mussum ipsum cacilds, vidis litro abertis. Consetis adipiscings elitis. Pra lá , depois divoltis porris, paradis. Paisis, filhis, espiritis santis. Mé faiz elementum girarzis, nisi eros vermeio, in elementis mé pra quem é amistosis quis leo. Manduma pindureta quium dia nois paga. Sapien in monti palavris qui num significa nadis i pareci latim. Interessantiss quisso pudia ce receita de bolis, mais bolis eu num gostis.</p> <p>Suco de cevadiss, é um leite divinis, qui tem lupuliz, matis, aguis e fermentis. Interagi no mé, cursus quis, vehicula ac nisi. Aenean vel dui dui. Nullam leo erat, aliquet quis tempus a, posuere ut mi. Ut scelerisque neque et turpis posuere pulvinar pellentesque nibh ullamcorper. Pharetra in mattis molestie, volutpat elementum justo. Aenean ut ante turpis. Pellentesque laoreet mé vel lectus scelerisque interdum cursus velit auctor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam ac mauris lectus, non scelerisque augue. Aenean justo massa.</p> </div> </div> </li> <li> <div class="timeline-badge danger"><i class="glyphicon glyphicon-credit-card"></i></div> <div class="timeline-panel"> <div class="timeline-heading"> <h4 class="timeline-title">Mussum ipsum cacilds</h4> </div> <div class="timeline-body"> <p>Mussum ipsum cacilds, vidis litro abertis. Consetis adipiscings elitis. Pra lá , depois divoltis porris, paradis. Paisis, filhis, espiritis santis. Mé faiz elementum girarzis, nisi eros vermeio, in elementis mé pra quem é amistosis quis leo. Manduma pindureta quium dia nois paga. Sapien in monti palavris qui num significa nadis i pareci latim. Interessantiss quisso pudia ce receita de bolis, mais bolis eu num gostis.</p> </div> </div> </li> <li class="timeline-inverted"> <div class="timeline-panel"> <div class="timeline-heading"> <h4 class="timeline-title">Mussum ipsum cacilds</h4> </div> <div class="timeline-body"> <p>Mussum ipsum cacilds, vidis litro abertis. Consetis adipiscings elitis. Pra lá , depois divoltis porris, paradis. Paisis, filhis, espiritis santis. Mé faiz elementum girarzis, nisi eros vermeio, in elementis mé pra quem é amistosis quis leo. Manduma pindureta quium dia nois paga. Sapien in monti palavris qui num significa nadis i pareci latim. Interessantiss quisso pudia ce receita de bolis, mais bolis eu num gostis.</p> </div> </div> </li> <li> <div class="timeline-badge info"><i class="glyphicon glyphicon-floppy-disk"></i></div> <div class="timeline-panel"> <div class="timeline-heading"> <h4 class="timeline-title">Mussum ipsum cacilds</h4> </div> <div class="timeline-body"> <p>Mussum ipsum cacilds, vidis litro abertis. Consetis adipiscings elitis. Pra lá , depois divoltis porris, paradis. Paisis, filhis, espiritis santis. Mé faiz elementum girarzis, nisi eros vermeio, in elementis mé pra quem é amistosis quis leo. Manduma pindureta quium dia nois paga. Sapien in monti palavris qui num significa nadis i pareci latim. Interessantiss quisso pudia ce receita de bolis, mais bolis eu num gostis.</p> <hr> <div class="btn-group"> <button type="button" class="btn btn-primary btn-sm dropdown-toggle" data-toggle="dropdown"> <i class="glyphicon glyphicon-cog"></i> <span class="caret"></span> </button> <ul class="dropdown-menu" role="menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li class="divider"></li> <li><a href="#">Separated link</a></li> </ul> </div> </div> </div> </li> <li> <div class="timeline-panel"> <div class="timeline-heading"> <h4 class="timeline-title">Mussum ipsum cacilds</h4> </div> <div class="timeline-body"> <p>Mussum ipsum cacilds, vidis litro abertis. Consetis adipiscings elitis. Pra lá , depois divoltis porris, paradis. Paisis, filhis, espiritis santis. Mé faiz elementum girarzis, nisi eros vermeio, in elementis mé pra quem é amistosis quis leo. Manduma pindureta quium dia nois paga. Sapien in monti palavris qui num significa nadis i pareci latim. Interessantiss quisso pudia ce receita de bolis, mais bolis eu num gostis.</p> </div> </div> </li> <li class="timeline-inverted"> <div class="timeline-badge success"><i class="glyphicon glyphicon-thumbs-up"></i></div> <div class="timeline-panel"> <div class="timeline-heading"> <h4 class="timeline-title">Mussum ipsum cacilds</h4> </div> <div class="timeline-body"> <p>Mussum ipsum cacilds, vidis litro abertis. Consetis adipiscings elitis. Pra lá , depois divoltis porris, paradis. Paisis, filhis, espiritis santis. Mé faiz elementum girarzis, nisi eros vermeio, in elementis mé pra quem é amistosis quis leo. Manduma pindureta quium dia nois paga. Sapien in monti palavris qui num significa nadis i pareci latim. Interessantiss quisso pudia ce receita de bolis, mais bolis eu num gostis.</p> </div> </div> </li> </ul> </div>
.timeline { list-style: none; padding: 20px 0 20px; position: relative; } .timeline:before { top: 0; bottom: 0; position: absolute; content: " "; width: 3px; background-color: #eeeeee; left: 50%; margin-left: -1.5px; } .timeline > li { margin-bottom: 20px; position: relative; } .timeline > li:before, .timeline > li:after { content: " "; display: table; } .timeline > li:after { clear: both; } .timeline > li:before, .timeline > li:after { content: " "; display: table; } .timeline > li:after { clear: both; } .timeline > li > .timeline-panel { width: 46%; float: left; border: 1px solid #d4d4d4; border-radius: 2px; padding: 20px; position: relative; -webkit-box-shadow: 0 1px 6px rgba(0, 0, 0, 0.175); box-shadow: 0 1px 6px rgba(0, 0, 0, 0.175); } .timeline > li > .timeline-panel:before { position: absolute; top: 26px; right: -15px; display: inline-block; border-top: 15px solid transparent; border-left: 15px solid #ccc; border-right: 0 solid #ccc; border-bottom: 15px solid transparent; content: " "; } .timeline > li > .timeline-panel:after { position: absolute; top: 27px; right: -14px; display: inline-block; border-top: 14px solid transparent; border-left: 14px solid #fff; border-right: 0 solid #fff; border-bottom: 14px solid transparent; content: " "; } .timeline > li > .timeline-badge { color: #fff; width: 50px; height: 50px; line-height: 50px; font-size: 1.4em; text-align: center; position: absolute; top: 16px; left: 50%; margin-left: -25px; background-color: #999999; z-index: 100; border-top-right-radius: 50%; border-top-left-radius: 50%; border-bottom-right-radius: 50%; border-bottom-left-radius: 50%; } .timeline > li.timeline-inverted > .timeline-panel { float: right; } .timeline > li.timeline-inverted > .timeline-panel:before { border-left-width: 0; border-right-width: 15px; left: -15px; right: auto; } .timeline > li.timeline-inverted > .timeline-panel:after { border-left-width: 0; border-right-width: 14px; left: -14px; right: auto; } .timeline-badge.primary { background-color: #2e6da4 !important; } .timeline-badge.success { background-color: #3f903f !important; } .timeline-badge.warning { background-color: #f0ad4e !important; } .timeline-badge.danger { background-color: #d9534f !important; } .timeline-badge.info { background-color: #5bc0de !important; } .timeline-title { margin-top: 0; color: inherit; } .timeline-body > p, .timeline-body > ul { margin-bottom: 0; } .timeline-body > p + p { margin-top: 5px; } @media (max-width: 767px) { ul.timeline:before { left: 40px; } ul.timeline > li > .timeline-panel { width: calc(100% - 90px); width: -moz-calc(100% - 90px); width: -webkit-calc(100% - 90px); } ul.timeline > li > .timeline-badge { left: 15px; margin-left: 0; top: 16px; } ul.timeline > li > .timeline-panel { float: right; } ul.timeline > li > .timeline-panel:before { border-left-width: 0; border-right-width: 15px; left: -15px; right: auto; } ul.timeline > li > .timeline-panel:after { border-left-width: 0; border-right-width: 14px; left: -14px; right: auto; } }

Related: See More


Questions / Comments:

This looks amazing! One question though: what's the optimum and/or maximum number of events this can reasonably handle without increasing load times? I have *tons* of data points, and need something that can handle high-volume.

Curious Dev (0) - 3 years ago - Reply -1


how can I use infinite scroll properties ?

Abdulkadir Gündüz (0) - 1 year ago - Reply 0


Hi. It's great but i am looking for timeline should be show in front of each other not to be at bottom and one in row. can you customize it like this? http://prntscr.com/d4ivsq

Nasir (0) - 1 year ago - Reply 0


Fantástico, funciona muito bem.

E parabéns pelo lipsum do Mussum :D, ficou muito bom

ThallisPHP (0) - 1 year ago - Reply 0


Awesome! Thank you very much!

Chekle87 (0) - 1 year ago - Reply 0


Really nice timeline !

Does anyone know how a fork to make an horizontal timeline ?

Julien (0) - 2 years ago - Reply 0


Anyone got an issue with this displaying on the iPhone 6?

Ross McNaughton (0) - 2 years ago - Reply 0


do you have any plugin or something to change timeline order of the elements?

Dexter (0) - 2 years ago - Reply 0


Love this! solved my problems in seconds

Jason (0) - 2 years ago - Reply 0


how to make it single column ?

Navneet Garg (0) - 2 years ago - Reply 0


Incrível!!! Muito obrigado! Código muito bem escrito e extremamente útil.

Awesome!!! Thanks so much! Code very well written and extremely useful.

Hallison Batista (0) - 3 years ago - Reply 0


How can customize arrow to line?? Thanks

Luong Huynh (0) - 3 years ago - Reply 0


use these icons http://mirchu.net/material-... like font awesome

Mirchu (0) - 3 years ago - Reply 0


I've create a less file for this css to make it compatible with the bootstrap 3 less files: https://gist.github.com/Jum...

Pascal Garber (0) - 3 years ago - Reply 0


that's awesome! thanks!

Luis Rudge (0) - 3 years ago - Reply 0


Thanks!

maxsurguy (0) - 3 years ago - Reply 0


Lovely

Junaid Atari (0) - 3 years ago - Reply 0


We write an article on how implementing this nice looking timeline in CakePHP with a tool we create called the BootstrapHelper, but it is in french : http://www.webandcow.com/Pa...

Arthur Weill (0) - 3 years ago - Reply 0


There is any way to make it more collapsed? with no space between panel on different sides?

huan (0) - 3 years ago - Reply 0


I wrote a quick javascript function to collapses the timeline.

Note: Because I am calculating the amount to collapse each element based on the previous element on the other side, this will not work if you have two or more items on the same side in a row. They must go back and forth. (when the screen is too narrow it reverts to the default CSS and stacks on top of one another properly)

http://bootsnipp.com/user/s...

Aron Brown (0) - 3 years ago - Reply 0


hi
thancks
How to change diferent size for left and right panel?

majid (0) - 4 years ago - Reply 0


Love it!!! But how to always show the contents on the right instead of both sides?

wow (0) - 4 years ago - Reply 0


Very dirty but quick => change @media query to

@media (max-width: 2800px)

:)

jandante (0) - 3 years ago - Reply 0


Amazing work!
How to get next to each other? Screen: http://yehpic.com/images/20...

Naurelijs (0) - 4 years ago - Reply 0


Very cool!
In a smartphone display ... what about move the content block to the bottom of icon instead keep to the right ?

Something like this http://tympanus.net/Bluepri... ( check smartphone resolution )

Davide Bellini (0) - 4 years ago - Reply 0


thanks a lot

Mahdi Pishguy (0) - 4 years ago - Reply 0


This one is just perfect and easy to implement... Congratulations.

Webrunner (0) - 4 years ago - Reply 0


good! but why there are multiple scrollpars appearing if we reduce the size of the window?

Ameenullah (0) - 4 years ago - Reply 0


There are already two in full-size ;)

onepmo (0) - 4 years ago - Reply 0


Great!

BenDaly (0) - 4 years ago - Reply 0


Awesome! thanks much for sharing.
I have a question though - what do I need to change so that each <li> won't capture the entire timeline. the end result of what I want to achieve is to have all the comments on the left side one after the other and the same for the comments on the right side (with an offset ). I want to have the two sides in parallel, something like comparing comments on both sides. thanks for the help!

Royzi (0) - 4 years ago - Reply 0


Maybe you can break this into two col-md-6?

Luis Rudge (0) - 4 years ago - Reply 0


Is their a new version with the Facebook like timeline ? With no empty blank on side. I don't know how to do it : (
Thanks for the great job btw !

simon (0) - 4 years ago - Reply 0


awesome work, just what I was looking for. Thanks so much!

JJJ (0) - 4 years ago - Reply 0


Great, nice fork!

Sérgio Rafael Siqueira (0) - 4 years ago - Reply 0


cool

Al .tolerant (0) - 4 years ago - Reply 0