<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="//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="h-timeline"> <ul> <li class="active"> <div class="icon"> <i class="fas fa-check"></i> </div> <div class="heading">Heading Here</div> </li> <li class="active"> <div class="icon"> <i class="fas fa-check"></i> </div> <div class="heading">Heading Here</div> </li> <li> <div class="icon"> <i class="fas fa-check"></i> </div> <div class="heading">Heading Here</div> </li> <li> <div class="icon"> <i class="fas fa-check"></i> </div> <div class="heading">Heading Here</div> </li> </ul> </div>

:root { --primary: green; --secondary: #000; --light: #f2f2f2; --border-color: #f2f2f2; --text-muted: #ccc; --font-base: 13px; --strong: 600; } ul,ol { padding: 0; margin: 0; } html,body { padding: 50px; font-size: var(--font-base); } .h-timeline ul { text-align: center; display: flex; align-items: center; } .h-timeline ul li::before { content: ''; width: 100%; height: 2px; top: 20px; left: 50%; right: 0; background: var(--border-color); display: block; position: absolute; } .h-timeline ul li:last-child::before { content: ''; width: 100%; height: 2px; top: 20px; left: auto; right: 100%; background: var(--border-color); display: block; position: absolute; } .h-timeline li { position: relative; list-style: none; padding: 0 5%; } .h-timeline li .icon { width: 40px; height: 40px; z-index: 9; font-size: 18px; color: white; margin: auto; border-radius: 50%; display: flex; align-items: center; position: relative; justify-content: center; background: var(--light); } .h-timeline li.active .icon { background: var(--primary); } .h-timeline li .heading { margin-top: 5px; font-weight: var(--strong); }