"Simple Responsive timeline (Vertical / Horizontal)"
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="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container mt-5 mb-5"> <ul class="roadmap mt-5"> <li class="d-block position-relative mb-2"> <span class="text-dark d-block font-weight-bold">Q3 2016</span> <p class="mb-0">Project start-up. Product conception. System architecture development.</p> </li> <li class="d-block position-relative mb-2"> <span class="d-block font-weight-bold">Q4 2016</span> <p class="mb-0">Connection to stock exchanges. Development of trading platform and the system’s core elements.</p> </li> <li class="d-block position-relative mb-2"> <span class="d-block font-weight-bold">Q1 2017</span> <p class="mb-0">Test environment launch for algorithm creators. Development of the first algorithms.</p> </li> <li class="d-block position-relative mb-2"> <span class="d-block font-weight-bold">Q2 2017</span> <p class="mb-0">Tradingene public product launch for algorithm creators. Broadening of financial instruments for algorithm creation.</p> </li> <li class="d-block position-relative mb-2"> <span class="d-block font-weight-bold">Q3 2018</span> <p class="mb-0">Development of user interface prototype for investors.</p> </li> </ul> </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>
.roadmap { display: block; position: relative; } .roadmap:before { content: ''; position: absolute; display: block; width: 4px; height: 100%; top: 0; bottom: 0; left: 10px; -webkit-border-radius: 4px; border-radius: 4px; background-image: -moz-linear-gradient(0deg, #2c90e4 0%, #a754e2 100%); background-image: -webkit-linear-gradient(0deg, #2c90e4 0%, #a754e2 100%); background-image: -ms-linear-gradient(0deg, #2c90e4 0%, #a754e2 100%); background-image: linear-gradient(0deg, #2c90e4 0%, #a754e2 100%); } .roadmap li:before, .roadmap li:after { content: ''; position: absolute; display: block; -webkit-border-radius: 50%; border-radius: 50%; } .roadmap li:before { width: 24px; height: 24px; top: 1px; left: -40px; background-image: -moz-linear-gradient(90deg, #2c90e4 0%, #a754e2 100%); background-image: -webkit-linear-gradient(90deg, #2c90e4 0%, #a754e2 100%); background-image: -ms-linear-gradient(90deg, #2c90e4 0%, #a754e2 100%); background-image: linear-gradient(90deg, #2c90e4 0%, #a754e2 100%); opacity: 0.37; z-index: 1; } .roadmap li:after { width: 16px; height: 16px; top: 5px; left: -36px; background-color: #fff; z-index: 2; } .roadmap li:last-child { margin-bottom: 0; } @media (min-width: 300px) { .roadmap li { margin-bottom: 35px; } .roadmap li span { font-size: 17px; margin-bottom: 10px; } } @media (min-width: 1200px) { .roadmap { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; padding: 0; margin-top: 75px; left: 50%; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); transform: translateX(-50%); } .roadmap:before { width: auto; height: 4px; top: 52px; left: 0; right: 0; background-image: -moz-linear-gradient(90deg, #2c90e4 0%, #a754e2 100%); background-image: -webkit-linear-gradient(90deg, #2c90e4 0%, #a754e2 100%); background-image: -ms-linear-gradient(90deg, #2c90e4 0%, #a754e2 100%); background-image: linear-gradient(90deg, #2c90e4 0%, #a754e2 100%); } .roadmap li { display: block; max-width: 210px; padding-left: 0; margin: 0 15px; } .roadmap li span { margin-bottom: 60px; } .roadmap li:before { top: 42px; left: 0; } .roadmap li:after { top: 46px; left: 4px; } }

Related: See More


Questions / Comments: