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

maggew
  • downloaded
7 years ago

Daaaang...this looks wicked - thanks for the share!

ikbel
  • downloaded
7 years ago

thank you !

hadi.riazi 7 years ago

@creative-tim I'm already using your bootstrap wizard (its awesome) , can i simply change the theme to look like paper ? (are there any other themes or designs that i can apply to what i currently have ?) Thanks!

solobama
  • downloaded
7 years ago

how do i set the email address for this to be sent to me

alexpaduraru
  • owner

@solobama thank you for using our product. You need some PHP in order to process the request for the user then send that information to an email, please check this tutorial for more details: https://bootstrapbay.com/blog/working-bootstrap-contact-form/. Best, Alex!
7 years ago

balázs.horváth
  • downloaded
7 years ago

Hi Tim I downloaded the Paper Bootstrap Wizard, very nice design, thx! ;) I have problems with the HTML5 validation, if I activate the default required paramter, the form (the first block, Location) falls appart as soon the Filed is required message appears, is ther any way to have the message poping up in a box that will not cause such an issue?

vertigo
  • downloaded
7 years ago

Dear All, First of all, I'd like to thank you for your truly creative ideas. My question is regarding the wizard template. I'm using your masterpiece on my ASP.NET MVC form where I populate various data inside View via ViewModel which inside that I can use validation attributes like [Required] and there is no need to call them in js file like your demo file. The problem is that, when I go to the next tab, I should make sure that the required fields are entered and then allow it to move forward, but currently it doesn't function that way. Because, when validation is called, it calls other fields inside other tabs and therefore the "Next" navigation doesn't work and it's because other tabs contain required fields. Question: Is it possible to Validate fields inside each tab separately instead of all at once? Best, Alex

alexpaduraru
  • owner

@vertigo thank you for using our product. We recommend you to add some if statements on the "onNext" function and to validate each page in that, like how we implemented in another Bootstrap Wizard that we made, here is an example of the code: https://github.com/creativetimofficial/bootstrap-wizard/blob/master/assets/js/wizard.js, starting with line 28. Hope that will help you. Best, Alex!
7 years ago

nick.n
  • downloaded
7 years ago

@ @creative-tim Keep up the good work guys. Remarkable designs.

fredrick.njenga
  • downloaded
7 years ago

Awesome! Thanks guys

jptandico
  • downloaded
7 years ago

Nice theme! :)

balázs.horváth
  • downloaded
7 years ago

Hi Tim! I posted this 3 months ago, but didn't received any feedback: I downloaded the Paper Bootstrap Wizard, very nice design, thx! ;) I have problems with the HTML5 validation, if I activate the default required paramter, the form (the first block, Location) falls appart as soon the Filed is required message appears, is ther any way to have the message poping up in a box that will not cause such an issue?

alexpaduraru
  • owner

@balázs.horváth thank you for using our product and sorry for missing your comment. Please send us a link with your web wizard so we can check the issue. If you don't have it online please add it on paperplane.io and then send us the link and we will have a look. Best, Alex!
7 years ago

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