Horizontal timeline page desing using custom html,css and bootstrap. in timeline you can display date and message or description. you can get timeline free code from nicesnippets.

you can get code of horizontal timeline bootstrap snippet. we give you example of bootstrap timeline template , you can simple copy bellow code and use in your project. If it free snippets of timeline css bootstrap So you have to simple get those bellow code from tab of html, css and js. you simple click on HTML Code then you will get html code horizontal timeline angularjs snippets, click on JS Code tab get code of jquery codd for horizontal timeline using bootstrap snippets, same as for CSS Code tab. It's pretty easy and simple example of horizontal timeline html css snippet.


<!DOCTYPE html> <html> <head> <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> </head> <div class="container"> <div class="row"> <div class="col-md-12 col-sm-12 col-xs-12"> <section class="main-timeline-section"> <div class="timeline-start"></div> <div class="conference-center-line"></div> <div class="conference-timeline-content"> <div class="timeline-article timeline-article-top"> <div class="content-date"> <span>10-09-2017</span> </div> <div class="meta-date"></div> <div class="content-box"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod</p> </div> </div> <div class="timeline-article timeline-article-bottom"> <div class="content-date"> <span>10-09-2017</span> </div> <div class="meta-date"></div> <div class="content-box"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod</p> </div> </div> <div class="timeline-article timeline-article-top"> <div class="content-date"> <span>10-09-2017</span> </div> <div class="meta-date"></div> <div class="content-box"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod</p> </div> </div> <div class="timeline-article timeline-article-bottom"> <div class="content-date"> <span>10-09-2017</span> </div> <div class="meta-date"></div> <div class="content-box"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod</p> </div> </div> </div> <div class="timeline-end"></div> </section> </div> </div> </div> </body> </html>
body{ background-color: #f1f1f1; } .main-timeline-section{ position: relative; width: 100%; margin:auto; height:300px; } .main-timeline-section .timeline-start, .main-timeline-section .timeline-end{ position: absolute; background:#F2635F; border-radius:100px; top:50%; transform: translateY(-50%); width:30px; height:30px; } .main-timeline-section .timeline-end{ right:0px; } .main-timeline-section .conference-center-line{ position: absolute; width:100%; height:5px; top:50%; transform: translateY(-50%); background:#F2635F; } .timeline-article{ width: 20%; position: relative; min-height: 300px; float:right; } .timeline-article .content-date{ position: absolute; top: 35%; left: -30px; font-size:18px; } .timeline-article .meta-date{ position: absolute; top: 50%; left: 0px; transform: translateY(-50%); width:20px; height:20px; border-radius: 100%; background:#fff; border:1px solid #F2635F; } .timeline-article .content-box{ box-shadow: 2px 2px 4px 0px #c1c1c1; border:1px solid #F2635F; border-radius: 5px; background-color: #fff; width: 180px; position: absolute; top: 60%; left: -80px; padding:10px; } .timeline-article-top .content-box:before{ content: " "; position:absolute; left:50%; transform: translateX(-50%); top:-20px; border:10px solid transparent; border-bottom-color: #F2635F; } .timeline-article-bottom .content-date{ top: 59%; } .timeline-article-bottom .content-box{ top: 0%; } .timeline-article-bottom .content-box:before{ content: " "; position:absolute; left:50%; transform: translateX(-50%); bottom:-20px; border:10px solid transparent; border-top-color:#F2635F; } @media (max-width:460px){ body{ display: none; } }

Please Subscribe Your Email Address, We Will Notify You When Add New Snippet:





Related Post

Our team section layout design in bootstrap

Our team section layout design in bootstrap

Ready Code of Our team section layout design in bootstrap css framework

Read More
Bootstrap round shape step by step wizard

Bootstrap round shape step by step wizard

Simple Step by step tab using css and Bootstrap framework

Read More
How to create custom with stylish bootstrap step tabs

How to create custom with stylish bootstrap step tabs

Bootstrap step example using custom js and css with stylish design. you can g...

Read More

Random Post