"verticle form wiard"
Bootstrap 3.3.0 Snippet by admanekishor

<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="form_wizard wizard_verticle"> <div class="col-sm-12"> <ul class="list-unstyled wizard_steps anchor"> <li style="padding-top: 50px;"> <ul class="nav col-sm-5 col-xs-5 panel"> <li> <h5>Register and list your products Register your business and create a product catalogue</h5> </li></ul> <a href="#step-11" class="selected" isdone="1" rel="1"> <span class="step_no">1</span> </a> </li> <li style="padding-top: 50px;"> <ul class="nav col-sm-5 col-xs-5 panel pull-right"> <li> <h5>Register and list your products Register your business and create a product catalogue</h5> </li></ul> <a href="#step-22" class="selected" isdone="0" rel="2"> <span class="step_no">2</span> </a> </li> <li style="padding-top: 50px;"> <ul class="nav col-sm-5 col-xs-5 panel"> <li> <h5>Register and list your products Register your business and create a product catalogue</h5> </li></ul> <a href="#step-33" class="selected" isdone="0" rel="3"> <span class="step_no">3</span> </a> </li> <li style="padding-top: 50px;"> <ul class="nav col-sm-5 col-xs-5 panel pull-right"> <li> <h5>Register and list your products Register your business and create a product catalogue</h5> </li></ul> <a href="#step-44" class="selected" isdone="0" rel="4"> <span class="step_no">4</span> </a> </li> </ul> </div> <div class="col-sm-4"></div> </div> </div> </div>
.container{ background: #eee; } .wizard_verticle ul.wizard_steps { display: table; list-style: none; position: relative; width: 100%; float: left; margin: 0 0 20px; } .wizard_verticle ul.wizard_steps li { display: list-item; text-align: center; } .wizard_verticle ul.wizard_steps li a:first-child { margin-top: 40px; } .wizard_verticle ul.wizard_steps li a, .wizard_verticle ul.wizard_steps li:hover { display: block; position: relative; -moz-opacity: 1; filter: alpha(opacity= 100); opacity: 1; color: #666; } .wizard_verticle ul.wizard_steps li a::before { content: ""; position: absolute; height: 150px; background: #ccc; top: 20px; width: 4px; z-index: 4; left: 50%; } .wizard_verticle ul.wizard_steps li a .step_no { width: 60px; height: 60px; line-height: 60px; border-radius: 100px; display: block; margin: 0 auto 5px; font-size: 16px; text-align: center; position: relative; z-index: 5; } .wizard_verticle ul.wizard_steps li a.selected::before, .step_no { background: #34495E; color: #fff; } .wizard_verticle ul.wizard_steps li a.disabled .step_no { background: #ccc; } .wizard_verticle ul.wizard_steps li:last-child a::before { left: 49%; left: auto; width: 0; }

Related: See More


Questions / Comments: