"Form wizard (using tabs)"
Bootstrap 3.3.0 Snippet by lukepzak

<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"> <h3>Step 1</h3> <p>This is step 1</p> <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"> <h3>Step 2</h3> <p>This is step 2</p> <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"> <h3>Step 3</h3> <p>This is step 3</p> <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"> <h3>Complete</h3> <p>You have successfully completed all steps.</p> </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; } @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(); }

Related: See More


Questions / Comments:

Hi, Its very nice demo but I have an issue with that I have paste entire code but page is not showing complete, are there any other libraries, kindly help me.

abbasmari (-1) - 9 months ago - Reply 0


Are you including jquery and bootstrap?

skyhighpn (-1) - 9 months ago - Reply -2


How to include Same??

Save And Continue button doesnot working.. Please hellp

Ritzy1993 () - 2 months ago - Reply 0


You need to add the Bootstrap css & js into the html

<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>

BulRider777 () - 1 month ago - Reply 0


This is amazing. Thanks!

Deatholution () - 1 year ago - Reply 0


Very good post.. thanks...

Elikart Kanane Kame Mugangane () - 1 year ago - Reply 0


hello !
on my PC it looks like this- http://codepen.io/Charles11...

How can I fix this mistake on my PC
thanks all.

chai.chu.liu () - 1 year ago - Reply 0


Are you even using Bootstrap? You must add the code for the css and js files...

Braed () - 1 year ago - Reply 0


<link href="http://netdna.bootstrapcdn...." rel="stylesheet" id="bootstrap-css">
<script src="http://code.jquery.com/jque..."></script>
<script src="http://ajax.googleapis.com/..."></script>

i import all of this but it didnt run

abdulrhman muhammad () - 1 year ago - Reply 0


how i can change the range of the step 1 to 2 and forward

Taufiqurrahman () - 1 year ago - Reply 0


How to remove the line below with the arrow?

Matteo () - 1 year ago - Reply 0


Everything is working fine except for the round-tab. Tabs are displayed square

Jasper () - 2 years ago - Reply 0


Nice wizard. Now I need field verification. If is empty cant go to next step.

Reu () - 2 years ago - Reply 0


use atribute REQUIRED https://www.w3schools.com/TAgs/att_input_required.asp

brunodantas01 () - 3 months ago - Reply 0


How can i download this example?

singi () - 2 years ago - Reply 0


Please Help me. How can i validate using this wizard form.

Mani K () - 2 years ago - Reply 0


work perfectly really nice work thank you for this :) :) :)

Nikos Gkogktzilas () - 2 years ago - Reply 0


Hello, it works awesome in my code, I am using it with only two tabs, please, could you help me to validate the empty placeholder to allow switch to the last tab? Thanks in advance and congratulation for the good job.

Angel Lima () - 2 years ago - Reply 0


There was a question previously about this but i dont think the answer was given. First of all, great job with this wizard it really feels snazzy :) .. My question is, how can i reset the wizard, so each time i open it (i have it embedded in a bootstrap modal) it starts from step 1. As of now it "remembers" its last step and will open up in that step .. Many thanks and keep up the good work..

Dennis Taszarek Holm () - 2 years ago - Reply 0


Hi...save & continue button is working but Tabs are not work... please help me

shaan shaik () - 2 years ago - Reply 0


because ur javascript is not working
add ur java files outside <head></head>
<script>//add ur files here</script>

anay () - 2 years ago - Reply 0


which files to be add?

Deepak Asopa () - 1 year ago - Reply 0


Does not go to next step

Vikas Pathania () - 2 years ago - Reply 0


hi
thanks but when i copy this code the java script don't word i mean next and back bottom don't work
please help me

sahar () - 2 years ago - Reply 0


Que tal, me bajé tu demo, pero a diferencia de Florian, en móvil a mi no se me muestra igual, me siguen apareciendo los círculos en lugar de las tabs nativas.¿Tienes alguna idea del por qué?

