❤️ Creative Tim Club - Access all our Present & Future Premium Products

Free Bootstrap Wizard

Product description


Fully responsive wizard that comes with 3 useful examples and 5 bright colors. The Bootstrap Wizard is one of the most handy elements that can be used inside a project. We highly recommend it not just as a design feature, but as a way of guiding your users through tough forms.

First of all, you need to determine when you need a wizard. Do you have a form of over 10 fields? Do you have users not going through with the registration process? Do you have unfinished list? They all have something in common; and they all have the same solution. So, what is wrong with letting your users see an infinite form? They will get discouraged to finish it. What is the solution? Better visual organisation, mainly in the form of a wizard.

What a wizard does is it breaks the information into chunks and lets the user see it one step at a time. In this way, he only has to focus on the current step. He will also see how many steps he has ahead, so he won't be discouraged by something that looks like an long process. Consider win-win for both you and the users: they have a better experience and you will have all the necessary information!

Technical

To make the integration easier we also made a tutorial with code snippets. Once you have decided to integrate it, everything will be fairly easy, so you don't have to worry about it! If you have any other questions, don't hesitate to contact us and we will help you out.

Examples

If you want to start with a pre-built template, you can see the following examples made with the Bootstrap Wizard:

Can't wait to see the awesome stuff that you will build with it!

Product certified by: Creative Tim
Bootstrap Wizard - Fully Coded and Responsive HTML5
Bootstrap Wizard - Crafted with Bootstrap - the most popular Front End Framework
Downloads
43,466
Version
1.1.1
Changelog
Updated
7 years ago
Released
9 years ago
Reviews
Star
Handcrafted Elements
0
Customized Plugins
0
Example Pages
0
Community Support
Documentation
Fully Responsive

We are here to help you!

113 Web Developers commented on this product

karel.groot19
  • downloaded
8 years ago

Can please someone help me out. Thanks a lot !

ucu.suryadi
  • downloaded
8 years ago

Hi @alexpaduraru , I've tried to implementing this app with PHP. The problem is, when I change the finish button name into submit (the name in example is button) it won't enable to click and send the form input into PHP process page. The input field in form does not required and no validation on. Is there any configuration needed to make it work? Thank you very much

alexpaduraru
  • owner

@ucu.suryadi thank you for using our product. Please change the "type" of the input to "submit", not the name. Something like this <input type='submit' class='btn btn-finish btn-fill btn-warning btn-wd btn-sm' name='finish' value='Finish' /> and this would work 100%. Best, Alex!
8 years ago

syedmokarram9119
  • downloaded
8 years ago

i want to use html tag with runat = server, but wizard validation not applicable for runat server tags, please some body help me....

syedmokarram9119
  • downloaded
8 years ago

i want to use html tag with runat = server, but wizard validation not applicable for runat server tags, please some body help me....

alexpaduraru
  • owner

@syedmokarram9119 thank you for using our product. Can you give us more details about the flow that you want to achieve? Best, Alex!
8 years ago

norcaldavid
  • downloaded
8 years ago

I am having difficulty with implementing this. I have everything setup and the form looks correct, if I click the tabs it switches through; however, the buttons do not control navigation. Any suggestions

alexpaduraru
  • owner

@norcaldavid thank you for using our product. Can you please make sure you use the exact HTML divs structure and the ids on the buttons that come within the default archive? If you change something please also adjust the Javascript so the functionality remains the same. In our demo example everything is working fine. Please download again the product and check which are the difference between your adjustments and the default version and let us know what is your progress. Best, Alex!
8 years ago

geliyahu 8 years ago

Great tool! FYI, if the wizard form is too long and a browser scroll bar pops up, then when click on next.previous the page stays in its bottom location instead of scrolling automatic up. Another thing I have notice for such cases is that the next tab shown with a scroll bar but it should be without scrollbar because it has just on line of text... Tested this on chrome.

c3041417
  • downloaded
7 years ago

great product!!

freetemplate 7 years ago

humm so I was trying the Light Bootstrap Dashboard demo and I have a strange problem with absolute vs relative path "assets/css/animate.min.css" works "/assets/css/animate.min.css" does not work is that normal ? any workaround ?

alexpaduraru
  • owner

@freetemplate can you please give us a link with your website? We want to check on live what is not working. Best, Alex!
7 years ago

pruneanusergiu
  • downloaded
7 years ago

@alexpaduraru nice job!!! is there a way to validate fields trough ajax and php? and how can I display errors from data-error input field when is empty? Thank you.

alexpaduraru
  • owner

@pruneanusergiu thank you for using our product. Since we've used jquery Validate plugin you can use their example of Remote validation: https://jqueryvalidation.org/remote-method/ you can also find more about the methods of jqueryvalidation on their documentation. Can you give us more details about the data-error field when it is empty? What exactly you want to achieve? Best, Alex!
7 years ago

pruneanusergiu
  • downloaded

@alexpaduraru many thanks for the link, realy helpful. Now I have to figured out how can past data to a php file and return the result. Thanks a lot
7 years ago

la.ma
  • downloaded
7 years ago

hi, i have a problem , the radio buttons , didn't pass the value , and i can't figure why , please help !

la.ma
  • downloaded

@alexpaduraru
7 years ago

alexpaduraru
  • owner

Hi! Thank you for using our product and sorry for the late response, there are some weekends on which we are not working. Can you please send us a link to your website to check the wizard? And also please give us more details about what language you use for your server and if you send the form through Ajax or Submit to the page. Best, Alex!
7 years ago

la.ma
  • downloaded

Hi Alex, Thank you for your reply , i build my web application offline so i can't give you a link because it's not online yet , i am using Java and Jsp (J2EE Technology) and yes i send the form through Ajax Thank you in advance @alexpaduraru
7 years ago

You have to be logged in to post a comment. Login here.