<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="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="row"> <div class="stepwizard"> <div class="stepwizard-row"> <div class="stepwizard-step"> <a class="btn btn-default btn-circle active-step" href="#step-1" data-toggle="tab" onclick="stepnext(1)" >1</a> <p>Seller Details</p> </div> <div class="stepwizard-step"> <a class="btn btn-default btn-circle" disabled="disabled" href="#step-2" data-toggle="tab">2</a> <p>Company Document</p> </div> <div class="stepwizard-step"> <a class="btn btn-default btn-circle" disabled="disabled" href="#step-3" data-toggle="tab">3</a> <p>Bank Details</p> </div> </div> <div class="rate-updates"> <div class="tab-content" style="border:none !important;"> <div class="tab-pane fade active in" id="step-1"> <div class="row"> <div class="form-group"> <table class="table table-striped"> <tr> <th style="float: right;">Contact Person</th> <td><input type="text" maxlength="10" required="required" class="form-control"></td> <th style="float: right;">Mobile No. </th> <td><input type="text" maxlength="10" required="required" class="form-control"></td> </tr> <tr> <th style="float: right;">Landline No.</th> <td><input type="text" maxlength="10" required="required" class="form-control"></td> <th style="float: right;">Email ID</th> <td><input type="text" maxlength="10" required="required" class="form-control"></td> </tr> <tr> <th style="float: right;">Company Type</th> <td><input type="text" maxlength="10" required="required" class="form-control"></td> <th style="float: right;">Live Market A/C</th> <td><input type="number" maxlength="10" required="required" class="form-control"></td> </tr> <tr> <th style="float: right;">Product Category</th> <td><input type="text" maxlength="10" required="required" class="form-control"></td> <th style="float: right;">Product Sub Category</th> <td><input type="text" maxlength="100" required="required" class="form-control"></td> </tr> <tr> <th style="float: right;">Package Selected</th> <td><input type="text" class="form-control"></td> <th style="float: right;">Address </th> <td><textarea required="required" class="form-control" placeholder="Enter your address"></textarea></td> </tr> <tr> <th style="float: right;">Warehouse Address</th> <td><textarea required="required" class="form-control" placeholder="Enter your warehouse address"></textarea></td> <th></th> <td><button class="btn btn-xs btn-success" onclick="stepnext(2);" type="button">Next <span class="fa fa-long-arrow-right" ></span></button></td> </tr> </table> </div> </div> </div> <div class="tab-pane fade " id="step-2"> <div class="row"> <div class="form-group"> <table class="table"> <tr> <th>PAN Card</th> <td> <input type="text" class="form-control"> <input type="button" class="form-control" id="loadFileXml" value="Browse" onclick="document.getElementById('file').click();" /> <input type="file" class="form-control" style="display:none;" id="file" name="file"/>^* </td> <th>VAT/TIN No.</th> <td> <input type="text" class="form-control"> <input type="button" class="form-control" id="loadFileXml" value="Browse" onclick="document.getElementById('file').click();" /> <input type="file" class="form-control" style="display:none;" id="file" name="file"/>^* </td> </tr> <tr> <th>CST No.</th> <td> <input type="text" class="form-control"> <input type="button" class="form-control" id="loadFileXml" value="Browse" onclick="document.getElementById('file').click();" /> <input type="file" class="form-control" style="display:none;" id="file" name="file"/>^* </td> <th>Service Tax No.</th> <td> <input type="text" class="form-control"> <input type="button" class="form-control" id="loadFileXml" value="Browse" onclick="document.getElementById('file').click();" /> <input type="file" class="form-control" style="display:none;" id="file" name="file"/>^* </td> </tr> <tr> <th>Service Tax No.</th> <td> <input type="text" class="form-control"> <input type="button" class="form-control" id="loadFileXml" value="Browse" onclick="document.getElementById('file').click();" /> <input type="file" class="form-control" style="display:none;" id="file" name="file"/>^* </td> <th>Company UIN</th> <td> <input type="text" class="form-control"> <input type="button" class="form-control" id="loadFileXml" value="Browse" onclick="document.getElementById('file').click();" /> <input type="file" class="form-control" style="display:none;" id="file" name="file"/>^* </td> </tr> <tr> <th>Declaration</th> <td> <input type="text" class="form-control"> <input type="button" class="form-control" id="loadFileXml" value="Browse" onclick="document.getElementById('file').click();" /> <input type="file" class="form-control" style="display:none;" id="file" name="file"/>^* </td> <th></th> <td></td> </tr> <tr> <th></th> <td></td> <th></th> <td><button class="btn btn-xs btn-success" onclick="stepnext(1);" type="button">Previous  <span class="fa fa-long-arrow-right"></span></button>   <button class="btn btn-xs btn-success" onclick="stepnext(3);" type="button">Next  <span class="fa fa-long-arrow-right"></span></button></td> </tr> </table> </div> </div> </div> <div class="tab-pane fade " id="step-3" > <div class="row"> <div class="form-group"> <table class="table"> <tr> <th>PAN Card</th> <td> <input type="text" class="form-control"> <input type="button" class="form-control" id="loadFileXml" value="Browse" onclick="document.getElementById('file').click();" /> <input type="file" class="form-control" style="display:none;" id="file" name="file"/>^* </td> <th>VAT/TIN No.</th> <td> <input type="text" class="form-control"> <input type="button" class="form-control" id="loadFileXml" value="Browse" onclick="document.getElementById('file').click();" /> <input type="file" class="form-control" style="display:none;" id="file" name="file"/>^* </td> </tr> <tr> <th>CST No.</th> <td> <input type="text" class="form-control"> <input type="button" class="form-control" id="loadFileXml" value="Browse" onclick="document.getElementById('file').click();" /> <input type="file" class="form-control" style="display:none;" id="file" name="file"/>^* </td> <th>Service Tax No.</th> <td> <input type="text" class="form-control"> <input type="button" class="form-control" id="loadFileXml" value="Browse" onclick="document.getElementById('file').click();" /> <input type="file" class="form-control" style="display:none;" id="file" name="file"/>^* </td> </tr> <tr> <th>Service Tax No.</th> <td> <input type="text" class="form-control"> <input type="button" class="form-control" id="loadFileXml" value="Browse" onclick="document.getElementById('file').click();" /> <input type="file" class="form-control" style="display:none;" id="file" name="file"/>^* </td> <th>Company UIN</th> <td> <input type="text" class="form-control"> <input type="button" class="form-control" id="loadFileXml" value="Browse" onclick="document.getElementById('file').click();" /> <input type="file" class="form-control" style="display:none;" id="file" name="file"/>^* </td> </tr> <tr> <th>Declaration</th> <td> <input type="text" class="form-control"> <input type="button" class="form-control" id="loadFileXml" value="Browse" onclick="document.getElementById('file').click();" /> <input type="file" class="form-control" style="display:none;" id="file" name="file"/>^* </td> <th></th> <td></td> </tr> <tr> <th></th> <td></td> <th></th> <td><button class="btn btn-xs btn-success" onclick="stepnext(2);" type="button">Previous  <span class="fa fa-long-arrow-right"></span></button>   <button class="btn btn-xs btn-success" onclick="stepnext(0);" type="button">Finish  <span class="fa fa-long-arrow-right"></span></button></td> </tr> </table> </div> </div> </div> </div> </div> </div> </div> </div>

