<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"> <h2 class="mt-3 mb-5 text-center">Progress Status</h2> <div class="progressBar"> <div class="progressPoint current"> <span>1</span> </div> <div class="progressPoint current"> <span>2</span> </div> <div class="progressPoint current"> <span>3</span> </div> <div class="progressPoint current"> <span>4</span> </div> <div class="progressPoint "> <span>5</span> </div> <div class="progressPoint"> <span>6</span> </div> <div class="progressPoint"> <span>7</span> </div> <div class="progressPoint"> <span>8</span> </div> <div class="progressLine"></div> </div> </div>

.progressBar { position: relative; margin: 5rem 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -ms-flex-wrap: wrap; flex-wrap: wrap; } .progressBar .progressLine { height: 2px; border: 2px dashed #1a4d00; position: absolute; left: 0; width: 100%; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); } .progressBar .progressPoint { width: 25px; height: 25px; position: relative; z-index: 2; border-radius: 50%; background-color: #b4b4b4; display: inline-block; outline: 1px solid #b4b4b4; border: 5px solid #fff; } .progressBar .progressPoint span { position: absolute; top: -60px; left: -15px; background-color: #b4b4b4; padding: 7px 20px; color: #fff; -webkit-transition: 0.3s linear; transition: 0.3s linear; } .progressBar .progressPoint:nth-child(odd) span { border-radius: 5px 5px 0 0; } .progressBar .progressPoint:nth-child(odd) span::after { content: ""; position: absolute; bottom: -10px; left: 13px; border-left: 10px solid transparent; border-right: 10px solid transparent; border-top: 10px solid #b4b4b4; } .progressBar .progressPoint:nth-child(even) span { top: 40px; border-radius: 0 0 5px 5px; } .progressBar .progressPoint:nth-child(even) span::after { content: ""; position: absolute; top: -10px; left: 13px; border-left: 10px solid transparent; border-right: 10px solid transparent; border-bottom: 10px solid #b4b4b4; } .progressBar .progressPoint.current { background-color: #1a4d00; outline: 1px solid #1a4d00; } .progressBar .progressPoint.current span { background-color: #1a4d00; } .progressBar .progressPoint.current:nth-child(odd):hover { cursor: pointer; } .progressBar .progressPoint.current:nth-child(odd):hover span { -webkit-transform: translateY(5px); transform: translateY(5px); } .progressBar .progressPoint.current:nth-child(odd) span::after { border-top: 10px solid #1a4d00; } .progressBar .progressPoint.current:nth-child(even):hover { cursor: pointer; } .progressBar .progressPoint.current:nth-child(even):hover span { -webkit-transform: translateY(-5px); transform: translateY(-5px); } .progressBar .progressPoint.current:nth-child(even) span::after { border-bottom: 10px solid #1a4d00 !important; }