❤️ 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,375
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

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

nader.nilizadeh
  • downloaded
6 years ago

Hi I downloaded the Paper Bootstrap Wizard, and I have a problem with it being responsive. Any ideas? Thanks

alexpaduraru
  • owner

@nader.nilizadeh thank you for using our product. Please add here: https://github.com/creativetimofficial/paper-bootstrap-wizard/issues/5 all the details, link, browser, OS etc. so we can check the problem. You can also see how we made this page: http://demos.creative-tim.com/paper-bootstrap-wizard/wizard-list-place.html as the responsive works fine on our side. We will come back in the next period of time, as right now we are on winter vacation. Best, Alex!
6 years ago

mely.castañeda
  • downloaded
6 years ago

Hi! I'm trying to implement this in my web site but in javascript console i got this error. I'll be grateful if you help me, please. Uncaught TypeError: $(...).validate is not a function at HTMLDocument.<anonymous> (paper-bootstrap-wizard.js:27) at i (jquery-2.2.4.min.js:2) at Object.fireWith [as resolveWith] (jquery-2.2.4.min.js:2) at Function.ready (jquery-2.2.4.min.js:2) at HTMLDocument.J (jquery-2.2.4.min.js:2)

dragosct
  • owner

Hi, @mely.castañeda ! Thank you for using our product. I just answered you on the github. Please check the github page. Regards, Dragos
6 years ago

tiagoyg
  • downloaded
6 years ago

Hi! It would be nice if there we had how to install it via bower.

dragosct
  • owner

Hi, @tiagoyg ! Thank you for using our product. Unfortunately, we don't have the product on bower, maybe in the next period we will put on the bower. Regards, Dragos
6 years ago

gonzaloolina
  • downloaded
5 years ago

Hi! Is there any way to use this wizard several times on the same page? because I tried to do it but the next button moves all the wizard at the same time. Thanks!

dragosct
  • owner

Hi, @gonzaloolina ! Thank you for using our product. It is possible, but you have to have another id on them. Regards, Dragos
5 years ago

robert.sandoval 5 years ago

Is there a way a progress bar element can remain 'active,' filled in with color, if the form elements displayed below are completed? In other words, I would like to use the 'Active' status as a 'completed' status.

dragosct
  • owner

Hi, @robert.sandoval ! Thank you for using our products. Yes, it can be done on the javascript file paper-bootstrap-wizard.js and there you can add after the tab is completed a class on the progress bar and with this class, you fill the circle with a color. Regards, Dragos
5 years ago

jerevoncarreon13
  • downloaded
5 years ago

everytime i put a radio button, there's always an error and the next button is not working, how can it be fixed? thanks!

dragosct
  • owner

Hi, @jerevoncarreon13 ! Thank you for using our product. Please tell us which errors did you have? Regards, Dragos
5 years ago

jerevoncarreon13
  • downloaded
5 years ago

Uncaught TypeError: Cannot read property 'settings' of undefined in jquery-validate.min.js

dragosct
  • owner

Hi, @jerevoncarreon13 ! Please send us an fiddle or something to see with what we can help you, because in this way we can't tell you what is the problem. Regards, Dragos
5 years ago

jerevoncarreon13
  • downloaded
5 years ago

the next button is not working in the tab forms with a check box or radio button, but to those tab forms that dont have it, it works just fine. Thank you!

danielarmona
  • downloaded
5 years ago

Hi, is there a way to use this plugin with requirejs?

dragosct
  • owner

Hi, @danielarmona ! Thank you for using our products. You can try to implement the requirejs plugin into the project, theoretically must work. Regards, Dragos
5 years ago

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