"Zigzag Timeline Layout"
Bootstrap 3.3.0 Snippet by cathyloosvelt

<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">Teelt</h3> <p> Een champignonbedrijf bestaat uit verschillende 'teeltcellen'. In elke teeltcel staan 2 'stellingen' die elk uit 5 boven elkaar gestapelde bakken bestaan. De bakken hebben een standaardbreedte van 1.34 m en een variabele lengte. Onze kwekerij bestaat uit 4 cellen van elk 200 m2 teeltoppervlakte. De teeltcellen zijn met elkaar verbonden door een werkgang. Elke teeltcel bevindt zich in een ander stadium van het teeltproces. Op deze manier verzekeren we jullie elke dag in verse champignons te voorzien. In onze werkgang staan verschillende apparatuur om de teelt zo goed mogelijk te laten verlopen. </p> <ul class="timeline"> <li> <div class="timeline-image"> <img class="img-circle img-responsive" src="http://champignonkwekerij.be/develop/appbay/afbeelding/cyclus250.png" alt=""> </div> <div class="timeline-panel"> <div class="timeline-heading"> <h4>Levenscyclus</h4> <h4 class="subheading">Subtitle</h4> </div> <div class="timeline-body"> <p class="text-muted"> Champignons planten zich voort met sporen die geproduceerd worden op plaatjes in de hoed. Bij afrijping van de champignon opent de hoed zich zodat de sporen vrij komen. Vallen deze sporen op een geschikte voedingsbodem, dan zullen ze ontkiemen en aanleiding geven tot de ontwikkeling van een zwamvlok. De zwamvlok noemt men in het vakjargon 'mycelium'. Wanneer de omstandigheden gunstig zijn (in de natuur is dit vaak de herfstperiode) gaat het mycelium over tot de knopvorming, dit is de aanleg van de eigenlijke vruchtlichamen of champignons. Deze kleine knoppen groeien in snel temp uit tot volwaardige champignons. In een gestuurde teelt verdubbelt de champignon elke 24 uur in gewicht. Om champignons te telen, moet men deze levenscyclus in stand houden en optimaliseren. Daarvoor is behoefte aan een geschikte voedingsbodem voor de champignon, de geschikte rassen en een aangepast klimaat. Ook vrijwaring tegen allerhande ziekten en plagen is belangrijk. Enkel bij een optimale sturing van dit alles kan de teler de consument een kwalitatief hoogstaand product aanbieden. </p> </div> </div> <div class="line"></div> </li> <li class="timeline-inverted"> <div class="timeline-image"> <img class="img-circle img-responsive" src="http://champignonkwekerij.be/develop/appbay/afbeelding/myceliumgroei-kompost250.jpg" alt=""> </div> <div class="timeline-panel"> <div class="timeline-heading"> <h4>Myceliumgroei</h4> <h4 class="subheading">Subtitle</h4> </div> <div class="timeline-body"> <p class="text-muted"> De myceliumgroei duurt ongeveer 16 dagen bij een composttemperatuur van 25° C. In deze tijdspanne ontwikkelt de schimmel op de broedkorrels zich en koloniseert de compost. Op het einde van de myceliumgroei spreekt men van doorgroeide compost. In ons bedrijf vullen we onmiddellijk met doorgroeide compost dat we aangeleverd krijgen van onze compostleverancier: Sterckx Boven deze compost komt een laagje (6 cm) dekaarde. Deze dekaarde is een mengsel van veengrond en schuimaarde. Het mycelium moet ook dit laagje dekaarde doorgroeien. De dekaarde doet tevens dienst als waterbuffer voor de verdere teelt. Voor elke geproduceerde kg champignons is er ongeveer 2 liter water nodig. </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: