creativetimofficial / bootstrap-wizard Goto Github PK

Free Bootstrap Wizard

License: MIT License

CSS 23.72% HTML 36.80% JavaScript 15.49% SCSS 23.99%

bootstrap-wizard's Introduction

Free Bootstrap Wizard

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. You can see it here, 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:

List Your Boat

List Your Place

Links

Download from: Creative Tim Live Preview: Live Preview

Quick start

Quick start options:

Download from Github.
Download from Creative Tim.
Clone the repo: git clone https://github.com/creativetimofficial/bootstrap-wizard.git.

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
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: http://www.creative-tim.com/products

Tutorials: https://www.youtube.com/channel/UCVyTG4sCw-rOvB9oHkzZD1w

Freebies: http://www.creative-tim.com/products

Affiliate Program (earn money): http://www.creative-tim.com/affiliates/new

Social Media:

Twitter: https://twitter.com/CreativeTim

Facebook: https://www.facebook.com/CreativeTim

Dribbble: https://dribbble.com/creativetim

Google+: https://plus.google.com/+CreativetimPage

Instagram: https://instagram.com/creativetimofficial

bootstrap-wizard's People

Contributors

Stargazers

Watchers

Forkers

renderbittechnologies ensemblelab conacelelena nangal shekarsiri justinsomers arslan-mumtaz iamwebwiz deve0ps fork-zone ashitagoyal r0b3rdv shetch hobo71 jonathanteran kilonzowambua premkasula tutorfish kyleydev francelwebdev alaomichael pbehnke dalalsunil1986 rdelangelhmx cienciadedadosebigdata jordanlanch nicodvl aresgrouptech edsonjorgef1 sirkiosta mawuva yahyaben akmalhwk sproinfo johns-vanilla-php johaajnr layediole10 younes-sh taylormhicks90 sanjaysankar1128 armandcoetzer sinkam0000 kaepaul touchmeifyoucan ssonsal mattdanielbrown 1abdossamad aorborc dataegconsulting vexa256 amalek-f umarbinbashir thejohncode coffekoder prajwalskanda bala-rao-au9 rrnjsnvldz surajmillicent freelancerswaminathan cgalvarino jbalthis mohammadsiddiqueps mocroski hobert-rj philipkaare somasongoka nischalhost werika831 brian-d-severson arif853 jjtarazona pudinmah anumber8

bootstrap-wizard's Issues

I have added the Input field but not getting the error message..

//code for validator
// Code for the Validator
var $validator = $('.wizard-card form').validate({
rules: {
firstname: {
required: true,
minlength: 3
},
lastname: {
required: true,
minlength: 3
},
password : {
required: true,
minlength: 5
},
email: {
required: true,
minlength: 3,
}
}
});
//wizar card for input fields

                  <div class="wizard-header">
                      <h3>
                         <b>Sign up</b> <br>
                      </h3>
                  </div>
                        <div class="tab-pane" id="details">
                          <div class="row">
                              <h4 class="info-text"> Let's start with the basic informations</h4>
                              
                              <div class="col-sm-6 col-sm-offset-1">
                                  <div class="form-group">
                                    <label>First Name <small>(required)</small></label>
                                    <input name="firstname" type="text" class="form-control" placeholder="First Name">
                                  </div>
                                  <div class="form-group">
                                    <label>Last Name <small>(required)</small></label>
                                    <input name="lastname" type="text" class="form-control" placeholder="Last Name">
                                  </div>
                                   <div class="form-group">
                                    <label>Password <small>(required)</small></label>
                                    <input name="password" type="password" class="form-control" placeholder="Enter Password">
                                  </div>
                                  <div class="form-group">
                                      <label>Email <small>(required)</small></label>
                                      <input name="email" type="email" class="form-control" placeholder="[email protected]">
                                  </div>
                              </div>
                          
                          </div>

                           <button name="submit" type="submit" class="btn btn-success" style="margin-left: 40px;
margin-top: 39px;"><i class="icon-save icon-large"></i>&nbsp;Sign Up</button>
                        </div>
                        </form>      
        </div> <!-- wizard container -->
    </div>[

](url)

NavBar Movement Distorts Upon Inserting Text Editor Plugin

Hello,

I currently am running into an issue where the navbar's movement distorts upon switching to a panel that has my custom text editor on it. When I remove the text editor from my html, the wizard returns back to it's normal state. I am using the text editor plugin, summernote.

The tab for the middle view (the one that is causing the issue) is in a partial view.

        '<div class="col-md-10">
            <textarea id="taBody"></textarea> @* This is where the text editor is loaded, displays fine when this line is removed.*@
        </div>
        <div class="col-md-2">
            <input type="button" id="editBody" onclick="bodyEditor()" class="btn btn-default" value="Edit" />
            <input type="button" id="saveBody" onclick="bodySave()" class="btn btn-default" value="Save" />
        </div>'

Any thoughts on what may be happening? Thanks!

test task 2 zube

Please Update this to latest Bootstrap 4.3

I like this plugin but it is not updated. Please Update this to latest Bootstrap 4.3

Issue with <label> tag

Hi,

It looks like there is a typo at https://github.com/timcreative/bootstrap-wizard/blob/master/index.html#L134.

It should be <label>Street Name</label> not <labe>Street Name</label>; l is missing.

Background image resizing issue

Hi! When resizing the window, the background image doesn't cover completely at the bottom.

I would recommend the following:

Remove the inline style at <div class="image-container set-full-height" style="background-image: url('assets/img/wizard.jpg')">
And put a block style as

<style>
        body {
            background: url('assets/img/wizard.jpg') no-repeat center center fixed;
            -webkit-background-size: cover;
            -moz-background-size: cover;
            -o-background-size: cover;
            background-size: cover;
        }
</style>

It worked for me.

test task 1 zube

Navigation Widths not sizing properly in JS

Since the script is finding just 'li" in the document, and I have other 'li's' in my content, the script is reading all of the 'li' elements and sizing accordingly, leaving my navigation hover severely smaller than it should be. I tried putting a class on the li's for the navigation in order to separate this li from the others I have in the content, but it's not working. Any suggestions?

IRT:
onInit: function(tab, navigation, index) {

        //check number of tabs and fill the entire row
        var $total = navigation.find('li').length;
        $width = 100 / $total;
        var $wizard = navigation.closest('.wizard-card');

        $display_width = $(document).width();

        if ($display_width < 600 && $total > 3) {
            $width = 50;
        }

        navigation.find('li').css('width', $width + '%');
        $first_li = navigation.find('li:first-child a').html();
        $moving_div = $('<div class="moving-tab">' + $first_li + '</div>');
        $('.wizard-card .wizard-navigation').append($moving_div);
        refreshAnimation($wizard, index);
        $('.moving-tab').css('transition', 'transform 0s');
    },