https://github.com/creativetimofficial/bootstrap-wizard
Free Bootstrap Wizard
https://github.com/creativetimofficial/bootstrap-wizard
Last synced: about 1 month ago
JSON representation
Free Bootstrap Wizard
- Host: GitHub
- URL: https://github.com/creativetimofficial/bootstrap-wizard
- Owner: creativetimofficial
- License: mit
- Created: 2015-09-16T16:54:26.000Z (about 10 years ago)
- Default Branch: master
- Last Pushed: 2024-07-24T07:15:59.000Z (about 1 year ago)
- Last Synced: 2025-04-19T08:10:17.831Z (6 months ago)
- Language: HTML
- Size: 4.12 MB
- Stars: 46
- Watchers: 6
- Forks: 86
- Open Issues: 7
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
# [Free Bootstrap Wizard](http://demos.creative-tim.com/wizard-demo-register)
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
This is a javascript plugin, original open sources by [Vadim Vincent Gabriel](http://vadimg.com/twitter-bootstrap-wizard-example/). You can see it [here](http://vadimg.com/twitter-bootstrap-wizard-example/), along with its basic functionality. We have personally used it in projects and benefited tremendously from it.
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:
[Register User Flow](http://demos.creative-tim.com/wizard-demo-register)
[List Your Boat](http://demos.creative-tim.com/wizard-demo-list-boat)
[List Your Place](http://demos.creative-tim.com/wizard-demo-list-place)
## Links
Download from: [Creative Tim](http://www.creative-tim.com/product/bootstrap-wizard)
Live Preview: [Live Preview](http://demos.creative-tim.com/wizard-demo-register)
## Quick start
Quick start options:
- [Download from Github](https://github.com/creativetimofficial/bootstrap-wizard.git).
- [Download from Creative Tim](http://www.creative-tim.com/product/bootstrap-wizard).
- Clone the repo: `git clone https://github.com/creativetimofficial/bootstrap-wizard.git`.
## Deploy
:rocket: You can deploy your own version of the template to Genezio with one click:
[](https://app.genez.io/start/deploy?repository=https://github.com/creativetimofficial/bootstrap-wizard&utm_source=github&utm_medium=referral&utm_campaign=github-creativetim&utm_term=deploy-project&utm_content=button-head)
### What's included
Within the download you'll find the following directories and files:
```
├── assets
│ ├── css
│ │ ├── bootstrap.min.css
│ │ ├── demo.css
│ │ └── gsdk-bootstrap-wizard.css
│ ├── img
│ ├── js
│ │ ├── bootstrap.min.js
│ │ ├── gsdk-bootstrap-wizard.js
│ │ ├── jquery-1.10.2.js
│ │ ├── jquery-2.2.4.min.js
│ │ ├── jquery.bootstrap.wizard.js
│ │ └── jquery.validate.min.js
│ └── scss
│ ├── gsdk-bootstrap-wizard
│ └── gsdk-bootstrap-wizard.scss
├── index.html
├── wizard-list-boat.html
└── wizard-list-place.html
```
### Version Log
V1.0 08 Aug '14 [initial release]
V1.1 17 Sep '15
- Added checkboxes with big icon design (same as the radio)
- Update to Bootstrap 3.3.5
- Update to Font Awesome 4.4.0
- Added validation on fields with [jquery.validation.js](http://jqueryvalidation.org/documentation/)
- Fix bug when adding Bootstrap Datepicker
- Fix bug for nav steps width on small screens(< 600px)
- Change in file structure
V1.1.1 Mar '17 [current version]
- switched to MIT License
### License
- Copyright 2017 Creative Tim (http://www.creative-tim.com)
- Licensed under MIT (https://github.com/creativetimofficial/bootstrap-wizard/blob/master/LICENSE.md)
## Useful Links
More products from Creative Tim:
Tutorials:
Freebies:
Affiliate Program (earn money):
Social Media:
Twitter:
Facebook:
Dribbble:
Google+:
Instagram: