"Zigzag Timeline Layout"
Bootstrap 3.3.0 Snippet by effa

Post to Facebook Tweet this

<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-flued"> <div class="row"> <div class="col-lg-6"> <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"> </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"> </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"> </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"> </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"> </div> </div> </li> </ul> </div> <div class="col-lg-6"> <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"> </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"> </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"> </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"> </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"> </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: 2px solid #3b5998; border-radius: 100%; background-color: #3b5998; box-shadow: 0 0 5px #4582ec; width: 64px; height: 64px; 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:8px; margin-bottom: 4px; padding:0; color: #0a224e; font-size: 18px; } .timeline .timeline-heading h4.subheading { margin:0; padding:0; text-transform: none; font-size:12px; color:#833333; } .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: 15px; bottom: 0; left: 515px; width: 4px; height:300px; background-color: #3b5998; -ms-transform: rotate(-41deg); /* IE 9 */ -webkit-transform: rotate(-41deg); /* Safari */ transform: rotate(-41deg); box-shadow: 0 0 5px #4582ec; } /*Style for odd div.line*/ .timeline>li:nth-child(even) .line:before { content: ""; position: absolute; top: -10px; bottom: 0; left: 300px; width: 4px; height:300px; background-color: #3b5998; -ms-transform: rotate(41deg); /* IE 9 */ -webkit-transform: rotate(41deg); /* Safari */ transform: rotate(41deg); 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; } }

Questions / Comments: