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

<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"> <a href="#complete" data-toggle="tab" aria-controls="complete" role="tab" title="Complete"> <span class="round-tab"> <i class="glyphicon glyphicon-ok"></i> </span> </a> </li> </ul> </div> <form role="form"> <div class="tab-content"> <div class="tab-pane active" role="tabpanel" id="step1"> <div class="step1"> <div class="row"> <div class="col-md-6"> <label for="exampleInputEmail1">First Name</label> <input type="email" class="form-control" id="exampleInputEmail1" placeholder="First Name"> </div> <div class="col-md-6"> <label for="exampleInputEmail1">Last Name</label> <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Last Name"> </div> </div> <div class="row"> <div class="col-md-6"> <label for="exampleInputEmail1">Email address</label> <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email"> </div> <div class="col-md-6"> <label for="exampleInputEmail1">Confirm Email address</label> <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email"> </div> </div> <div class="row"> <div class="col-md-6"> <label for="exampleInputEmail1">Mobile Number</label> <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email"> </div> <div class="col-md-6"> <label for="exampleInputEmail1">Email address</label> <div class="row"> <div class="col-md-3 col-xs-3"> <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email"> </div> <div class="col-md-9 col-xs-9"> <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email"> </div> </div> </div> </div> </div> <ul class="list-inline pull-right"> <li><button type="button" class="btn btn-primary next-step">Save and continue</button></li> </ul> </div> <div class="tab-pane" role="tabpanel" id="step2"> <div class="step2"> <div class="step_21"> <div class="row"> </div> </div> <div class="step-22"> </div> </div> <ul class="list-inline pull-right"> <li><button type="button" class="btn btn-default prev-step">Previous</button></li> <li><button type="button" class="btn btn-primary next-step">Save and continue</button></li> </ul> </div> <div class="tab-pane" role="tabpanel" id="step3"> <div class="step33"> <h5><strong>Basic Details</strong></h5> <hr> <div class="row mar_ned"> </div> <div class="row mar_ned"> <div class="col-md-4 col-xs-3"> <p align="right"><stong>Date of birth</stong></p> </div> <div class="col-md-8 col-xs-9"> <div class="row"> <div class="col-md-4 col-xs-4 wdth"> <select name="visa_status" id="visa_status" class="dropselectsec1"> <option value="">Date</option> <option value="2">1</option> <option value="1">2</option> <option value="4">3</option> <option value="5">4</option> <option value="6">5</option> <option value="3">6</option> <option value="7">7</option> <option value="8">8</option> <option value="9">9</option> </select> </div> <div class="col-md-4 col-xs-4 wdth"> <select name="visa_status" id="visa_status" class="dropselectsec1"> <option value="">Month</option> <option value="2">Jan</option> <option value="1">Feb</option> <option value="4">Mar</option> <option value="5">Apr</option> <option value="6">May</option> <option value="3">June</option> <option value="7">July</option> <option value="8">Aug</option> <option value="9">Sept</option> </select> </div> <div class="col-md-4 col-xs-4 wdth"> <select name="visa_status" id="visa_status" class="dropselectsec1"> <option value="">Year</option> <option value="2">1990</option> <option value="1">1991</option> <option value="4">1992</option> <option value="5">1993</option> <option value="6">1994</option> <option value="3">1995</option> <option value="7">1996</option> <option value="8">1997</option> <option value="9">1998</option> </select> </div> </div> </div> </div> <div class="row mar_ned"> <div class="col-md-4 col-xs-3"> <p align="right"><stong>Marital Status</stong></p> </div> <div class="col-md-8 col-xs-9"> <label class="radio-inline"> <input type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2"> Single </label> <label class="radio-inline"> <input type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3"> Married </label> </div> </div> <div class="row mar_ned"> <div class="col-md-4 col-xs-3"> <p align="right"><stong>Highest Education</stong></p> </div> <div class="col-md-8 col-xs-9"> <select name="highest_qualification" id="highest_qualification" class="dropselectsec"> <option value=""> Select Highest Education</option> <option value="1">Ph.D</option> <option value="2">Masters Degree</option> <option value="3">PG Diploma</option> <option value="4">Bachelors Degree</option> <option value="5">Diploma</option> <option value="6">Intermediate / (10+2)</option> <option value="7">Secondary</option> <option value="8">Others</option> </select> </div> </div> <div class="row mar_ned"> <div class="col-md-4 col-xs-3"> <p align="right"><stong>Specialization</stong></p> </div> <div class="col-md-8 col-xs-9"> <input type="text" name="specialization" id="specialization" placeholder="Specialization" class="dropselectsec" autocomplete="off"> </div> </div> <div class="row mar_ned"> <div class="col-md-4 col-xs-3"> <p align="right"><stong>Year of Passed Out</stong></p> </div> <div class="col-md-8 col-xs-9"> <select name="year_of_passedout" id="year_of_passedout" class="birthdrop"> <option value="">Year</option> <option value="1980">1980</option> <option value="1981">1981</option> <option value="1982">1982</option> <option value="1983">1983</option> <option value="1984">1984</option> <option value="1985">1985</option> <option value="1986">1986</option> <option value="1987">1987</option> <option value="1988">1988</option> <option value="1989">1989</option> <option value="1990">1990</option> <option value="1991">1991</option> <option value="1992">1992</option> <option value="1993">1993</option> <option value="1994">1994</option> <option value="1995">1995</option> <option value="1996">1996</option> <option value="1997">1997</option> <option value="1998">1998</option> <option value="1999">1999</option> <option value="2000">2000</option> <option value="2001">2001</option> <option value="2002">2002</option> <option value="2003">2003</option> <option value="2004">2004</option> <option value="2005">2005</option> <option value="2006">2006</option> <option value="2007">2007</option> <option value="2008">2008</option> <option value="2009">2009</option> <option value="2010">2010</option> <option value="2011">2011</option> <option value="2012">2012</option> <option value="2013">2013</option> <option value="2014">2014</option> <option value="2015">2015</option> </select> </div> </div> <div class="row mar_ned"> <div class="col-md-4 col-xs-3"> <p align="right"><stong>Total Experience</stong></p> </div> <div class="col-md-8 col-xs-9"> <div class="row"> <div class="col-md-6 col-xs-6 wdth"> <select name="visa_status" id="visa_status" class="dropselectsec1"> <option value="">Month</option> <option value="2">Jan</option> <option value="1">Feb</option> <option value="4">Mar</option> <option value="5">Apr</option> <option value="6">May</option> <option value="3">June</option> <option value="7">July</option> <option value="8">Aug</option> <option value="9">Sept</option> </select> </div> <div class="col-md-6 col-xs-6 wdth"> </div> </div> </div> </div> <div class="row mar_ned"> </div> </div> <ul class="list-inline pull-right"> <li><button type="button" class="btn btn-default prev-step">Previous</button></li> <li><button type="button" class="btn btn-default next-step">Skip</button></li> <li><button type="button" class="btn btn-primary btn-info-full next-step">Save and continue</button></li> </ul> </div> <div class="tab-pane" role="tabpanel" id="complete"> <div class="step44"> <h5>Completed</h5> </div> </div> <div class="clearfix"></div> </div> </form> </div> </section> </div> </div>
.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; height: 70px; line-height: 70px; display: inline-block; border-radius: 100px; background: #fff; border: 2px solid #e0e0e0; z-index: 2; position: absolute; left: 0; text-align: center; font-size: 25px; } span.round-tab i{ color:#555555; } .wizard li.active span.round-tab { background: #fff; border: 2px solid #5bc0de; } .wizard li.active span.round-tab i{ color: #5bc0de; } span.round-tab:hover { color: #333; border: 2px solid #333; } .wizard .nav-tabs > li { width: 25%; } .wizard li:after { content: " "; position: absolute; left: 46%; opacity: 0; margin: 0 auto; bottom: 0px; border: 5px solid transparent; border-bottom-color: #5bc0de; transition: 0.1s ease-in-out; } .wizard li.active:after { content: " "; position: absolute; left: 46%; opacity: 1; margin: 0 auto; bottom: 0px; border: 10px solid transparent; border-bottom-color: #5bc0de; } .wizard .nav-tabs > li a { width: 70px; height: 70px; margin: 20px auto; border-radius: 100%; padding: 0; } .wizard .nav-tabs > li a:hover { background: transparent; } .wizard .tab-pane { position: relative; padding-top: 50px; } .wizard h3 { margin-top: 0; } .step1 .row { margin-bottom:10px; } .step_21 { border :1px solid #eee; border-radius:5px; padding:10px; } .step33 { border:1px solid #ccc; border-radius:5px; padding-left:10px; margin-bottom:10px; } .dropselectsec { width: 68%; padding: 6px 5px; border: 1px solid #ccc; border-radius: 3px; color: #333; margin-left: 10px; outline: none; font-weight: normal; } .dropselectsec1 { width: 74%; padding: 6px 5px; border: 1px solid #ccc; border-radius: 3px; color: #333; margin-left: 10px; outline: none; font-weight: normal; } .mar_ned { margin-bottom:10px; } .wdth { width:25%; } .birthdrop { padding: 6px 5px; border: 1px solid #ccc; border-radius: 3px; color: #333; margin-left: 10px; width: 16%; outline: 0; font-weight: normal; } /* according menu */ #accordion-container { font-size:13px } .accordion-header { font-size:13px; background:#ebebeb; margin:5px 0 0; padding:7px 20px; cursor:pointer; color:#fff; font-weight:400; -moz-border-radius:5px; -webkit-border-radius:5px; border-radius:5px } .unselect_img{ width:18px; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .active-header { -moz-border-radius:5px 5px 0 0; -webkit-border-radius:5px 5px 0 0; border-radius:5px 5px 0 0; background:#F53B27; } .active-header:after { content:"\f068"; font-family:'FontAwesome'; float:right; margin:5px; font-weight:400 } .inactive-header { background:#333; } .inactive-header:after { content:"\f067"; font-family:'FontAwesome'; float:right; margin:4px 5px; font-weight:400 } .accordion-content { display:none; padding:20px; background:#fff; border:1px solid #ccc; border-top:0; -moz-border-radius:0 0 5px 5px; -webkit-border-radius:0 0 5px 5px; border-radius:0 0 5px 5px } .accordion-content a{ text-decoration:none; color:#333; } .accordion-content td{ border-bottom:1px solid #dcdcdc; } @media( max-width : 585px ) { .wizard { width: 90%; height: auto !important; } span.round-tab { font-size: 16px; width: 50px; height: 50px; line-height: 50px; } .wizard .nav-tabs > li a { width: 50px; height: 50px; line-height: 50px; } .wizard li.active:after { content: " "; position: absolute; left: 35%; } }
$(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(); } //according menu $(document).ready(function() { //Add Inactive Class To All Accordion Headers $('.accordion-header').toggleClass('inactive-header'); //Set The Accordion Content Width var contentwidth = $('.accordion-header').width(); $('.accordion-content').css({}); //Open The First Accordion Section When Page Loads $('.accordion-header').first().toggleClass('active-header').toggleClass('inactive-header'); $('.accordion-content').first().slideDown().toggleClass('open-content'); // The Accordion Effect $('.accordion-header').click(function () { if($(this).is('.inactive-header')) { $('.active-header').toggleClass('active-header').toggleClass('inactive-header').next().slideToggle().toggleClass('open-content'); $(this).toggleClass('active-header').toggleClass('inactive-header'); $(this).next().slideToggle().toggleClass('open-content'); } else { $(this).toggleClass('active-header').toggleClass('inactive-header'); $(this).next().slideToggle().toggleClass('open-content'); } }); return false; });

Related: See More


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 (0) - 11 months ago - Reply 0


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 (-1) - 8 months ago - Reply -1


Hi, All

Where in my HTML file I include the JS statements ?

Thks

André

andreboni1966 (-1) - 8 months 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 () - 1 year ago - Reply 0


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

jhon () - 1 year 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 () - 1 year 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 () - 1 year ago - Reply 0


Sorry. It was already working. My bad..

tester () - 1 year ago - Reply 0


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

Pope Jubilate () - 1 year 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. () - 1 year ago - Reply 0


Thanks for this nice Snippet

MeTaLiKiD () - 1 year ago - Reply 0


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

thanks

Martin P. () - 1 year 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 () - 1 year ago - Reply 0


this awesome

King GeneraL () - 2 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 () - 1 year 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 () - 1 year ago - Reply 0


Ok i found the download button. lol

Luke101 () - 1 year ago - Reply 0