"Timeline"
Bootstrap 3.0.3 Snippet by sergiors

<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: 50%; 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-inverted + li:not(.timeline-inverted), .timeline > li:not(.timeline-inverted) + li.timeline-inverted { margin-top: -60px; } .timeline > li:not(.timeline-inverted) { padding-right:90px; } .timeline > li.timeline-inverted { padding-left:90px; } .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; }

Related: See More


Questions / Comments:

The following CSS is double used:

.timeline > li:before,
.timeline > li:after {
content: " ";
display: table;
}
.timeline > li:after {
clear: both;
}

Line 20 & 28

Rick de man () - 9 years ago - Reply 0


Hahaha, Mussum ipsum muito foda.
Ótimo snip, valeu!

Adrian Neuhaus () - 9 years ago - Reply 0


hey, I am a newbie. Can we change it so that we have the right and left panel on the same line? I have a timeline where some events occur at the same time and so wanted it to show it on both left and right panel in the same row.

Uma () - 9 years ago - Reply 0


Hi, well I didn't do that in this example =/

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


Í've Added/modified some CSS for
- better view ( Zooming / smaller devices )
- Make the pages shorter, Bring timeline up when possible.

Changes:
.timeline > li > .timeline-panel: Width: 50%

Added:
.timeline > li.timeline-inverted + li:not(.timeline-inverted),
.timeline > li:not(.timeline-inverted) + li.timeline-inverted {
margin-top: -60px;
}

.timeline > li:not(.timeline-inverted) {
padding-right:75px;
}

.timeline > li.timeline-inverted {
padding-left:75px;
}

Feel Free to use like we can use yours !

Guest () - 9 years ago - Reply 0


Í've Added/modified some CSS for
- better view ( Zooming / smaller devices )
- Make the pages shorter, Bring timeline up when possible.

Changes:
.timeline > li > .timeline-panel: Width: 50%

Added:
.timeline > li.timeline-inverted + li:not(.timeline-inverted),
.timeline > li:not(.timeline-inverted) + li.timeline-inverted {
margin-top: -60px;
}

.timeline > li:not(.timeline-inverted) {
padding-right:75px;
}

.timeline > li.timeline-inverted {
padding-left:75px;
}

Guest () - 9 years ago - Reply 0


great design, love the simplicity!

Callum West () - 10 years ago - Reply 0


I Don't Like It Sorry Its Very Basic And Easy To Do I Could Do It Within 2 Seconds

Pwned () - 10 years ago - Reply 0


Good for you buddy if you can do the same thing in 2 seconds, but you are not the only one to visit this website...

Thank you Sergiors for sharing, this is really interesting :)

Chris () - 10 years ago - Reply 0


for this reason is salt to taste ;)

Guest () - 10 years ago - Reply 0


I added some css classes to make it work responsive. Feel free to add them to the code:

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

kiwi () - 10 years ago - Reply 0


The calc mode is nice and handy, but not all browsers do support this feature and or the syntax must contain more spaces:

width: calc(100% - 90px); - Might Fail
width: calc( 100% - 90px ) ; Works more often

Rikkert2x () - 9 years ago - Reply 0


Thanks Kiwi, can you put it in codepen?

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


Muito legal! Mas como eu consigo baixar para testes? Eu copiei os arquivos, salvei em arquivos css e html, mas, aparece desconfigurado. As divs estão se encontrando sobrepondo as bolinhas e não os ícones não aparecem. O que eu estou fazendo de errado?

Luis Carlos de Souza () - 10 years ago - Reply 0


Eu troquei a versão e instalei baixei as fontes glyphicon e funcionou legal. Agradeço!

Luis Carlos de Souza () - 10 years ago - Reply 0


Dude, thank you so much for sharing!

Alex () - 10 years ago - Reply 0


Great!

JotaMiller () - 10 years ago - Reply 0


Uma das divs está sem a bolinha. É assim mesmo?

Mateus Avila Isidoro () - 10 years ago - Reply 0


Sim sim, é opcional

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