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

Free Material Bootstrap Wizard

Product description


Paper Bootstrap Wizard is a fully responsive wizard that is inspired by our famous Paper Kit and comes with 3 useful examples and 5 colors. The Paper Bootstrap Wizard is one of the most handy elements that can be used inside a project. We recommend you to use it for guiding your users in processes like “Sign Up”, “Booking”, “Completing Profile” etc.

First of all, you need to determine when you need the bootstrap wizard. If you have a form with over 10 fields, that is the right way to split it in multiple steps. 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 with multiple steps.

What Paper Bootstrap Wizard does is to break the information into chunks and lets the user see it one step at a time. In this way, the user 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

We used our Paper Kit for the design elements of the wizard.

Examples

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

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

Product certified by: Creative Tim
Paper Bootstrap Wizard - Fully Coded and Responsive HTML5
Paper Bootstrap Wizard - Sass Files for Professional Front End Developers
Paper Bootstrap Wizard - Crafted with Bootstrap - the most popular Front End Framework
Downloads
28,363
Version
1.0.2
Changelog
Updated
7 years ago
Released
7 years ago
Reviews
Star
Handcrafted Elements
0
Customized Plugins
0
Example Pages
0
Community Support
Documentation
Fully Responsive

We are here to help you!

48 Web Developers commented on this product

nasratullah.ayobi
  • downloaded
7 years ago

It's really near to be professional.

alexandru.zanfir
  • downloaded
6 years ago

Hello, I am using this template in a modal and it works very nice. The only problem I have when I close the modal I would like to be taken to the first step of the wizard form. How can I do that, I tried with wizard.reset() and others. I would appreciate the help. Thank you. Keep up the good work.

alexpaduraru
  • owner

@alexandru.zanfir thank you for using our product. We just made the design over the simple Bootstrap Wizard. Unfortunately, we don't know how to do that so we recommend you to check the original repo: https://github.com/VinceG/twitter-bootstrap-wizard and the documentation. Maybe you can open an issue requesting this feature if it is not implemented. Best, Alex!
6 years ago

alexandru.zanfir
  • downloaded
6 years ago

Thank you for your fast response. I already figure it out, it's quite straightforward for people who are going through the same problem: $('.wizard-card').bootstrapWizard('show',0); your tabs start with 0, 1, 2 .....

nathan.arnold
  • downloaded
6 years ago

Hi, This is an awesome template, I love it! I can't seem to work out how to make the form fields required, so the user needs to enter a value before they can proceed. It is used in the "create profile" example, but not in the others. Can anyone help? Thanks.

alexpaduraru
  • owner

@nathan.arnold thank you for the kind words, please check the official documentation and example:http://vinceg.github.io/twitter-bootstrap-wizard/examples/validation.html Best, Alex!
6 years ago

dhiraj.sonavane 6 years ago

How to make this wizard vertical progress?

forex.rebate
  • downloaded
6 years ago

thank u

z8rasmus
  • downloaded
6 years ago

Hi there, I was planning on using this awesome wizard with my paper-kit2-pro Theme but I realized that they are built on different Bootstrap versions. Are you planning on updating this wizard to Bootstrap 4 aswell? /Rasmus

alexpaduraru
  • owner

@z8rasmus yes, we will have an update to Bootstrap 4 too. Did you try it over BS4 directly and it didn't work? Best, Alex!
6 years ago

ilan.garcia 6 years ago

Any idea when the update to BS4 will be released?

alexpaduraru
  • owner

@ilan.garcia it should be released as soon as Bootstrap 4 will be out of Beta. Hope this helps. Best, Alex!
6 years ago

dimitric
  • downloaded

Any update on the BS4 edition (paper kit 2)? I'm having the same issue as ilan.garcia. (Or include a wizard example in the Paper kit 2 Pro)
6 years ago

leandro.torresdeoliveira
  • downloaded
6 years ago

Amazing design. Best plugin I found. I also had some problems with the design for mobile. But I think I fixed it. Thank you for the solution.

andrew.lea
  • downloaded
6 years ago

Hi there, If the wizard requires the user to scroll down the page how can we force the page to go back to the top when the next button is clicked ? Thanks Andy

alexpaduraru
  • owner

@andrew.lea please check this: https://stackoverflow.com/questions/1144805/scroll-to-the-top-of-the-page-using-javascript-jquery Best, Alex!
6 years ago

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