<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="//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="col-md-12"> <div class="gifTimelineDiv" > <ul class="gifTimeline timeline timeline-horizontal"> </ul> <ul class="gifTimelineSelection" style="height:70px;"> </ul> </div> </div> </div> </div>

.timeline, .timeline-horizontal { list-style: none; padding: 20px; position: relative; } .timeline:before { top: 2px; bottom: 0; position: absolute; content: " "; width: 3px; background-color: #eeeeee; left: 50%; margin-left: -1.5px; } .timeline .timeline-item { margin-bottom: 20px; position: relative; } .timeline .timeline-item:before, .timeline .timeline-item:after { content: ""; display: table; } .timeline .timeline-item:after { clear: both; } .timeline .timeline-item .timeline-badge { color: #fff; width: 14px; height: 14px; line-height: 52px; font-size: 22px; text-align: center; position: absolute; top: 18px; left: 50%; margin-left: -25px; background-color: silver; border: 3px solid #FAFAFA; z-index: 100; border-top-right-radius: 50%; border-top-left-radius: 50%; border-bottom-right-radius: 50%; border-bottom-left-radius: 50%; } .timeline .timeline-item .timeline-badge.success { background-color: #D62027; border: 3px solid silver; } .timeline .timeline-item:last-child:nth-child(even) { float: right; } .timeline-horizontal { list-style: none; position: relative; padding: 20px 0px 20px 0px; display: inline-block; } .timeline-horizontal:before { height: 7px; top: auto; /* bottom: 26px; */ left: 56px; right: 0; width: 100%; background-color: silver; } .timeline-horizontal .timeline-item { display: table-cell; height: 60px; min-width:30px; float: none !important; padding-left: 0px; padding-right: 20px; margin: 0 auto; vertical-align: bottom; } /* .timeline-horizontal .timeline-item:before, .timeline-horizontal .timeline-item:after { display: none; } */ .timeline-horizontal .timeline-item .timeline-badge { top: auto; left: 90px; bottom: -23px; }

$(window).load(function() { var imageLocations = [] for(i = 1;i<80;i=i+3) { loc = "http://tl.ihola.in/creations/LvSMmZbuS/images/image"+i+".png" $(".gifTimeline ").append('<li class="timeline-item"><div data-img-url="'+loc+'" data-content="<div><a href="#"><img src="'+loc+'" height="70" width="50"></a></div>" class="timeline-pointer timeline-badge"></div></li>'); } });