<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/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"> <ul class="timeline"> <li> <div class="timeline-badge"> <a><i class="fa fa-circle" id=""></i></a> </div> <div class="timeline-panel"> <div class="timeline-heading"> <h4>Timeline Event</h4> </div> <div class="timeline-body"> <p>Invitamus me testatur sed quod non dum animae tuae lacrimis ut libertatem deum rogus aegritudinis causet. Dicens hoc contra serpentibus isto.</p> </div> <div class="timeline-footer"> <p class="text-right">Feb-21-2014</p> </div> </div> </li> <li class="timeline-inverted"> <div class="cd-timeline-img"> <strong> 12 </strong><br> Oct </div> <div class="timeline-badge"> <a><i class="fa fa-circle invert" id=""></i></a> </div> <div class="timeline-panel"> <div class="timeline-heading"> <h4>Timeline Event</h4> </div> <div class="timeline-body"> <p>Stranguillione in deinde cepit roseo commendavit patris super color est se sed. Virginis plus plorantes abscederem assignato ipsum ait regem Ardalio nos filiae Hellenicus mihi cum. Theophilo litore in lucem in modo invenit quasi nomen magni ergo est se est Apollonius, habet clementiae venit ad nomine sed dominum depressit filia navem.</p> </div> <div class="timeline-footer"> <p class="text-right">Feb-23-2014</p> </div> </div> </li> <li class="clearfix no-float"></li> </ul> </div> </div>

body{ background: #cccccc; } /* ----------------------------------------------- * Timeline * --------------------------------------------- */ .timeline { list-style: none; padding: 10px 0; position: relative; font-weight: 300; } .timeline:before { top: 0; bottom: 0; position: absolute; content:" "; width: 2px; background: #ffffff; left: 50%; margin-left: -1.5px; } .timeline > li { margin-bottom: 20px; position: relative; width: 50%; float: left; clear: left; } .timeline > li:before, .timeline > li:after { content:" "; display: table; } .timeline > li:after { clear: both; } .timeline > li:before, .timeline > li:after { content:" "; display: table; } .timeline > li:after { clear: both; } .timeline > li > .timeline-panel { width: calc(100% - 25px); width: -moz-calc(100% - 25px); width: -webkit-calc(100% - 25px); float: left; border: 1px solid #dcdcdc; background: #ffffff; position: relative; } .timeline > li > .timeline-panel:before { position: absolute; top: 26px; right: -15px; display: inline-block; border-top: 15px solid transparent; border-left: 15px solid #dcdcdc; border-right: 0 solid #dcdcdc; border-bottom: 15px solid transparent; content:" "; } .timeline > li > .timeline-panel:after { position: absolute; top: 27px; right: -14px; display: inline-block; border-top: 14px solid transparent; border-left: 14px solid #ffffff; border-right: 0 solid #ffffff; border-bottom: 14px solid transparent; content:" "; } .timeline > li > .timeline-badge { color: #ffffff; width: 24px; height: 24px; line-height: 50px; text-align: center; position: absolute; top: 16px; right: -12px; z-index: 100; } .timeline > li.timeline-inverted > .timeline-panel { float: right; } .timeline > li.timeline-inverted > .timeline-panel:before { border-left-width: 0; border-right-width: 15px; left: -15px; right: auto; } .timeline > li.timeline-inverted > .timeline-panel:after { border-left-width: 0; border-right-width: 14px; left: -14px; right: auto; } .timeline-badge > a { color: #ffffff !important; } .timeline-badge a:hover { color: #dcdcdc !important; } .timeline-title { margin-top: 0; color: inherit; } .timeline-heading h4 { font-weight: 400; padding: 0 15px; color: #4679bd; } .timeline-body > p, .timeline-body > ul { padding: 10px 15px; margin-bottom: 0; } .timeline-footer { padding: 5px 15px; background-color:#f4f4f4; } .timeline-footer p { margin-bottom: 0; } .timeline-footer > a { cursor: pointer; text-decoration: none; } .timeline > li.timeline-inverted { float: right; clear: right; } .timeline > li:nth-child(2) { margin-top: 0px; } .timeline > li.timeline-inverted > .timeline-badge { left: -12px; } .no-float { float: none !important; } @media (max-width: 767px) { ul.timeline:before { left: 40px; } ul.timeline > li { margin-bottom: 0px; position: relative; width:100%; float: left; clear: left; } ul.timeline > li > .timeline-panel { width: calc(100% - 65px); width: -moz-calc(100% - 65px); width: -webkit-calc(100% - 65px); } ul.timeline > li > .timeline-badge { left: 28px; margin-left: 0; top: 16px; } ul.timeline > li > .timeline-panel { float: right; } ul.timeline > li > .timeline-panel:before { border-left-width: 0; border-right-width: 15px; left: -15px; right: auto; } ul.timeline > li > .timeline-panel:after { border-left-width: 0; border-right-width: 14px; left: -14px; right: auto; } .timeline > li.timeline-inverted { float: left; clear: left; margin-top: 30px; margin-bottom: 30px; } .timeline > li.timeline-inverted > .timeline-badge { left: 28px; } .cd-timeline-img { position: absolute; top: 0; left: 0; width: 48px; height: 48px; -webkit-border-radius: 50%; border-radius: 50%; background-color: #f0f0f0; color: #9c9c9c; text-align: center; line-height: 1; font-size: 12px; padding-top: 6px; -webkit-transform: translateZ(0); -webkit-backface-visibility: hidden; }