<div class="navbar navbar-inverse navbar-fixed-top">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="#">Play with bootstrap</a>
        </div>
        <div class="collapse navbar-collapse">
          <ul class="nav navbar-nav">
            <li class="active"><a href="#">Home</a></li>
            <li><a href="#about">About</a></li>
            <li><a href="#contact">Contact</a></li>
          </ul>
        </div><!--/.nav-collapse -->
      </div>
    </div>

    <div class="container">

      <div class="starter-template jumbotron">
        <h1>Ready to fork: Bootstrap 3 pen</h1>
        <p class="lead">Fork this pen to start messing with bootstrap 3</p>
        <p>Need help? Here you have a link to the official guide: <a id="example" data-toggle="tooltip" data-placement="right" title="JS works just fine" href="https://getbootstrap.com/getting-started/" target="_blank">Getting started with bootstrap</a></p>
      </div>
     <div class="main">
      	<div class="row">
        <div class="row">
          <div class="col-md-12">
          <div class="col-md-6 m-50">
            <div class="post-left">
              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit harum ipsum velit quas qui quia atque! Quo id accusamus ex facilis corrupti temporibus vel aliquam autem nisi qui quos voluptate!</p>
              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Libero ab dolor veritatis sit pariatur illo debitis esse commodi quam et tenetur nihil ipsam natus sed deleniti consequuntur maxime officia laudantium.</p>
              <div class="date left">20</div>
            </div>
          </div>
          <div class="col-md-6 m-50">
            <div class="post-right  m-100">
              <p>Odit architecto adipisci enim non accusamus eveniet nam doloribus suscipit pariatur reprehenderit voluptates iusto deserunt incidunt odio asperiores atque voluptatibus aliquam molestias? Architecto vero soluta hic repellat neque voluptatem corporis?</p>
              <div class="date right">25</div>
            </div>
          </div>
       <div class="clearfix"></div>
            <div class="col-md-6 clearfix">
            <div class="post-left">
              <p>Rem recusandae animi ducimus molestias quod quisquam quae vitae maiores maxime at quaerat sapiente qui architecto. Nostrum soluta tenetur praesentium sed numquam molestiae placeat ipsa itaque. Nobis tempore ratione explicabo!</p>
              <div class="date left">5</div>
            </div>
              
          </div>
          <div class="col-md-6">
            <div class="post-right  m-100">
              <p>Et expedita nesciunt saepe vel porro laudantium est labore maxime rerum dolor deleniti inventore odio veritatis delectus eligendi sint tempore repudiandae aliquid autem unde sequi nisi dolorem quia fugiat harum.</p>
              <div class="date right">15</div>
            </div>
          </div>
        </div>
       </div>
          </div>
     </div> <!-- End of Main -->
    </div>

*{
  box-sizing: border-box;
}
body {
  padding-top: 50px;
  background: url('http://uxmas.com/assets/img/timeline-line.png') center repeat-y;
}
.starter-template {
  padding: 40px 15px;
  text-align: center;
}

.post-right.m-100{
 margin-top: 100px;
}

.post-left, .post-right{
  padding: 20px;
  border: 1px solid #999;
  margin: 10px 50px;
  border-bottom: 8px solid #8cc540;
  	position: relative;
  min-height: 300px;
}

.post-left:after, .post-left:before
{
	left: 100%;
	top: 50%;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
}

.post-left:after {
	border-color: rgba(255, 255, 255, 0);
	border-left-color: #fff;
	border-width: 30px;
	margin-top: -30px;
}
.post-left:before {
	border-color: rgba(153, 153, 153, 0);
	border-left-color: #999;
	border-width: 31px;
	margin-top: -31px;
}

.post-right:after, .post-right:before
{
	right: 100%;
	top: 50%;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
}

 .post-right:after {
	border-color: rgba(255, 255, 255, 0);
	border-right-color: #fff;
	border-width: 30px;
	margin-top: -30px;
}
.post-right:before {
	border-color: rgba(153, 153, 153, 0);
	border-right-color: #999;
	border-width: 31px;
	margin-top: -31px;
} 

.date{
  position: absolute;
  top: 50%;
  -webkit-border-radius: 1000px;
-moz-border-radius: 1000px;
border-radius: 1000px;
-moz-box-shadow: 0 0 0 1px #dcdacf;
-webkit-box-shadow: 0 0 0 1px #dcdacf;
box-shadow: 0 0 0 1px #dcdacf;
display: block;
position: absolute;
top: 40%;
height: 50px;
width: 50px;
color: #232323;
padding: 7px 0;
text-align: center;
font-family: "Montserrat", "Helvetica", Arial, sans-serif;
font-weight: 400;
font-size: 0.9em;
  line-height: 32px;
background: #dcdacf;
border: 3px solid #ffffff;
  
}

.date.left{ right: -91px; /* 15 + 50 + 1 + 25 ; col-md + post padding + border + itself's width/2 */}
.date.right{ left: -91px; /* 15 + 50 + 1 + 25 ; col-md + post padding + border + itself's width/2 */}

.clearfix {
  *zoom: 1;
  &:before,
  &:after {
    display: table;
    content: "";
    // Fixes Opera/contenteditable bug:
    // http://nicolasgallagher.com/micro-clearfix-hack/#comment-36952
    line-height: 0;
  }
  &:after {
    clear: both;
  }
}

.clear{ clear: both;}
.m-50{
  margin: 50px 0;
}

/* inspiration */
/* 
  http://daverupert.com/about.html
  http://uxmas.com/ 
*/

/* arrow */
/* http://cssarrowplease.com/ */

/* http://blog.jetstrap.com/2013/08/bootstrap-3-grids-explained/ */

//enable tooltips to proof that JS is working just fine
//hover over the link

$('#example').tooltip('show')