<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/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" style=background-color:#eee;> <div class="row"> <div class=col-xs-7> <h2>Vertical Flow With Bullets</h2> <span><b>STATUS:</b> Waiting for Supervisor Confirmation</span> <div class="full-size"> <div class="bulet" style=""> <div class="roundChecked"></div> <div class="lineChecked"></div> <div class="roundChecked"></div> <div class="lineUnChecked"></div> <div class="roundUnChecked"></div> <div class="lineUnChecked"></div> <div class="roundUnChecked"></div> </div> <div class="inner-panel"> <div class="col-xs-1"> </div> <div class="col-xs-3 center"> <span class="desc-bold">STEP 1</span> <span class="desc-line">STEP 1</span> </div> <div class="col-xs-2 center"> <span class="desc-line">06.05.2018</span> <span class="desc-line">Employee</span> </div> <div class="col-xs-1 center"> <span class="glyphicon glyphicon-ok sign"></span> </div> <div class="col-xs-2 center"> </div> <div class="col-xs-3 center"> </div> </div> <br /> <div class="inner-panel"> <div class="col-xs-1"> </div> <div class="col-xs-3 center"> <span class="desc-bold">STEP 2</span> <span class="desc-line">STEP 2</span> </div> <div class="col-xs-2 center"> <span class="desc-line">07.05.2018</span> <span class="desc-line">Menager</span> </div> <div class="col-xs-1 center"> <span class="glyphicon glyphicon-ok sign"></span> </div> <div class="col-xs-2 center"> </div> <div class="col-xs-3 center"> </div> </div> <br /> <div class="inner-panel"> <div class="col-xs-1"> </div> <div class="col-xs-3 center"> <span class="desc-bold">STEP 3</span> <span class="desc-line">STEP 3</span> </div> <div class="col-xs-2 center"> </div> <div class="col-xs-1 center"> </div> <div class="col-xs-2 center"> <button class="btn action-btn"><span class="glyphicon glyphicon-ok"></span> CONFIRM</button> </div> <div class="col-xs-3 center"> <button class="btn mail-btn"><span class="glyphicon glyphicon-envelope"></span> SEND MAIL</button> </div> </div> <br /> <div class="inner-panel"> <div class="col-xs-1"> </div> <div class="col-xs-3 center"> <span class="desc-bold">STEP 4</span> <span class="desc-line">STEP 4</span> </div> <div class="col-xs-2 center"> </div> <div class="col-xs-1 center"> </div> <div class="col-xs-2 center"> </div> <div class="col-xs-3 center"> </div> </div> </div> </div> </div> </div>

.bulet { width:16px; position:absolute; top:120px; left:30px; } .roundChecked { width:16px; height:16px; border-radius:50px; border:4px #0f7c89 solid; border-width:4px; border-style:solid; } .lineChecked { width:3px; height:95px; background-color:#0f7c89; margin:auto 6px; } .roundUnChecked { width:16px; height:16px; border-radius:50px; border:4px #c2bfbf solid; border-width:4px; border-style:solid; } .lineUnChecked { width:3px; height:95px; background-color:#c2bfbf; margin:auto 6px; } .full-size { width:100%; border-top:3px solid #ccc; } .full-size .inner-panel { background-color:white; padding:20px 5px 20px 5px; border-bottom:1px solid #ccc; border-top:1px solid #ccc; display: flex; min-height:90px; }.full-size .inner-panel .action-btn { background-color:#415dab; font-size:14px !important; font-weight:600; width:89px; height:24px; padding: 3px 4px; color:white; } .full-size .inner-panel .mail-btn { background-color:white; font-size:14px !important; border:1px solid #415dab; font-weight:600; width:104px; height:24px; padding: 3px 4px; color:#415dab; }.desc-line{ color:#3b3f48; } .desc-bold{ color:#000; font-weight:bold; } .full-size .inner-panel .center { margin:auto; } .full-size .inner-panel .sign { color:#c2bfbf; font-size:22px; }