.stepwizard-step p { margin-top: 10px; } .stepwizard-row { display: table-row; } .stepwizard { display: table; width: 100%; position: relative; } .stepwizard-step button[disabled] { opacity: 1 !important; filter: alpha(opacity=100) !important; } .stepwizard-row:before { top: 14px; bottom: 0; position: absolute; content: " "; width: 100%; height: 1px; background-color: #ccc; z-order: 0; } .stepwizard-step { display: table-cell; text-align: center; position: relative; } .btn-circle { width: 30px; height: 30px; text-align: center; padding: 6px 0; font-size: 12px; line-height: 1.428571429; border-radius: 15px; } .stepwizard-content{ border:none !important; float: left !important; margin-top: 0 !important; padding: 15px !important; width: 100% !important; }

function stepnext(n){ if(n != 0){ //$(".stepwizard-row a").switchClass('btn-primary','btn-default'); $(".stepwizard-row a").removeClass('btn-primary'); $(".stepwizard-row a").addClass('btn-default'); $('.stepwizard a[href="#step-'+n+'"]').tab('show'); //$('.stepwizard-row a[href="#step-'+n+'"]').switchClass('btn-default','btn-primary'); $('.stepwizard-row a[href="#step-'+n+'"]').removeClass('btn-default'); $('.stepwizard-row a[href="#step-'+n+'"]').addClass('btn-primary'); } } stepnext(1);