<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="row"> <div class="timeline-centered"> <div class="timeline-entry"> <div class="timeline-entry-inner"> <div class="timeline-icon"> </div> <div class="timeline-label"> <p>Tolerably earnestly middleton extremely distrusts she boy now not. Add and offered prepare how cordial two promise. Greatly who affixed suppose but enquire compact prepare all put. Added forth chief trees but rooms think may.</p> </div> </div> </div> <div class="timeline-entry"> <div class="timeline-entry-inner"> <div class="timeline-icon"> </div> <div class="timeline-label"> <p>You have a meeting at <strong>Laborator Office</strong> Today.</p> </div> </div> </div> <div class="timeline-entry"> <div class="timeline-entry-inner"> <div class="timeline-icon"> </div> <div class="timeline-label"> <a href="#">Arlind Nushi</a> <span>checked in at</span> <a href="#">Laborator</a> </div> </div> </div> <div class="timeline-entry"> <div class="timeline-entry-inner"> <div class="timeline-icon"> </div> <div class="timeline-label"> <a href="#">Arber Nushi</a> <span>changed his</span> <a href="#">Profile Picture</a> </div> </div> </div> <div class="hangup timeline-entry "> <div class="timeline-entry-inner"> <div class="timeline-icon"> </div> <div class="timeline-label"> Hangup </div> </div> </div> </div> </div> </div>

.timeline-centered { position: relative; margin-bottom: 30px; } .timeline-centered:before, .timeline-centered:after { content: " "; display: table; } .timeline-centered:after { clear: both; } .timeline-centered:before, .timeline-centered:after { content: " "; display: table; } .timeline-centered:after { clear: both; } .timeline-centered:before { content: ''; position: absolute; display: block; width: 2px; background: lightgray; /*left: 50%;*/ top: 20px; bottom: 25px; margin-left: 20px; } .timeline-centered .timeline-entry { position: relative; /*width: 50%; float: right;*/ margin-top: 5px; margin-left: 30px; margin-bottom: 10px; clear: both; } .timeline-centered .timeline-entry:before, .timeline-centered .timeline-entry:after { content: " "; display: table; } .timeline-centered .timeline-entry:after { clear: both; } .timeline-centered .timeline-entry:before, .timeline-centered .timeline-entry:after { content: " "; display: table; } .timeline-centered .timeline-entry:after { clear: both; } .timeline-centered .timeline-entry.begin { margin-bottom: 0; } .timeline-centered .timeline-entry .timeline-entry-inner { position: relative; margin-left: -20px; } .timeline-centered .timeline-entry .timeline-entry-inner:before, .timeline-centered .timeline-entry .timeline-entry-inner:after { content: " "; display: table; } .timeline-centered .timeline-entry .timeline-entry-inner:after { clear: both; } .timeline-centered .timeline-entry .timeline-entry-inner:before, .timeline-centered .timeline-entry .timeline-entry-inner:after { content: " "; display: table; } .timeline-centered .timeline-entry .timeline-entry-inner:after { clear: both; } .timeline-centered .timeline-entry .timeline-entry-inner .timeline-time { position: absolute; left: -100px; text-align: right; padding: 10px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .timeline-centered .timeline-entry .timeline-entry-inner .timeline-time > span { display: block; } .timeline-centered .timeline-entry .timeline-entry-inner .timeline-time > span:first-child { font-size: 15px; font-weight: bold; } .timeline-centered .timeline-entry .timeline-entry-inner .timeline-time > span:last-child { font-size: 12px; } .timeline-centered .timeline-entry .timeline-entry-inner .timeline-icon { background: #fff; color: #737881; display: block; width: 20px; height: 20px; -webkit-background-clip: padding-box; -moz-background-clip: padding; background-clip: padding-box; -webkit-border-radius: 20px; -moz-border-radius: 20px; border-radius: 20px; text-align: center; -moz-box-shadow: 0 0 0 2px lightgray; -webkit-box-shadow: 0 0 0 2px lightgray; box-shadow: 0 0 0 2px lightgray; line-height: 20px; font-size: 15px; float: left; } .timeline-centered .timeline-entry .timeline-entry-inner .timeline-label { position: relative; padding: 0 1em 1em 1em; margin-left: 25px; -webkit-background-clip: padding-box; -moz-background-clip: padding; background-clip: padding-box; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; }