<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 ----------> <meta name="viewport" content="width=device-width, initial-scale=1"> <div class="container"> <div class="row"> <article style="margin-top: 10em;"> <div class="widget-body"> <div class="row"> <div class="col-sm-12"> <div class="col-sm-12 col-md-3"> <div class="vrtwiz"> <ul class="verticalwiz"> <li class="active" data-target="#step1"> <a href="#tab1" data-toggle="tab" class="active"> <span class="step">1</span> <span class="title">Basic information</span> </a> </li> <li data-target="#step2" class=""> <a href="#tab2" data-toggle="tab"> <span class="step">2</span> <span class="title">Billing information</span> </a> </li> <li data-target="#step3" class=""> <a href="#tab3" data-toggle="tab"> <span class="step">3</span> <span class="title">Domain Setup</span> </a> </li> <li data-target="#step4"> <a href="#tab4" data-toggle="tab"> <span class="step">4</span> <span class="title">Save Form</span> </a> </li> </ul> <div class="clearfix"></div> </div> </div> <div class="col-sm-12 col-md-9"> <div class="rightab"> <div class="tab-content"> <div class="tab-pane active" id="tab1"> <br> <h3><strong>Step 1 </strong> - Basic Information</h3> <div class="form-actions"> <div class="row"> <div class="col-sm-12"> <ul class="pager wizard no-margin"> <li class="previous disabled"> <a href="#" class="btn btn-lg btn-default"> Previous </a> </li> <li class="next"> <a href="#" class="btn btn-lg txt-color-darken"> Next </a> </li> </ul> </div> </div> </div> </div> <div class="tab-pane" id="tab2"> <br> <h3><strong>Step 2</strong> - Billing Information</h3> <div class="form-actions"> <div class="row"> <div class="col-sm-12"> <ul class="pager wizard no-margin"> <li class="previous"> <a href="#" class="btn btn-lg btn-default"> Previous </a> </li> <li class="next disabled"> <a href="#" class="btn btn-lg txt-color-darken"> Next </a> </li> </ul> </div> </div> </div> </div> <div class="tab-pane" id="tab3"> <br> <h3><strong>Step 3</strong> - Domain Setup</h3> <div class="form-actions"> <div class="row"> <div class="col-sm-12"> <ul class="pager wizard no-margin"> <li class="previous"> <a href="#" class="btn btn-lg btn-default"> Previous </a> </li> <li class="next disabled"> <a href="#" class="btn btn-lg txt-color-darken"> Next </a> </li> </ul> </div> </div> </div> </div> <div class="tab-pane" id="tab4"> <br> <h3><strong>Step 4</strong> - Save Form</h3> <br> <h1 class="text-center text-success"><strong><i class="fa fa-check fa-lg"></i> Complete</strong></h1> <h4 class="text-center">Click next to finish</h4> <br> <br> <div class="form-actions"> <div class="row"> <div class="col-sm-12"> <ul class="pager wizard no-margin"> <li class="previous"> <a href="#" class="btn btn-lg btn-default"> Previous </a> </li> <li class="next disabled"> <a href="#" class="btn btn-lg txt-color-darken"> Next </a> </li> </ul> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </article> </div> </div>

/*Start vertical Wizard*/ .verticalwiz { display: block; list-style: none; position: relative; width: 100% } .verticalwiz a:hover,.verticalwiz a:active,.verticalwiz a:focus { text-decoration: none } .verticalwiz li { display: block; height: 100%; min-height: 90px; max-width: 215px; width: 100%; } .verticalwiz li:before { border-top: 3px solid #55606E; content: ""; display: block; font-size: 0; overflow: auto; position: relative; top: 10px; right: 0; width: 100%; z-index: 1; transform: rotate(90deg) translateY(87px); left: 0; max-width: 50%; margin: 0 auto; text-align: center; } .verticalwiz li.complete .step { background: #0aa66e; padding: 1px 6px; border: 3px solid #55606E } .verticalwiz li .step i { font-size: 10px; font-weight: 400; position: relative; top: -1.5px } .verticalwiz li .step { background: #B2B5B9; color: #fff; display: inline; font-size: 15px; font-weight: 700; line-height: 12px; padding: 7px 13px; border: 3px solid transparent; border-radius: 50%; line-height: normal; position: relative; text-align: center; z-index: 2; transition: all .1s linear 0s } .verticalwiz li.active .step,.verticalwiz li.active.complete .step { background: #4CAF50; color: #fff; font-weight: 700; padding: 7px 13px; font-size: 15px; border-radius: 50%; border: 3px solid #7fe583 } .verticalwiz li.complete .title,.verticalwiz li.active .title { color: #2B3D53 } .verticalwiz li .title { display: inline; font-size: 13px; position: relative; top: 0; } .rightab { border: 1px solid #dedede; border-radius: 3px; padding: 30px; box-shadow: 1px 1px 11px #ccc; min-height: 320px; } @media (min-width: 992px) and (max-width: 1199px){ .verticalwiz li:before{ transform: rotate(90deg) translateY(65px); max-width: 60%; } } @media (max-width: 991px){ .verticalwiz li{ float: left; width: 25%; height: auto; min-height: inherit; margin-bottom: 20px; max-width: inherit; text-align: center; } .verticalwiz li:before{ transform: none; max-width: inherit; position: absolute; } .verticalwiz li .title{ margin-top: 10px; text-align: center; display: block; } } /*End vertical Wizard*/