Live Demo - Horizontal Timeline design using html,css and bootstrap

See Free Live Demo example of 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 c...

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

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;
  }
}