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

pruneanusergiu
  • downloaded
7 years ago

Buna ziua, As dori sa folosesc clasele has-succes si has-error impreuna cu mesajele de eroare. Se poate acest lucru? Multumesc

dragosct
  • owner

Salut! Multumim pentru interesul acordat produselor noastre . Ai putea sa dai mai multe detalii despre ceea ce vrei sa faci si unde sa apara clasele has-success , has-error si mesajele de eroare?
7 years ago

pruneanusergiu
  • downloaded
7 years ago

Buna, Multumesc de raspunsul rapid @dragosct10 <div class="form-group label-floating AICI CLASELE DE SUCCES/EROARE"> <label class="control-label">Numele <small>(required)</small></label> <input name="firstname" type="text" class="form-control"> Iar aici sa apara urmatorul cod cu iconita corespunzatoare suces/eroare: <span class="material-icons form-control-feedback">clear/done</span> Iar aici as dori sa apara mesajele de eroare </div>

dragosct
  • owner

Noi nu am incercat sa facem acest lucru, insa credem ca se poate rezolva intrand pe fisierul material-bootstrap-wizard.js pe linia 64, acolo unde este metoda errorPlacement, iar aici trebuie sa construiesti manual ceea ce doresti. Iti voi da 2 linkuri care te vor ajuta: 1.http://stackoverflow.com/questions/13200659/custom-error-label-placement-using-jquery-validate-for-all-or-some-of-your-erro 2.http://stackoverflow.com/questions/14140507/customize-jquery-validations-errorplacement-only-for-some-fields Spor!
7 years ago

pruneanusergiu
  • downloaded
7 years ago

Multumesc, Din pacate nu ma pricep la JQuery mai deloc asa ca nu reusesc :(.

pruneanusergiu
  • downloaded

am reusit totusi sa afisez mesajele de eroare, dar ar fi aratat mai interesant cu clasele respective.
7 years ago

dragosct
  • owner

Nu este nicio problema, toata lumea a pornit de la zero. Iti atasez un link care ti-ar putea fi foarte folositor pentru a invata jQuery: https://www.freecodecamp.com/map, cauta jQuery in inputul de search.
7 years ago

radu.s
  • downloaded
7 years ago

Salut, Awesome freebie! O mica intrebare: cum se poate submita tot formularul complet? (mai ales step 2 cu ROOM TYPE unde putem avea mai multe selectii)? Nu e nevoie de detalii tehnice doar de un hint :)

alexpaduraru
  • owner

@radu.s multumim pentru ca folosesti produsul nostru. Poti pune submit pe butonul de finish: <input type='submit' class='btn btn-finish btn-fill btn-danger btn-wd' name='finish' value='Finish' /> si method="POST" la form sau poti verifica in javascript pe linia 77 unde este functia "onNext" daca formularul este Valid si esti pe ultimul pas (asta se ia din index) sa faca $('#idFormular').submit(); Sper ca ajuta informaitiile, ne mai intrebi daca nu reusesti. Spor, Alex!
7 years ago

radu.s
  • downloaded
7 years ago

Mersi Axelut! Works perfectly :) Mai am o singura intrebare/problema: la pasul 2 unde am input type radio (ROOM TYPE gen) ceva nu e ok, nu se captureaza selectia in form. La POST cand verific name-urile respective sunt NULL...any hints? Resul campurilor afiseaza variabilele...(email,name etc)...

alexpaduraru
  • owner

@radu.s Hmm... nu imi dau seama de la ce poate fi, incearca sa trimiti formularul fara CSS-ul si JS-ul nostru de la Wizard si vezi daca merge, macar sa identificam daca e de la noi problema. Astept raspunsul tau si vedem dupa ce mai putem verifica.
7 years ago

radu.s
  • downloaded
7 years ago

Am rezolvat, mersi de raspuns. Am scos vallue="xyz" de la fiecare input si am schimbat input type la check box. La submit se primeste &variabila=on daca este selectat, daca este NULL nu se primeste... Totul e ok, mersi.

park.hyunsoo
  • downloaded
7 years ago

Hello? very nice work u were done and i just bought it. but I just looked over your javascript code and i think that there is no way to make several radio button groups in one wizard-card. is it right?

ikbel
  • downloaded
7 years ago

very good job !

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

Hi, I just changed the default purple theme to blue, but the button remains purple.. Any idea?

alexpaduraru
  • owner

@balazs.horvath thank you for using our product. Please use the btn example color classes from the documentation like "btn-info" "btn-danger" etc. Best, Alex!
7 years ago

tholthoeun.chansovann
  • downloaded
7 years ago

Thank for sharing @alexpaduraru and @dragosct

alexpaduraru
  • owner

@tholthoeun.chansovann you're welcome! :D
7 years ago

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