Martin Rafael Perez Lara () - 2 years ago - Reply 0


I would like to let you know that I took the liberty to package your code into a Yii2 extension: http://www.yiiframework.com...

Andre Schuurman () - 3 years ago - Reply 0


how to reset the active tab to set one when every time i'm loading the .wizard. If i quite the wizard in the middle and reload, the cave and cot: direct to the next tab which is quite last time. lease help me as I'm struck there.

Dilshan Jayatilake () - 3 years ago - Reply 0


If I understand correctly, you want the active tab (could be step1, 2 or 3) to remain active if the page is refreshed? If so you will need to assign an ID to each tab and store that ID in a cookie every time a tab becomes active. On page load you can check if there is a cookie and then read the value and show the specific tab.

lukepzak () - 3 years ago - Reply 0


Hi, Actually, when proceeding the wizard, user goes upto step 2 and loads some other page. Then again when he loads to the wizard it come to step 2, not to the step one. i used

$('.nav-tabs a.first').tab('show');

$('.nav-tabs a.first').attr({"class": "active"});

set the active class, it shows the first step page but when click on the save and continue it navigated to the step 3, not to step 2.

Dilshan Jayatilake () - 3 years ago - Reply 0


The code to go to the next step uses next() which should find the very next LI element if it matches. make sure tab two exists and it hasn't been overwritten.

lukepzak () - 3 years ago - Reply 0


How can I change it to only 3 steps ? I tried deleting the first "circle" from HTML (which is an li element) but then the connecting line went to the right. Thanks.

Reda () - 3 years ago - Reply 0


You can change the '.connecting-line' width to 70% and the '.wizard .nav-tabs > li' width to 33% in the CSS.

lukepzak () - 3 years ago - Reply 0


Hi, i was also trying to use only three tabs and did what you said but didnt work, can you help me?

manuel () - 1 year ago - Reply 0


Thank you! I've already fixed it and that's exactly what I did :)

Reda () - 3 years ago - Reply 0


Looks good!

skv1991 () - 3 years ago - Reply 0


Hello on my mobile it looks like this - http://img5.fotos-hochladen...
And on my PC it looks like this - http://img5.fotos-hochladen...

How can I fix this mistake on my mobile?

Florian Schröder () - 3 years ago - Reply 0


How do you get that style on mobile? I downloaded the snippet and is totally different :( :'(

Martin Rafael Perez Lara () - 2 years ago - Reply 0


their is no content is missing in your moblie comparing to website .then why are u thinking it is a problem . that is reponsive technology.

siva () - 3 years ago - Reply 0


It looks like there is some CSS overriding the styles. Use your browser inspection tool and inspect at the CSS at mobile size and see what is causing the issue. Otherwise post a link to the site so I can take a look.

lukepzak () - 3 years ago - Reply 0


hello
in mobile device, i can't move to step 2
even if i click save and continue button

how?? thanks..

jh () - 3 years ago - Reply 0


What mobile device? I can confirm it works on Chrome browser in Android. It uses the jQuery click event which is supported on mobile devices.

lukepzak () - 3 years ago - Reply 0


how to disabled previous onclick on next?

Henrique Freitas () - 3 years ago - Reply 0


add the 'disabled' class to the list item. For example on the 'next-step' click event you could add '$active.removeClass('active').addClass('disabled');' to disable the previous step.

lukepzak () - 3 years ago - Reply 0


Really good looking. On my 'side' the icon jumps when I hover over it and its already active (blue). Do you know what might be the cause of this and how can I fix it?
Edit: It seems to happen on bootswatch theme "lumen" but I cannot figure how to remove the jump effect.

FPJ () - 3 years ago - Reply 0


Tabs in the lumen theme 'grow' when hovered. Using your preferred browser tool inspect the element on hover and you will see it adds extra padding to the bottom. You show be able to set 'padding-bottom:0' on the correct selector i.e. .nav-tabs > li > a:hover to fix the issue in the lumen theme only.

lukepzak () - 3 years ago - Reply 0