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

Free Bootstrap Wizard

Product description


Fully responsive wizard that comes with 3 useful examples and 5 bright colors. The 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 a wizard does is it breaks the information into chunks and lets the user see it one step at a time. In this way, he 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

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

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

Product certified by: Creative Tim
Bootstrap Wizard - Fully Coded and Responsive HTML5
Bootstrap Wizard - Crafted with Bootstrap - the most popular Front End Framework
Downloads
43,401
Version
1.1.1
Changelog
Updated
7 years ago
Released
9 years ago
Reviews
Star
Handcrafted Elements
0
Customized Plugins
0
Example Pages
0
Community Support
Documentation
Fully Responsive

We are here to help you!

113 Web Developers commented on this product

andrew.lea
  • downloaded
6 years ago

Great wizard Is there anyway to have multiple sets of radio buttons on one pane of the wizard?. If I add more radio buttons they are toggled off by every radio button on the wizard so I can not have multiple sets of questions Thanks

alexpaduraru
  • owner

@andrew.lea thank you for the kind words. Unfortunately, at the moment the wizard is working with only 1 group of radios/checkboxes and we are very very busy to develop new features for it. You can play with the code and make it work for multiple groups if you check the code from assets/js/gsdk-bootstrap-wizard.js starting with line 155. Hope this helps. Best, Alex!
6 years ago

hamed
  • downloaded
6 years ago

شكرا جزيلا على هذا المجهود

calmpress 6 years ago

This is real awesome. Thanks

4730213498
  • downloaded
6 years ago

How do you use jquery validate with the wizard-radio and wizard-checkbox? I am able to get it to validate but when the radio is clicked it will not remove the validation error. <div class="col-sm-4 "> <div class="choice" data-toggle="wizard-radio" rel="tooltip" title="Select this option if your address is in the United States"> <input type="radio" id="USA" name="country" value="USA"> <div class="icon"> </div> <h6>United States</h6> </div> </div> <div class="col-sm-4"> <div class="choice" data-toggle="wizard-radio" rel="tooltip" title="Select this option if your address is in the Canada"> <input type="radio" id="Canada" name="country" value="Canada"> <div class="icon"> </div> <h6>Canada</h6> </div> </div> <div class="col-sm-4"> <div class="choice" data-toggle="wizard-radio" rel="tooltip" title="Select this option if your address is in the Mexico"> <input rel="tooltip" type="radio" id="Mexico" name="country" value="Mexico"> <div class="icon"> </div> <h6>Mexico</h6> </div> </div> var $validator = $('.wizard-card form').validate({ rules: { country:{required:true} });

4730213498
  • downloaded

Seriously great wizard. I am still trying to get the radio buttons to work/validate. I can get the checkbox to work with the wizard-checkbox but the radios will not validate unless it is done without the tooltip/wizard-radios. If I follow the documentation It works but loses the style. Any idea what could be causing this issue? http://demos.creative-tim.com/material-bootstrap-wizard/documentation/components-documentation.html
6 years ago

kairider2012
  • downloaded
6 years ago

Great Wizard.

nikkoldrichonroe
  • downloaded
6 years ago

very helpful

cheikhtidianemb91
  • downloaded
5 years ago

Thanks you

asabya
  • downloaded
5 years ago

Great Wizard. does it have a onFinish event?

alanlaudioelo
  • downloaded
5 years ago

Very good, but exist a bug. There is a conflict with Bootstrap navbar, distorting navbar. If we use the bootstrap.min.css and js Wizard does not work, if we use the bootstrap bootstrap.min.css and js, the wizard does not work. Include in your Profile Wizard example a navbar with menu items and a footer, and see the distortions that affect both.

vikramvuppala
  • downloaded
5 years ago

Hi Team, In angular5 app i am using [routerLink]="['/build/widget']" and the widget is not getting applied with css. but if i use href="build/widget" the page is getting reloaded and css getting applied. And this build/widget is a view(html content).

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