"Zigzag Timeline Layout"
Bootstrap 3.3.0 Snippet by andrewnite

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.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"> <div class="col-lg-12"> <h3 class="text-center">Zigzag Timeline Layout (and Cats)</h3> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p> <ul class="timeline"> <li> <div class="timeline-image"> <img class="img-circle img-responsive" src="http://lorempixel.com/250/250/cats/1" alt=""> </div> <div class="timeline-panel"> <div class="timeline-heading"> <h4>Step One</h4> <h4 class="subheading">Subtitle</h4> </div> <div class="timeline-body"> <p class="text-muted"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p> </div> </div> <div class="line"></div> </li> <li class="timeline-inverted"> <div class="timeline-image"> <img class="img-circle img-responsive" src="http://lorempixel.com/250/250/cats/2" alt=""> </div> <div class="timeline-panel"> <div class="timeline-heading"> <h4>Step Two</h4> <h4 class="subheading">Subtitle</h4> </div> <div class="timeline-body"> <p class="text-muted"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p> </div> </div> <div class="line"></div> </li> <li> <div class="timeline-image"> <img class="img-circle img-responsive" src="http://lorempixel.com/250/250/cats/3" alt=""> </div> <div class="timeline-panel"> <div class="timeline-heading"> <h4>Step Three</h4> <h4 class="subheading">Subtitle</h4> </div> <div class="timeline-body"> <p class="text-muted"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p> </div> </div> <div class="line"></div> </li> <li class="timeline-inverted"> <div class="timeline-image"> <img class="img-circle img-responsive" src="http://lorempixel.com/250/250/cats/4" alt=""> </div> <div class="timeline-panel"> <div class="timeline-heading"> <h4>Step Three</h4> <h4 class="subheading">Subtitle</h4> </div> <div class="timeline-body"> <p class="text-muted"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p> </div> </div> <div class="line"></div> </li> <li> <div class="timeline-image"> <img class="img-circle img-responsive" src="http://lorempixel.com/250/250/cats/5" alt=""> </div> <div class="timeline-panel"> <div class="timeline-heading"> <h4>Bonus Step</h4> <h4 class="subheading">Subtitle</h4> </div> <div class="timeline-body"> <p class="text-muted"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p> </div> </div> </li> </ul> </div> </div> </div>
.timeline { position: relative; padding:4px 0 0 0; margin-top:22px; list-style: none; } .timeline>li:nth-child(even) { position: relative; margin-bottom: 50px; height: 180px; right:-100px; } .timeline>li:nth-child(odd) { position: relative; margin-bottom: 50px; height: 180px; left:-100px; } .timeline>li:before, .timeline>li:after { content: " "; display: table; } .timeline>li:after { clear: both; min-height: 170px; } .timeline > li .timeline-panel { position: relative; float: left; width: 41%; padding: 0 20px 20px 30px; text-align: right; } .timeline>li .timeline-panel:before { right: auto; left: -15px; border-right-width: 15px; border-left-width: 0; } .timeline>li .timeline-panel:after { right: auto; left: -14px; border-right-width: 14px; border-left-width: 0; } .timeline>li .timeline-image { z-index: 100; position: absolute; left: 50%; border: 7px solid #3b5998; border-radius: 100%; background-color: #3b5998; box-shadow: 0 0 5px #4582ec; width: 200px; height: 200px; margin-left: -100px; } .timeline>li .timeline-image h4 { margin-top: 12px; font-size: 10px; line-height: 14px; } .timeline>li.timeline-inverted>.timeline-panel { float: right; padding: 0 30px 20px 20px; text-align: left; } .timeline>li.timeline-inverted>.timeline-panel:before { right: auto; left: -15px; border-right-width: 15px; border-left-width: 0; } .timeline>li.timeline-inverted>.timeline-panel:after { right: auto; left: -14px; border-right-width: 14px; border-left-width: 0; } .timeline>li:last-child { margin-bottom: 0; } .timeline .timeline-heading h4 { margin-top:22px; margin-bottom: 4px; padding:0; color: #b3b3b3; } .timeline .timeline-heading h4.subheading { margin:0; padding:0; text-transform: none; font-size:18px; color:#333333; } .timeline .timeline-body>p, .timeline .timeline-body>ul { margin-bottom: 0; color:#808080; } /*Style for even div.line*/ .timeline>li:nth-child(odd) .line:before { content: ""; position: absolute; top: 60px; bottom: 0; left: 690px; width: 4px; height:340px; background-color: #3b5998; -ms-transform: rotate(-44deg); /* IE 9 */ -webkit-transform: rotate(-44deg); /* Safari */ transform: rotate(-44deg); box-shadow: 0 0 5px #4582ec; } /*Style for odd div.line*/ .timeline>li:nth-child(even) .line:before { content: ""; position: absolute; top: 60px; bottom: 0; left: 450px; width: 4px; height:340px; background-color: #3b5998; -ms-transform: rotate(44deg); /* IE 9 */ -webkit-transform: rotate(44deg); /* Safari */ transform: rotate(44deg); box-shadow: 0 0 5px #4582ec; } /* Medium Devices, .visible-md-* */ @media (min-width: 992px) and (max-width: 1199px) { .timeline > li:nth-child(even) { margin-bottom: 0px; min-height: 0px; right: 0px; } .timeline > li:nth-child(odd) { margin-bottom: 0px; min-height: 0px; left: 0px; } .timeline>li:nth-child(even) .timeline-image { left: 0; margin-left: 0px; } .timeline>li:nth-child(odd) .timeline-image { left: 690px; margin-left: 0px; } .timeline > li:nth-child(even) .timeline-panel { width: 76%; padding: 0 0 20px 0px; text-align: left; } .timeline > li:nth-child(odd) .timeline-panel { width: 70%; padding: 0 0 20px 0px; text-align: right; } .timeline > li .line { display: none; } } /* Small Devices, Tablets */ @media (min-width: 768px) and (max-width: 991px) { .timeline > li:nth-child(even) { margin-bottom: 0px; min-height: 0px; right: 0px; } .timeline > li:nth-child(odd) { margin-bottom: 0px; min-height: 0px; left: 0px; } .timeline>li:nth-child(even) .timeline-image { left: 0; margin-left: 0px; } .timeline>li:nth-child(odd) .timeline-image { left: 520px; margin-left: 0px; } .timeline > li:nth-child(even) .timeline-panel { width: 70%; padding: 0 0 20px 0px; text-align: left; } .timeline > li:nth-child(odd) .timeline-panel { width: 70%; padding: 0 0 20px 0px; text-align: right; } .timeline > li .line { display: none; } } /* Custom, iPhone Retina */ @media only screen and (max-width: 767px) { .timeline > li:nth-child(even) { margin-bottom: 0px; min-height: 0px; right: 0px; } .timeline > li:nth-child(odd) { margin-bottom: 0px; min-height: 0px; left: 0px; } .timeline>li .timeline-image { position: static; width: 150px; height: 150px; margin-bottom:0px; } .timeline>li:nth-child(even) .timeline-image { left: 0; margin-left: 0; } .timeline>li:nth-child(odd) .timeline-image { float:right; left: 0px; margin-left:0; } .timeline > li:nth-child(even) .timeline-panel { width: 100%; padding: 0 0 20px 14px; } .timeline > li:nth-child(odd) .timeline-panel { width: 100%; padding: 0 14px 20px 0px; } .timeline > li .line { display: none; } }

Related: See More


Questions / Comments:

Thank you for this great timeline.
i just have the problem everyone is having on small screens. I changed the code to this:
.team-timeline>li:nth-child(even) .team-timeline-image {
left: 0;
margin-left: 0;
float: left;
}

however, I still have a problem. My images are bigger than the darkblue background circles. Here is my code for those:

<img class="rounded-circle img-responsive" src="img/ik.jpg" alt="" width="185px" height="185px">

any help?

Ahmad Zaytoun () - 7 years ago - Reply 1


I am looking to do something similar to this except instead of using it as a timeline I'd like to use it on my homepage as another way to navigate to different sections of my website. My ultimate goal is to have 4 circles (representing 4 sections of the website), that when connected by the lines end up forming a diamond shape. So top circle with lines down to a left circle & a right circle and lines from those 2 circles down to a bottom circle. In addition, I'd like them to rotate clockwise so that each has that top spot and no single element (or site section) is seen as more or less important. If this is something anybody can help me with I'd greatly appreciate it and even do some work on any of your projects in return. I'd of course send you my website information so you can see the current code, the current design, and how easy/hard this task may be given what I currently have. Email me at pence206175@gmail.com if interested in collaborating or even if you simply have a few basic ideas. I'd be appreciative of any thoughts regardless of if they end up actually contributing or not.

Austin Pence () - 7 years ago - Reply 0


I'm having a problem when i use this code inside a container instead of container-fluid. not fit in the container correctly. does anyone know any solution? thanks in advance

Foc WebDesigners () - 7 years ago - Reply 0


Muchas gracias! La verdad muy creativo! Para los que tengan problemas con la visualización en responsive, prueben si les sirve esto:
Ubican @media only screen and (max-width: 767px) {

y modifican las siguientes clases

.timeline>li:nth-child(even) .timeline-image {
float: left;
right: 0;
margin-left: 0;
}
.timeline>li:nth-child(odd) .timeline-image {
float:right;
left: 0px;
margin-left:0;
}

Saludos,

Alejandro Peña () - 7 years ago - Reply 0


Not working in mobile

Ivan Nieto () - 7 years ago - Reply 0


seems there is issue with devices like tablets like ipad, nexus 10 the distance between steps is not correct, can somebody fix it....it is not responsive for tablets

Ayush () - 7 years ago - Reply 0


Here is a Tutorial for Wordpress: https://webdesign-vellmar.d...

Tobias Pa () - 8 years ago - Reply 0


Good work

sandeep sharma () - 8 years ago - Reply 0


Very nice... i write it to a wordpress blog overview ;-)

Tobias Pa () - 8 years ago - Reply 0


Excellent work. Just a thought, Is there a way I can have multiple lines from one node ?

Vinod Balakrishnan () - 8 years ago - Reply 0


Hi! I love this timeline. It works fine in IE and Chrome, however not in Firefox. Can someone help me to get that right?

MarsConnects () - 8 years ago - Reply 0


Excellent Excellent - Truly Magnificent ... Full marks ...

ŠâŁmäñ HäíÐeŕ ĸħän () - 8 years ago - Reply 0


Una idea genial! Con tu permiso lo utilizaré.

Aunque el tema responsive aún tiene algunos detalles que arreglar.

Anaïs () - 8 years ago - Reply 0


This is really cool. It seems to break when at widths less than 768px, in the last media query section. The two "step 3" sections occupy the same line and merge together. Is there a simple fix?

faustian () - 8 years ago - Reply 0


If no one looks into this by the end of tomorrow I will look into it over the weekend.

mouse0270 () - 8 years ago - Reply 0


Hi mouse, did you get a chance to look at this? I'll have a go if you can't but am a CSS noob!

faustian () - 8 years ago - Reply 0


Nope, sadly half the keys on my keyboard stopped working and since I use the Microsoft comfort Curve 3000 keyboard I have a hard time working on standard shaped keyboards. So I wasn't able to work on anything this week. I ordered a new keyboard and it'll be here tomorrow. I take a look at it this weekend.

mouse0270 () - 8 years ago - Reply 0


modify
.team-timeline>li:nth-child(even) .team-timeline-image
css rule under @media only screen and (max-width: 767px) to this one

.team-timeline>li:nth-child(even) .team-timeline-image {
left: 0;
margin-left: 0;
float: left;
}

and you are done :)

