<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="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container mt-5 mb-5"> <div class="row"> <div class="col-md-6 offset-md-3"> <h4>Customer timeline</h4> <ul class="timeline"> <li> <span class="ezy-communication-id">#14</span> <a target="_blank" href="https://www.ezypay.com/#">Failed payment</a> <a href="#" class="float-right">21 March, 2018</a> <p>{Failed payment details here}</p> <p>Communication id: {0123456789}</p> <p>Email sent to {customer email address} on {date}</p> <button>Show details</button> </p> </li> <li> <span class="ezy-communication-id">#13</span> <a href="#">Successful Payment</a> <a href="#" class="float-right">12 April, 2018</a> <p> Payment details here </p> </li> <li> <span class="ezy-communication-id">#12</span> <a href="#">Successful subscirption</a> <a href="#" class="float-right">4 March, 2018</a> <p> Subscription details here </p> </li> </ul> </div> </div> </div>

ul.timeline { list-style-type: none; } ul.timeline:before { content: ' '; background: #d4d9df; display: inline-block; position: absolute; left: 29px; width: 2px; height: 100%; z-index: 400; } ul.timeline > li { margin: 36px 0 0 0; padding: 20px; border: 1px solid #d4d9df; position: relative; } ul.timeline > li:before { content: ' '; background: white; display: inline-block; position: absolute; border-radius: 50%; border: 3px solid #22c0e8; left: -36px; top: 0; width: 20px; height: 20px; z-index: 400; } .ezy-communication-id { color: #b6bec9; }