"Bootstrap vertical wizard"
Bootstrap 3.3.0 Snippet by ravindra93

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="//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>
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
/*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;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More


Questions / Comments: