"Timeline (responsive)"
Bootstrap 3.0.3 Snippet by luisrudge

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

Similar snippets: See More


Comments:

Al .tolerant 2014-01-17 21:19:12
    cool
Sérgio Rafael Siqueira 2014-01-17 21:26:22
    Great, nice fork!
JJJ 2014-01-18 18:53:14
    awesome work, just what I was looking for. Thanks so much!
Royzi 2014-01-22 12:41:47
    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!
Luis Rudge 2014-01-30 22:28:25
    Maybe you can break this into two col-md-6?
simon 2014-02-10 10:03:40
    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 !
BenDaly 2014-01-26 12:45:44
    Great!
Ameenullah 2014-01-27 17:46:42
    good! but why there are multiple scrollpars appearing if we reduce the size of the window?
onepmo 2014-02-07 15:05:46
    There are already two in full-size ;)
Webrunner 2014-01-29 13:57:44
    This one is just perfect and easy to implement... Congratulations.
Mahdi Pishguy 2014-01-31 18:06:02
    thanks a lot
Davide Bellini 2014-02-14 13:34:48
    Very cool!
In a smartphone display ... what about move the content block to the bottom of icon instead keep to the right ?
Naurelijs 2014-02-27 02:08:09
    Amazing work!
How to get next to each other? Screen: http://yehpic.com/images/20...
wow 2014-04-07 08:18:49
    Love it!!! But how to always show the contents on the right instead of both sides?
jandante 2014-09-17 08:15:31
    Very dirty but quick => change @media query to
majid 2014-04-23 19:55:02
    hi
thancks
How to change diferent size for left and right panel?
huan 2014-05-27 15:03:27
    There is any way to make it more collapsed? with no space between panel on different sides?
Aron Brown 2015-01-15 19:13:37
    I wrote a quick javascript function to collapses the timeline.
Arthur Weill 2014-07-04 10:28:28
    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...
Junaid Atari 2014-09-23 22:42:06
    Lovely
Pascal Garber 2014-10-07 12:11:36
    I've create a less file for this css to make it compatible with the bootstrap 3 less files: https://gist.github.com/Jum...
maxsurguy 2014-10-26 04:01:01
    Thanks!
Luis Rudge 2014-11-19 00:27:01
    that's awesome! thanks!
Curious Dev 2014-10-07 16:39:54
    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.
Mirchu 2014-11-20 06:09:20
    use these icons http://mirchu.net/material-... like font awesome
Luong Huynh 2014-11-21 07:39:01
    How can customize arrow to line?? Thanks

Hallison Batista 2015-03-27 17:58:36
    Incrível!!! Muito obrigado! Código muito bem escrito e extremamente útil.
Navneet Garg 2015-08-05 14:02:29
    how to make it single column ?
Jason 2015-12-01 11:07:09
    Love this! solved my problems in seconds
Dexter 2015-12-03 22:31:25
    do you have any plugin or something to change timeline order of the elements?
Ross McNaughton 2016-02-11 10:21:17
    Anyone got an issue with this displaying on the iPhone 6?
Julien 2016-02-19 10:13:42
    Really nice timeline !
Chekle87 2016-08-01 21:54:59
    Awesome! Thank you very much!
ThallisPHP 2016-09-22 18:43:06
    Fantástico, funciona muito bem.
Nasir 2016-11-08 08:17:02
    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
Abdulkadir Gündüz 2017-02-19 09:03:14
    how can I use infinite scroll properties ?

Commenting will be back soon.