"Simple Vertical timeline 2"
Bootstrap 4.1.1 Snippet by mylastof

<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>What's New</h4> <ul class="timeline"> <li><a href="#!">What’s new on desktop experience</a></li> <li><a href="#!">What’s new on Settings experience</a></li> <li><a href="#!">What’s new on input experience</a></li> <li><a href="#!">What’s new on system experience</a></li> <li><a href="#!">What’s new on Microsoft Edge</a></li> <li><a href="#!">What’s new on Windows Security</a></li> <li><a href="#!">What’s new on built-in apps</a></li> </ul> </div> </div> </div> <div class="text-muted mt-5 mb-5 text-center small">by : <a class="text-muted" target="_blank" href="http://totoprayogo.com">totoprayogo.com</a></div>
.timeline li { position: relative; margin-bottom: 0; line-height: 1.8; } .timeline li:before { content: ""; top: 21px; bottom: 0; position: absolute; width: 1px; height: 20px; background: rgba(145,145,145,.49); left: -15px; } .timeline li:after { content: "\f111"; position: absolute; display: block; left: -17px; top: 0; font-size: .35rem; line-height: 2.2rem; color: #919191; }

Related: See More


Questions / Comments: