Bootstrap 4 horizontal timeline page design. this timeline page is fully responsive and support all the browser. In this timeline page design display yearly data, monthly data, weekly data and daily data. this is also usefull in event display. in this timeline design you can display image,date and description.

We allows to free snippets of responsive horizontal timeline bootstrap , you can download full code of horizontal timeline examples layout. Here in this post i will give you example of bootstrap timeline plugin snippet and you will get simple code of html, css and jquery. In horizontal timeline new design snippet i give you three tab with html, css and js, you can easily get code of horizontal timeline bootstrap layout.


<!DOCTYPE html> <html> <head> <link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous"> </head> <body> <div class="container"> <div class="row timeline text-center"> <div class="col-lg-2 col-sm-2 col-12 timeline-section1 text-danger"> <div class="row"> <div class="col-lg-12 col-md-12 col-6 timeline-icon-section"> <img src="/demo/man01.png" class="rounded-circle img-thumbnail"> <div class="borders"></div> </div> <div class="col-lg-12 col-md-12 col-6 timeline-content-bottom"> <h1>2001</h1> <p>Lorem ipsum dolor sitriatur. a deserunt.</p> </div> </div> </div> <div class="col-lg-2 col-sm-2 col-12 timeline-section2 text-info"> <div class="row"> <div class="col-lg-12 col-md-12 col-6 timeline-content-top"> <p>Lorem ipsum dolor sitriatur. a deserunt.</p> <h1>2001</h1> </div> <div class="col-lg-12 col-md-12 col-6 timeline-icon-section"> <div class="borders"></div> <img src="/demo/man02.png" class="rounded-circle img-thumbnail"> </div> </div> </div> <div class="col-lg-2 col-sm-2 col-12 timeline-section1 text-danger"> <div class="row"> <div class="col-lg-12 col-md-12 col-6 timeline-icon-section"> <img src="/demo/man03.png" class="rounded-circle img-thumbnail"> <div class="borders"></div> </div> <div class="col-lg-12 col-md-12 col-6 timeline-content-bottom"> <h1>2001</h1> <p>Lorem ipsum dolor sitriatur. a deserunt.</p> </div> </div> </div> <div class="col-lg-2 col-sm-2 col-12 timeline-section2 text-info"> <div class="row"> <div class="col-lg-12 col-md-12 col-6 timeline-content-top"> <p>Lorem ipsum dolor sitriatur. a deserunt.</p> <h1>2001</h1> </div> <div class="col-lg-12 col-md-12 col-6 timeline-icon-section"> <div class="borders"></div> <img src="/demo/man04.png" class="rounded-circle img-thumbnail"> </div> </div> </div> <div class="col-lg-2 col-sm-2 col-12 timeline-section1 text-danger"> <div class="row"> <div class="col-lg-12 col-md-12 col-6 timeline-icon-section"> <img src="/demo/man01.png" class="rounded-circle img-thumbnail"> <div class="borders"></div> </div> <div class="col-lg-12 col-md-12 col-6 timeline-content-bottom"> <h1>2001</h1> <p>Lorem ipsum dolor sitriatur. a deserunt.</p> </div> </div> </div> <div class="col-lg-2 col-sm-2 col-12 timeline-section2 text-info"> <div class="row"> <div class="col-lg-12 col-md-12 col-6 timeline-content-top"> <p>Lorem ipsum dolor sitriatur. a deserunt.</p> <h1>2001</h1> </div> <div class="col-lg-12 col-md-12 col-6 timeline-icon-section"> <div class="borders"></div> <img src="/demo/man02.png" class="rounded-circle img-thumbnail"> </div> </div> </div> </div> </div> </body> </html>
body{ margin-top: 30px; background-color: #FAEBD7; } .timeline{ background-color: #fff; padding: 30px; } .timeline-section1 .timeline-icon-section, .timeline-section2 .timeline-content-top{ position: relative; border-bottom:20px solid #DC3545; height:210px; } .timeline-section2 .timeline-content-top{ border-bottom:20px solid #17A2B8; padding-top: 30px; } .timeline-section1 .timeline-icon-section:after{ content: " "; position:absolute; top:190px; right: 0px; border:10px solid #fff; border-left-color:#DC3545; } .timeline-section1 .timeline-icon-section:before{ content: " "; position:absolute; top:190px; left:0px; border:10px solid transparent; border-left-color:#fff; } .timeline-section2 .timeline-icon-section:after{ content: " "; position:absolute; top:-20px; right: 0px; border:10px solid #fff; border-left-color:#17A2B8; } .timeline-section2 .timeline-icon-section:before{ content: " "; position:absolute; top:-20px; left:0px; border:10px solid transparent; border-left-color:#fff; } .timeline-icon-section img{ border: 1px solid #DC3545; width: 100px; height: 100px; } .borders{ border-right:1px solid #c2c2c2; height:50px; width: 1px; margin: 20px auto; } .timeline-section2 .timeline-icon-section img{ border: 1px solid #17A2B8; } .timeline-content-bottom{ margin-top:70px; } .timeline-content-bottom h1,.timeline-content-top h1{ font-size: 25px; font-weight: bold; } .timeline-section2 .timeline-content-top{ height:210px; } @media (min-width:320px) and (max-width:640px){ .timeline-section1 .timeline-icon-section::after, .timeline-section1 .timeline-icon-section::before, .timeline-section2 .timeline-icon-section::before, .timeline-section2 .timeline-icon-section::after, .timeline-section2 .timeline-icon-section, .timeline-section2 .timeline-content-top, .timeline-section1 .timeline-icon-section{ border:none; } .timeline-section2{ border-bottom: 3px solid #2CA2B8; margin-bottom: 15px; } .timeline-section1{ border-bottom: 3px solid #DC3545; margin-bottom: 15px; } }




Random Post




Related Post

Sample bootstrap code of timeline design using html and css

Sample bootstrap code of timeline design using html and css

Responsive timeline page desing using bootstrap and css. you can easly implementation in you project. you can get code of vertical timeline design snippet. w...

Read More
Horizontal Timeline design using html,css and bootstrap

Horizontal Timeline design using html,css and bootstrap

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...

Read More
Best timeline page design using html,css and bootstrap

Best timeline page design using html,css and bootstrap

Good looking timeline page design. new timeline page design usign html and css. nicesnippets provide free timeline page design. you can get code of bootstrap...

Read More