<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 ----------> <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.10.0/css/all.min.css" rel="stylesheet"> <div class="timeline"> <div class="container"> <div class="row"> <div class="col-lg-12"> <div class="timeline-container"> <div class="timeline-end"></div> <div class="timeline-continue"> <div class="row align-items-center timeline-list"> <div class="col-6"> <div class="timeline-date"> 01 Jun 2020 </div> </div> <div class="col-6"> <div class="timeline-text"> Lorem ipsum dolor sit amet elit ornare velit non </div> </div> </div> <div class="row align-items-center timeline-list"> <div class="col-6"> <div class="timeline-date"> 01 Jun 2020 </div> </div> <div class="col-6"> <div class="timeline-text"> Lorem ipsum dolor sit amet elit ornare velit non </div> </div> </div> <div class="row align-items-center timeline-list"> <div class="col-6"> <div class="timeline-date"> 01 Jun 2020 </div> </div> <div class="col-6"> <div class="timeline-text"> Lorem ipsum dolor sit amet elit ornare velit non </div> </div> </div> <div class="row align-items-center timeline-list"> <div class="col-6"> <div class="timeline-date"> 01 Jun 2020 </div> </div> <div class="col-6"> <div class="timeline-text"> Lorem ipsum dolor sit amet elit ornare velit non </div> </div> </div> </div> <div class="timeline-start"></div> </div> </div> </div> </div> </div>

:root { --primary: #000; --secondary: green; --text-muted: #ccc; --font-base: 13px; --strong: 600; } html,body {font-size: var(--font-base);} .timeline { position: relative; width: 100%; } .timeline .timeline-container { position: relative; width: 100%; } .timeline .timeline-text { line-height: normal; max-width: 300px; font-weight: var(--strong); } .timeline .timeline-end, .timeline .timeline-start, .timeline .timeline-year { position: relative; width: 100%; text-align: center; z-index: 1; } .timeline .timeline-end, .timeline .timeline-start, .timeline .timeline-year { display: flex; justify-content: center; width: 25px; height: 25px; margin: auto; text-align: center; background: var(--secondary); border-radius: 100px; } .timeline .timeline-continue { position: relative; width: 100%; padding: 1px 0; } .timeline .timeline-continue::after { position: absolute; content: ""; width: 1px; height: 100%; top: 0; left: 50%; margin-left: -1px; background: var(--secondary); } .timeline .timeline-list { margin: 50px 0; text-align: left; } .timeline .timeline-date { color: var(--text-muted); font-weight: var(--strong); text-align: right; } .timeline .timeline-date::before { content: '\f00c'; position: absolute; top: 3px; bottom: 0; margin: auto; right: -3px; color: #ffffff; font-family: "Font Awesome 5 Free"; font-size: 9px; z-index: 9; } .timeline .timeline-date::after { content: ''; display: block; position: absolute; width: 17px; height: 17px; top: 0; bottom: 0; margin: auto; background: var(--secondary); border-radius: 15px; z-index: 1; right: -7px; } .timeline .timeline-list::after, .timeline .timeline-list::before { right: 100%; }