<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="timeline-v"> <div class="timelinecontainer approved timeline-left"> <div class="timelinecontent"> <h3>Thomas</h3> <p class="date">20/05/2019</p> <p class="status">Approved</p> </div> </div> <div class="timelinecontainer approved timeline-right"> <div class="timelinecontent"> <h3>Adom</h3> <p>20/05/2019</p> <p>Approved</p> </div> </div> <div class="timelinecontainer pending timeline-left"> <div class="timelinecontent"> <h2>Alvin</h2> <p>20/05/2019</p> <p>Pending</p> </div> </div> <div class="timelinecontainer timeline-right"> <div class="timelinecontent"> <h2>Robert</h2> <p>20/05/2019</p> <p>TBD</p> </div> </div> </div>

* { box-sizing: border-box; } body { background-color: #1885d0; font-family: Arial; } /* The actual timeline (the vertical ruler) */ .timeline-v { position: relative; max-width: 1200px; margin: 0 auto; } /* The actual timeline (the vertical ruler) */ .timeline-v::after { content: ''; position: absolute; width: 6px; background-color: white; top: 0; bottom: 0; left: 50%; margin-left: -3px; } /* Container around content */ .timeline-v .timelinecontainer { padding: 10px 40px; position: relative; background-color: inherit; width: 50%; } /* The circles on the timeline */ .timeline-v .timelinecontainer::after { content: ''; position: absolute; width: 25px; height: 25px; right: -13px; background-color: white; border: 4px solid #dddddd; top: 15px; border-radius: 50%; z-index: 1; box-shadow:0px 2px 0px #054875; } /* The circles on the timeline approved */ .timeline-v .approved::after { background-color: white; border: 4px solid #5cb85c !important; } /* The circles on the timeline approved */ .timeline-v .pending::after { background-color: white; border: 4px solid #FF9F55; } /* Place the container to the left */ .timeline-v .timeline-left { left: 0; } /* Place the container to the right */ .timeline-v .timeline-right { left: 50%; } /* Add arrows to the left container (pointing right) */ .timeline-v .timeline-left::before { content: " "; height: 0; position: absolute; top: 22px; width: 0; z-index: 1; right: 30px; border: medium solid white; border-width: 10px 0 10px 10px; border-color: transparent transparent transparent white; } /* Add arrows to the right container (pointing left) */ .timeline-v .timeline-right::before { content: " "; height: 0; position: absolute; top: 22px; width: 0; z-index: 1; left: 30px; border: medium solid white; border-width: 10px 10px 10px 0; border-color: transparent white transparent transparent; } /* Fix the circle for containers on the right side */ .timeline-v .timeline-right::after { left: -12px; } /* The actual content */ .timeline-v .timelinecontent { padding:10px 20px; background-color: white; position: relative; border-radius: 6px; box-shadow:0px 5px 0px #054875; } /* Media queries - Responsive timeline on screens less than 600px wide */ @media screen and (max-width: 600px) { /* Place the timelime to the left */ .timeline-v::after { left: 31px; } /* Full-width containers */ .timeline-v .timelinecontainer { width: 100%; padding-left: 70px; padding-right: 25px; } /* Make sure that all arrows are pointing leftwards */ .timeline-v .timelinecontainer::before { left: 60px; border: medium solid white; border-width: 10px 10px 10px 0; border-color: transparent white transparent transparent; } /* Make sure all circles are at the same spot */ .timeline-v .timeline-left::after, .timeline-v .timeline-right::after { left: 15px; } /* Make all right containers behave like the left ones */ .timeline-v .timeline-right { left: 0%; } }