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

liquidq8
  • downloaded
5 years ago

Hello, I have 2 groups of radio buttons, when I select one of group, any other radio button will be unselected Here is my code: https://pastebin.com/RCmACDLH Video showing the issue: https://youtu.be/Vj0lsUJXBCs Please help

liquidq8
  • downloaded

I just found the solution here: https://github.com/creativetimofficial/material-bootstrap-wizard/issues/18
5 years ago

awaisustb
  • downloaded
4 years ago

Very nice template thanks again

dragosct
  • owner

Hi, @awaisustb ! Thank you for using our products and for the kind words. Regards, Dragos
4 years ago

udaybhan 4 years ago

I want it on react could you help me, please. Thanks In Advance.

dragosct
  • owner

Hi, @udaybhan ! Thank you for using our products. Unfortunately, we don't have this product on React, but we can recommend you some tutorials about React to help you with the integration https://www.w3adda.com/react-js-tutorial/reactjs-overview. Regards, Dragos
4 years ago

medeiroshudson
  • downloaded
4 years ago

How do i show/hide an div toggling checkboxes?

dragosct
  • owner

Hi, @medeiroshudson ! Thank you for using our products. Please, show us an example of what you want to do. Regards, Dragos
4 years ago

hariso7u
  • downloaded
4 years ago

Hi, good plugin, thanks! I am having issue with figure out how do you reset wizard steps to initial step. Step 1 when the form is submitted. Thanks

dragosct
  • owner

Hi, @hariso7u ! Thank you for using our products. In this product we use a library https://vinceg.github.io/twitter-bootstrap-wizard/ and this library make everything for us. We just added our design. Regards, Dragos
4 years ago

mdimranh750
  • downloaded
2 years ago

How to use 'finish' button as 'submit' button ?

beiaasa
  • downloaded
2 years ago

جميل جدا شكرا لهذه المجهودات الثمينة

casaestefany12
  • downloaded
4 months ago

como puedo implementarlo en neatbeans

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