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,890
Version
1.0.2
Changelog
Updated
8 years ago
Released
9 years ago
Reviews
Star
Handcrafted Elements
0
Customized Plugins
0
Example Pages
0
Community Support
Documentation
Fully Responsive

Trusted by 2,791,295 developers and these companies

Unlock the Full Power of the Creative Tim Ecosystem

One subscription to design pixel-perfect UIs, automate with AI, and scale your delivery.

Basic

Basic Access Pass

Billed $199 /yr (equivalent $16.58/mo)
$29
/mo
  • Creative Tim UI - 300+ shadcn/ui Blocks
  • Material Tailwind PRO
  • David UI PRO
  • Creative Tim Club (130+ Templates)
  • Roots of UI/UX Design Book PDF
  • Product Updates
  • Community Access

Secured Payment by Paddle. Accepted:

If you are a registered company inside the EU you can add your VAT ID during checkout.

Frequently asked questions

You can use our products to create an application where the end user is charged with a monthly/annually subscription plan (SaaS - Software as a Service).
The Freelancer license is aimed at people who work on their own. It grants you the right to use the purchased product only for one project (either yours or for a client). This license is not compatible with SaaS-based projects.

The Startup license is aimed at smaller teams. It grants you and your team (up to 5 people) the right to use the purchased product only for one project (either yours or for a client). This license is not compatible with SaaS-based projects.

The Company license is aimed at agencies or larger teams. It grants you the right to create other licensed products base on the template that you purchase form us. This license it's compatible with SaaS-based projects.

The Enterprise license is aimed at large companies with multiple projects. It grants you the right to create any kind of software, SaaS, digital products and sell them. For restrictions, please check here

Also, the differences between our 3 types of Licenses is given by the Tech Support / Free Updates availability and Team Size.

More info here.
The differences between the Free and Pro products consists of the number of components, plugins, sections, pages in each.

More info here.
You can upgrade from one license plan to the next one whenever you want simply by paying the cost difference. You only have to send us an email in which you specify the product that you have and the Order ID. We will give you an unique coupon for the upgrade.

More info here.
Yes, of course! You can use the PRO product for an open source project if you add in the Readme file (on github) or in the description of your product that you built the project using “X product from Creative Tim” and a link to the product page.

More info here.
You don't have any restrictions using the Enterprise License; you just cannot create products or businesses that are in direct competition to us using our products:

  • You can’t re-distribute the Item as stock, in a tool or template, or with source files. You can’t do this with an Item either on its own or bundled with other items. You can’t re-distribute or make available the Item as-is or with superficial modifications. For example: You can’t license an item and then make it available as-is on your website for your users to download.

  • You can’t use the Item in any application allowing an end-user to customize a digital or physical product to their specific needs, such as an “on-demand”, “made to order” or “build it yourself” application. You can use the Item in this way only if you purchase a separate License for each final product incorporating the Item that is created using the application. For example: you can't create a website builder.
Depending on the License you purchase, you can use our products to either code a website/web application for you, for a client, or for multiple clients, which will be hosted on one or multiple domains:

  • For example, if you purchased the Freelancer License or Startup License, you can create only one website (for you or a client). Same, if you have multiple subdomains, like "test.yoursite.com" or "dev.yoursite.com", you can use the Freelancer License or Startup License.

  • If you want to create multiple websites, you will need a bigger License (like Company or Enterprise). Same, if you have a complex application like a SaaS and have "client1.yoursite.com" and "client2.yoursite.com" and "clientx.yoursite.com", you will need a multi-domain License like Company or Enterprise.
Depending on the License type you purchased, one or more developers (from your team, for example) can access the product:

  • If you purchased the Freelancer License, only you (one developer) can use the product.

  • If you purchased the Startup License, up to 5 developers (including you) can use the product.

  • If you purchased the Company License, up to 20 developers (including you) can access the product.

  • If you purchased the Enterprise License, you can work with a bigger team - more than 20 developers can access the product.
Here are the steps to give product access to your team members.
It consists of the product technical manuals like getting started, build tools, and it also describes every component with code examples.
It means that you receive access to the entire code for HTML, JS, and SCSS files depending on the different packages of each product.
When you buy our products you have access to our Support Team so you can submit any ticket to us regarding product functionalities and bug fixes (learning and tutorials related requests are not included). You will get responses directly from the product’s creators in 24 hours for regular Support and in a couple of hours for Priority Support (during business days).
Depending on your license type, you have a determined period when you receive product updates that include bug fixes and new features.

More info here.
Please send us an email at [email protected]. We will send you an upgrade coupon for your desired Bundle, and you will only pay the price difference.
Yes, you can. It is available for all Licenses type as long as the support included in the License is still valid.

More info here.

We are here to help you!

87 Web Developers commented on this product

pruneanusergiu
  • downloaded
9 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?
9 years ago

pruneanusergiu
  • downloaded
9 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!
9 years ago

pruneanusergiu
  • downloaded
9 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.
9 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.
9 years ago

radu.s
  • downloaded
9 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!
9 years ago

radu.s
  • downloaded
9 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.
9 years ago

radu.s
  • downloaded
9 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
9 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
9 years ago

very good job !

balázs.horváth
  • downloaded
9 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!
9 years ago

tholthoeun.chansovann
  • downloaded
9 years ago

Thank for sharing @alexpaduraru and @dragosct

alexpaduraru
  • owner

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

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