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