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

amourlesangwa1 6 years ago

Perfect GUI

maheshroja 6 years ago

hi ,when i am using material bootstrap wizard as normal html file its works fine,but if am include in angular2 project means the tab buttons are not showing

alexpaduraru
  • owner

@maheshroja thank you for using our product. Please open an issue on the GitHub (https://github.com/creativetimofficial/material-bootstrap-wizard/issues) with all the details about your system, OS, browsers, angular version, portions of code etc. and also please include a link to your web app. In this way, we will reproduce your case and will give you a solution. Best, Alex
6 years ago

rabindra.sahara 6 years ago

thanks for wonderful wizard.. :D i have an issue that with ROOM TYPE tab. i can't get the value of checked radio with php. when i submitted the form, radio gave nothing. could you give me an advice to that? thank you.. :D

alexpaduraru
  • owner

@rabindra.sahara thank you for using our product. Can you please send us a link to your application? In this way we will test and give you a quick fix for that. Best, Alex!
6 years ago

becky
  • downloaded
6 years ago

Is there a way to hide a tab dynamically? I tried display:none, but when i use the next/previous buttons the hidden tab shows back up! thanks.

karel.groot19
  • downloaded
6 years ago

Hi Alex, I can't use the required option in a radio input tag. It will not register the option I selected and will keep giving the error that the field is required. Is there a way to use the required option in a INPUT tag when using the radio or checkbox type?

alexpaduraru
  • owner

@karel.groot19 thank you for using our product. Please create a fiddle here: https://jsfiddle.net/ with the problem, give us the step by step tutorial on how to test it and then we will check and give you a solution. Best, Alex!
6 years ago

mouad.mahfoud
  • downloaded
6 years ago

Hi, thanks for wonderful wizard i have a problem that with ROOM TYPE tab. i can't get the value of checked radio with php. when i submitted the form, radio gave nothing. could you give me an advice to that? thank you.. :)

alexpaduraru
  • owner

@mouad.mahfoud can you send us a link to your web app to identify the issue? You can also create a https://jsfiddle.net/ with the problem having the submit as an ajax call so we can track what is causing that problem. Best, Alex!
6 years ago

seshagiri.stb9v
  • downloaded
6 years ago

Hi... It is a very nice wizard. I want to integrate this with Material Bootstrap Kit Pro. Can you guide me on how to achieve that. I have copied all .wiz*- classes to Kit Pro Css and tried to use it as given in example. But it didn't work. Can you please help? thanks

alexpaduraru
  • owner

Anonymous Tim thank you for using our products. Do you have a link that we can check? Best, Alex!
6 years ago

carlosgonzaga.bsb
  • downloaded
6 years ago

Wow!! great wizard! i did a test and wors very well. Thanks! :)

carlosgonzaga.bsb
  • downloaded
6 years ago

I mean: work :)

pixelairport
  • downloaded
6 years ago

I want to use this form in my material design pro theme and have more than one wizard-radio fields. I need one for category and on the next tab one for subcategory. But when i rename the name which is type (<input type="radio" name="type" value="{{$category->id}}">) to category then the click on the element with class btn-next does not work anymore. Can somebody give me an advice for that? thx.

pixelairport
  • downloaded

Ok. I do it without this wizard-radios and build my own select fields. When i click on an element the value is saved into a hidden field.... works for me.
6 years ago

alexpaduraru
  • owner

Anonymous Tim glad that you found a solution. If you can send a link to the original issue we can check it and see if there is a quick fix for it. Best, Alex!
6 years ago

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