Bootstrap Snippet verticle form wiard using HTML CSS Bootstrap

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<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>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
.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 {
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"verticle form wiard"
Bootstrap 3.3.0 Snippet by admanekishor

Related: See More

Questions / Comments:

"verticle form wiard" Bootstrap 3.3.0 Snippet by admanekishor

Related: See More

Questions / Comments:

"verticle form wiard"
Bootstrap 3.3.0 Snippet by admanekishor