"Form wizard with circular tabs "
Bootstrap 3.3.0 Snippet by BpDemo

Post to Facebook Tweet this

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">
<section>
<div class="wizard">
<div class="wizard-inner">
<div class="connecting-line"></div>
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active">
<a href="#step1" data-toggle="tab" aria-controls="step1" role="tab" title="Step 1">
<span class="round-tab">
<i class="glyphicon glyphicon-folder-open"></i>
</span>
</a>
</li>
<li role="presentation" class="disabled">
<a href="#step2" data-toggle="tab" aria-controls="step2" role="tab" title="Step 2">
<span class="round-tab">
<i class="glyphicon glyphicon-pencil"></i>
</span>
</a>
</li>
<li role="presentation" class="disabled">
<a href="#step3" data-toggle="tab" aria-controls="step3" role="tab" title="Step 3">
<span class="round-tab">
<i class="glyphicon glyphicon-picture"></i>
</span>
</a>
</li>
<li role="presentation" class="disabled">
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
.wizard {
margin: 20px auto;
background: #fff;
}
.wizard .nav-tabs {
position: relative;
margin: 40px auto;
margin-bottom: 0;
border-bottom-color: #e0e0e0;
}
.wizard > div.wizard-inner {
position: relative;
}
.connecting-line {
height: 2px;
background: #e0e0e0;
position: absolute;
width: 80%;
margin: 0 auto;
left: 0;
right: 0;
top: 50%;
z-index: 1;
}
.wizard .nav-tabs > li.active > a, .wizard .nav-tabs > li.active > a:hover, .wizard .nav-tabs > li.active > a:focus {
color: #555555;
cursor: default;
border: 0;
border-bottom-color: transparent;
}
span.round-tab {
width: 70px;
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
$(document).ready(function () {
//Initialize tooltips
$('.nav-tabs > li a[title]').tooltip();
//Wizard
$('a[data-toggle="tab"]').on('show.bs.tab', function (e) {
var $target = $(e.target);
if ($target.parent().hasClass('disabled')) {
return false;
}
});
$(".next-step").click(function (e) {
var $active = $('.wizard .nav-tabs li.active');
$active.next().removeClass('disabled');
nextTab($active);
});
$(".prev-step").click(function (e) {
var $active = $('.wizard .nav-tabs li.active');
prevTab($active);
});
});
function nextTab(elem) {
$(elem).next().find('a[data-toggle="tab"]').click();
}
function prevTab(elem) {
$(elem).prev().find('a[data-toggle="tab"]').click();
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Material Kit React
Tabs style 1
Bootstrap Tabs with Table
login-form

Questions / Comments:

Thanks for your nice wizard

Could you please help me if I want to change the direction of levels from right to left??!

Thanks in advance

maria12 (-1) - 7 years ago - Reply -1

My problem is the buttons not working and images not change the point of wizard. I filled all fields in the first tab but not work...buttons and images. I think is the place where I copied the JS code. Help me !!!

andreboni1966 (-2) - 7 years ago - Reply -2

Hi, All

Where in my HTML file I include the JS statements ?

Thks

André

andreboni1966 (-2) - 7 years ago - Reply 0

Hi Its very nice , can u please guide me to download the files.......its really imp to me thank you dude

ravitanuku () - 7 years ago - Reply 0

How to make the required inputs after save and continue? plz help

jhon () - 7 years ago - Reply 0

<form role="form" id="teste">
<div class="wizard"> .....

$(document).ready(function () {
var $validator = $("#teste").validate({

rules: {
exampleInputEmail1: {
required: true
},
exampleInputEmail1: {
required: true
},
exampleInputEmail1: {
required: true
}
},
messages: {
exampleInputEmail1: "* Selecione um tipo de averbação",
exampleInputEmail1: "* Informe um local de averbação",
exampleInputEmail1: "* Informe um curso de averbação",

},
highlight: function (element) {
$(element).closest('.form-group').removeClass('has-success').addClass('has-error')
$(element).parent().find('.form-control-feedback').removeClass('glyphicon-ok').addClass('glyphicon-remove');
},
unhighlight: function (element) {
$(element).closest('.form-group').removeClass('has-error').addClass('has-success');
$(element).parent().find('.form-control-feedback').removeClass('glyphicon-remove').addClass('glyphicon-ok');
},
//errorElement: 'span',
errorClass: 'help-block',
errorPlacement: function (error, element) {
if (element.parent('.input-group').length) {
error.insertAfter(element.parent());
} else {
error.insertAfter(element);
}
}
});

$(".next-step").click(function (e) {
var $valid = $("#teste").valid();
var $active = $('.wizard .nav-tabs li.active');
if(!$valid) {
$validator.focusInvalid();
return false;
}
$active.next().removeClass('disabled');
nextTab($active);

});

});

Modify according to your need

Canellas Sandro () - 7 years ago - Reply 0

One problem. It will highlight missing fields correctly but it will still let user to next phase. Howto modify that without missing fields you cannot proceed to next step?

tester () - 7 years ago - Reply 0

Sorry. It was already working. My bad..

tester () - 7 years ago - Reply 0

it looks okay but the continue buttons arent working. i am using it on asp.net, please help out

Pope Jubilate () - 7 years ago - Reply 0

Nice work, but the there is a problem with the glyphicons' alignment. They don't center; here is the code to fix:

span.round-tab i{

color:#555555;
position: relative;
top: 50%;
transform: translateY(-50%);

}

Martin P. () - 8 years ago - Reply 0

Thanks for this nice Snippet

MeTaLiKiD () - 8 years ago - Reply 0

hey, did you have any trouble with the glyhicons aligning? See my post .

thanks

Martin P. () - 8 years ago - Reply 0

No trouble.

Check if you have a custom css rule on .glyphicon or i element ?

span.round-tab have 70px fixed size and line-height 70px, so glyphicon element is centered automatically

MeTaLiKiD () - 8 years ago - Reply 0

this awesome

King GeneraL () - 8 years ago - Reply 0

Can you send me the files, for some reason i cannot get it to work, i really like this here is my email, luke@mdxsolutions.co.uk

Luke101 () - 8 years ago - Reply 0

Please recheck your code :
this things is what you are miss : (bootstrap.min.css,jquery-1.11.1.min.js,bootstrap.min.js)

<link href="http://maxcdn.bootstrapcdn...." rel="stylesheet">
....
<script src="http://code.jquery.com/jque..."></script>
<script src="http://maxcdn.bootstrapcdn...."></script>

King GeneraL () - 8 years ago - Reply 0

Ok i found the download button. lol

Luke101 () - 8 years ago - Reply 0