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

<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(); }

Similar snippets: See More


Comments:

FPJ 2015-08-12 14:42:21
    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.
lukepzak 2015-08-14 23:41:37
    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.
Henrique Freitas 2015-08-21 13:46:14
    how to disabled previous onclick on next?
lukepzak 2015-08-22 00:31:33
    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.
jh 2015-08-26 01:50:19
    hello
in mobile device, i can't move to step 2
even if i click save and continue button
lukepzak 2015-08-26 09:11:40
    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.
Florian Schröder 2015-08-28 19:06:32
    Hello on my mobile it looks like this - http://img5.fotos-hochladen...
And on my PC it looks like this - http://img5.fotos-hochladen...
lukepzak 2015-08-29 03:02:42
    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.
siva 2015-09-14 05:35:03
    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.
Martin Rafael Perez Lara 2015-10-30 17:17:43
    How do you get that style on mobile? I downloaded the snippet and is totally different :( :'(
skv1991 2015-09-03 08:21:02
    Looks good!
Reda 2015-09-14 12:41:13
    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.
lukepzak 2015-09-15 02:19:43
    You can change the '.connecting-line' width to 70% and the '.wizard .nav-tabs > li' width to 33% in the CSS.
Reda 2015-09-15 15:14:14
    Thank you! I've already fixed it and that's exactly what I did :)
manuel 2017-06-15 19:04:35
    Hi, i was also trying to use only three tabs and did what you said but didnt work, can you help me?
Dilshan Jayatilake 2015-09-17 06:16:59
    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.

lukepzak 2015-09-17 08:36:33
    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.
Dilshan Jayatilake 2015-09-17 09:02:32
    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
lukepzak 2015-09-17 09:20:08
    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.
Andre Schuurman 2015-10-13 09:12:07
    I would like to let you know that I took the liberty to package your code into a Yii2 extension: http://www.yiiframework.com...
Martin Rafael Perez Lara 2015-10-30 16:46:30
    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é?
sahar 2015-11-09 08:09:31
    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
Vikas Pathania 2015-11-09 15:03:04
    Does not go to next step
shaan shaik 2015-11-23 13:42:05
    Hi...save & continue button is working but Tabs are not work... please help me
anay 2016-05-09 15:21:18
    because ur javascript is not working
add ur java files outside <head></head>
<script>//add ur files here</script>
Deepak Asopa 2017-06-21 07:00:42
    which files to be add?
Dennis Taszarek Holm 2015-12-06 20:18:32
    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..
Angel Lima 2016-01-12 21:24:11
    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.
Nikos Gkogktzilas 2016-04-19 10:17:12
    work perfectly really nice work thank you for this :) :) :)
Mani K 2016-05-12 11:42:49
    Please Help me. How can i validate using this wizard form.
singi 2016-06-19 05:44:28
    How can i download this example?
Reu 2016-07-11 20:19:29
    Nice wizard. Now I need field verification. If is empty cant go to next step.
Jasper 2016-08-18 23:55:54
    Everything is working fine except for the round-tab. Tabs are displayed square
Matteo 2016-10-29 14:06:35
    How to remove the line below with the arrow?
Taufiqurrahman 2016-10-30 05:23:30
    how i can change the range of the step 1 to 2 and forward
abdulrhman muhammad 2016-11-30 15:15:57
    <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>
chai.chu.liu 2017-02-13 07:41:59
    hello !
on my PC it looks like this- http://codepen.io/Charles11...
Braed 2017-03-20 01:39:34
    Are you even using Bootstrap? You must add the code for the css and js files...
Elikart Kanane Kame Mugangane 2017-03-19 19:09:29
    Very good post.. thanks...
Deatholution 2017-04-25 11:45:07
    This is amazing. Thanks!

Commenting will be back soon.