<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container-fluid"> <div class="row"> <div id="timeline"> <div class="row timeline-movement timeline-movement-top"> <div class="timeline-badge timeline-future-movement"> <p>2018</p> </div> </div> <div class="row timeline-movement"> <div class="timeline-badge center-left"> </div> <div class="col-sm-6 timeline-item"> <div class="row"> <div class="col-sm-11"> <div class="timeline-panel credits anim animate fadeInLeft"> <ul class="timeline-panel-ul"> <div class="lefting-wrap"> <li class="img-wraping"><a href="#"><img src="http://via.placeholder.com/250/000000" class="img-responsive" alt="user-image" /></a></li> </div> <div class="righting-wrap"> <li><a href="#" class="importo">Mussum ipsum cacilds</a></li> <li><span class="causale" style="color:#000; font-weight: 600;">Developer </span> </li> <li><span class="causale">Lorem ipsum dolor sit amet, consectetur adipiscing elit. </span> </li> <li><p><small class="text-muted"><i class="glyphicon glyphicon-time"></i> 13/01/2018, 13:05"</small></p> </li> </div> <div class="clear"></div> </ul> </div> </div> </div> </div> </div> <div class="row timeline-movement"> <div class="timeline-badge center-right"> </div> <div class="offset-sm-6 col-sm-6 timeline-item"> <div class="row"> <div class="offset-sm-1 col-sm-11"> <div class="timeline-panel debits anim animate fadeInRight"> <ul class="timeline-panel-ul"> <div class="lefting-wrap"> <li class="img-wraping"><a href="#"><img src="http://via.placeholder.com/250/000000" class="img-responsive" alt="user-image" /></a></li> </div> <div class="righting-wrap"> <li><a href="#" class="importo">Mussum ipsum cacilds</a></li> <li><span class="causale" style="color:#000; font-weight: 600;">Web Designer </span> </li> <li><span class="causale">Lorem ipsum dolor sit amet, consectetur adipiscing elit. </span> </li> <li><p><small class="text-muted"><i class="glyphicon glyphicon-time"></i> 12/01/2018, 13:05"</small></p> </li> </div> <div class="clear"></div> </ul> </div> </div> </div> </div> </div> <div class="row timeline-movement"> <div class="timeline-badge center-left"> </div> <div class="col-sm-6 timeline-item"> <div class="row"> <div class="col-sm-11"> <div class="timeline-panel credits anim animate fadeInLeft"> <ul class="timeline-panel-ul"> <div class="lefting-wrap"> <li class="img-wraping"><a href="#"><img src="http://via.placeholder.com/250/000000" class="img-responsive" alt="user-image" /></a></li> </div> <div class="righting-wrap"> <li><a href="#" class="importo">Mussum ipsum cacilds</a></li> <li><span class="causale" style="color:#000; font-weight: 600;">Engineer </span> </li> <li><span class="causale">Lorem ipsum dolor sit amet, consectetur adipiscing elit. </span> </li> <li><p><small class="text-muted"><i class="glyphicon glyphicon-time"></i> 11/01/2018, 13:05"</small></p> </li> </div> <div class="clear"></div> </ul> </div> </div> </div> </div> </div> <div class="row timeline-movement timeline-movement-top"> <div class="timeline-badge timeline-future-movement"> <p>2017</p> </div> </div> <div class="row timeline-movement"> <div class="timeline-badge center-right"> </div> <div class="offset-sm-6 col-sm-6 timeline-item"> <div class="row"> <div class="offset-sm-1 col-sm-11"> <div class="timeline-panel debits anim animate fadeInRight"> <ul class="timeline-panel-ul"> <div class="lefting-wrap"> <li class="img-wraping"><a href="#"><img src="http://via.placeholder.com/250/000000" class="img-responsive" alt="user-image" /></a></li> </div> <div class="righting-wrap"> <li><a href="#" class="importo">Mussum ipsum cacilds</a></li> <li><span class="causale" style="color:#000; font-weight: 600;">Web Designer </span> </li> <li><span class="causale">Lorem ipsum dolor sit amet, consectetur adipiscing elit. </span> </li> <li><p><small class="text-muted"><i class="glyphicon glyphicon-time"></i> 12/01/2018, 13:05"</small></p> </li> </div> <div class="clear"></div> </ul> </div> </div> </div> </div> </div> <div class="row timeline-movement"> <div class="timeline-badge center-left"> </div> <div class="col-sm-6 timeline-item"> <div class="row"> <div class="col-sm-11"> <div class="timeline-panel credits anim animate fadeInLeft"> <ul class="timeline-panel-ul"> <div class="lefting-wrap"> <li class="img-wraping"><a href="#"><img src="http://via.placeholder.com/250/000000" class="img-responsive" alt="user-image" /></a></li> </div> <div class="righting-wrap"> <li><a href="#" class="importo">Mussum ipsum cacilds</a></li> <li><span class="causale" style="color:#000; font-weight: 600;">Engineer </span> </li> <li><span class="causale">Lorem ipsum dolor sit amet, consectetur adipiscing elit. </span> </li> <li><p><small class="text-muted"><i class="glyphicon glyphicon-time"></i> 11/01/2018, 13:05"</small></p> </li> </div> <div class="clear"></div> </ul> </div> </div> </div> </div> </div> </div> </div> </div>