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

Material Bootstrap Wizard

Free Material Bootstrap Wizard

Product description


Material Bootstrap Wizard is a fully responsive wizard that is inspired by the famous Google's Material Design and comes with 3 useful examples and 5 colors. The Material 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 Material 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 famous Material Kit for the design elements of the wizard.

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 Material Bootstrap Wizard:


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

Product certified by: Creative Tim
Material Bootstrap Wizard - Fully Coded and Responsive HTML5
Material Bootstrap Wizard - Sass Files for Professional Front End Developers
Material Bootstrap Wizard - Crafted with Bootstrap - the most popular Front End Framework
Downloads
35,182
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!

87 Web Developers commented on this product

samer.alsarhan
  • downloaded
7 years ago

Nice Work Keep it up

gameras
  • downloaded
7 years ago

Please give short documentation

alexpaduraru
  • owner

@gameras please check the documentation for the design here: http://demos.creative-tim.com/material-bootstrap-wizard/documentation/components-documentation.html and the documentation for the wizard here: https://github.com/VinceG/twitter-bootstrap-wizard Best, Alex!
7 years ago

rajarw9
  • downloaded
7 years ago

how to use multiple wizard card in same page

aruljothy.sundramoorthy
  • downloaded
7 years ago

Awesome templates Love it :)

veljac37
  • downloaded
7 years ago

Creative Tim Templates saved me a lot of work and time... Great products!

elikartkanane.mugangane
  • downloaded
7 years ago

Thanks for this post... its very useful.

melkamuashebir21
  • downloaded
7 years ago

thanks for this post materail i follow up at every time ........it is very important

payam.chamani
  • downloaded
7 years ago

Hi, very nice. very neat. One question though, how can I have form validation on each step (page) ? Is there an example for that ?

alexpaduraru
  • owner

@payam.chamani thank you for using our product. Please follow this example from the original repo: http://vadimg.com/twitter-bootstrap-wizard-example/examples/validation.html.
7 years ago

payam.chamani
  • downloaded
6 years ago

@alexpaduraru thank you for the immediate response, but the URL you mentioned, returns e 404 File not found error :(

alexpaduraru
  • owner

@payam.chamani oohh... it seems they changed it to github: http://vinceg.github.io/twitter-bootstrap-wizard/examples/validation.html Best, Alex!
6 years ago

victor.landureau
  • downloaded
6 years ago

Awesome ! It's all I need ! :D

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