<link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="stepwizard"> <div class="stepwizard-row"> <div class="liner"></div> <div class="stepwizard-step"> <button type="button" class="btn btn-default btn-circle btn-lg"><i class="glyphicon glyphicon-transfer"></i></button> <p> <small class="text-muted"><i class="glyphicon glyphicon-time"></i> Initiated via <strong>system goes here</strong></small> </p> </div> <div class="stepwizard-step"> <a class="btn icon-btn btn-danger" href="#"><span class="glyphicon btn-glyphicon glyphicon-remove img-circle text-danger"></span>Routing</a> <p> <small class="text-muted"><i class="glyphicon glyphicon-time"></i> Initiated via <strong>system goes here</strong></small> </p> </div> <div class="stepwizard-step"> <a class="btn icon-btn btn-info" href="#"><span class="glyphicon btn-glyphicon glyphicon-refresh img-circle text-info"></span>Data Gathering</a> <p> <small class="text-muted"><i class="glyphicon glyphicon-time"></i> Initiated via <strong>system goes here</strong></small> </p> </div> <div class="stepwizard-step"> <a class="btn icon-btn btn-success" href="#"><span class="glyphicon btn-glyphicon glyphicon-ok img-circle text-success"></span>Network Activation</a> <p> <small class="text-muted"><i class="glyphicon glyphicon-time"></i> Initiated via <strong>system goes here</strong></small> </p> </div> <div class="stepwizard-step"> <button type="button" class="btn btn-default btn-circle btn-lg"><i class="glyphicon glyphicon-saved"></i></button> <p><small class="text-muted">The result status and message</small></p> </div> </div> </div>

body{margin:40px;} .btn-glyphicon { padding:8px; background:#ffffff; margin-right:4px; } .icon-btn { padding: 1px 15px 3px 2px; border-radius:50px;} .stepwizard-step p { margin-top: 10px; } .stepwizard-row { display: table-row; } .stepwizard { display: table; width: 100%; position: relative; } /* .stepwizard-row:before { top: 14px; bottom: 0; position: absolute; content: " "; width: 100%; height: 3px; background-color: #ccc; z-order: 0; }*/ .stepwizard-step { display: table-cell; text-align: center; position: relative; } .liner { height: 2px; background: #ddd; position: absolute; width: 80%; margin: 0 auto; left: 0; right: 0; top: 15px; z-index: -1; } .btn-circle { width: 30px; height: 30px; text-align: center; padding: 6px 0; font-size: 12px; line-height: 1.428571429; border-radius: 15px; }