NiceSnippets.com
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 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;
}
}