Bootstrap Snippet Form Wizard 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">
    <article class="col-sm-12 col-md-12 col-lg-12 sortable-grid ui-sortable">
        <div id="wid-id-0">
            <header role="heading">
                <h2>Very Basic Wizard Example </h2>
            </header>
            <!-- widget div-->
            <div role="content">
                <!-- widget content -->
                <div class="widget-body">
                    <div class="row">
                        <form id="wizard-1" novalidate="novalidate">
                            <div id="bootstrap-wizard-1" class="col-sm-12">
                                <div class="form-bootstrapWizard">
                                    <ul class="bootstrapWizard form-wizard">
                                        <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>
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 Wizard*/
.bootstrapWizard {
    display: block;
    list-style: none;
    padding: 0;
    position: relative;
    width: 100%
}
.bootstrapWizard a:hover,.bootstrapWizard a:active,.bootstrapWizard a:focus {
    text-decoration: none
}
.bootstrapWizard li {
    display: block;
    float: left;
    width: 25%;
    text-align: center;
    padding-left: 0
}
.bootstrapWizard li:before {
    border-top: 3px solid #55606E;
    content: "";
    display: block;
    font-size: 0;
    overflow: hidden;
    position: relative;
    top: 11px;
    right: 1px;
    width: 100%;
    z-index: 1
}
.bootstrapWizard li:first-child:before {
    left: 50%;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Form Wizard"
Bootstrap 3.3.0 Snippet by Nasir

Related: See More

Questions / Comments:

"Form Wizard" Bootstrap 3.3.0 Snippet by Nasir

Related: See More

Questions / Comments:

"Form Wizard"
Bootstrap 3.3.0 Snippet by Nasir