ŠâŁmäñ HäíÐeŕ ĸħän () - 8 years ago - Reply 0


The fix was really simple - in the "@media only screen and (max-width: 767px)" section add "float:left;" to .timeline>li:nth-child(even) .timeline-image, so it becomes:

.timeline>li:nth-child(even) .timeline-image {
float:left;
left: 0;
margin-left: 0;
}

Hope that helps anyone who was stuck!

faustian () - 8 years ago - Reply 0


Its good but ... not repsonsive

fouad () - 8 years ago - Reply 0


modify this
.team-timeline>li:nth-child(even) .team-timeline-image
css rule under @media only screen and (max-width: 767px) to this one

.team-timeline>li:nth-child(even) .team-timeline-image {
left: 0;
margin-left: 0;
float: left;
}

and you are done :)

ŠâŁmäñ HäíÐeŕ ĸħän () - 8 years ago - Reply 0


How can I edit the CSS to make the blue lines less inclined?

Fernando Monteiro () - 8 years ago - Reply 0


You would have to change the `transform:rotate(44deg);` and `transform:rotate(-44deg);` on lines 119 and 134 to something that more better suits you.

mouse0270 () - 8 years ago - Reply 0


You would remove box-shadow: 0 0 5px #4582ec;

maxsurguy () - 8 years ago - Reply 0


@mouse0270:disqus is correct :) my bad!

maxsurguy () - 8 years ago - Reply 0


Thank you

Andrew Nite () - 8 years ago - Reply 0


Awesome

dev mfareza () - 8 years ago - Reply 0


How has this not gotten more attention, this looks amazing!

mouse0270 () - 8 years ago - Reply 0