Bootstrap WizardThis tutorial was made to make the integration as easy as possible.

We restyled the classic Bootstrap Wizard and made it look fresh an bright. The base for the style is the Get Shit Done Kit. You can see the files that you need to import, once you have downloaded the bundle from Creative Tim

        

              <link href="assets/css/bootstrap.min.css" rel="stylesheet" />
              <link href="assets/css/gsdk-base.css" rel="stylesheet" />

              <script src="assets/js/jquery-1.10.2.js"></script>
              <script src="assets/js/bootstrap.min.js"></script>
              <script src="assets/js/jquery.validate.min.js"></script>
              <script src="assets/js/jquery.bootstrap.wizard.js"></script>
              <script src="assets/js/wizard.js"></script>

        

This is a Javascript plugin that you have to call in your page. The code for initialising the wizard can be found in the 'wizard.js' file and looks like this:

$('.wizard-card').bootstrapWizard({
        'tabClass': 'nav nav-pills',
        'nextSelector': '.btn-next',
        'previousSelector': '.btn-previous',

         onInit : function(tab, navigation, index){

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

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

           console.log($total);

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

           navigation.find('li').css('width',$width + '%');

        },
        onNext: function(tab, navigation, index){
            if(index == 1){
                return validateFirstStep();
            } else if(index == 2){
                return validateSecondStep();
            } else if(index == 3){
                return validateThirdStep();
            } //etc.

        },
        onTabClick : function(tab, navigation, index){
            // Disable the posibility to click on tabs
            return false;
        },
        onTabShow: function(tab, navigation, index) {
            var $total = navigation.find('li').length;
            var $current = index+1;

            var wizard = navigation.closest('.wizard-card');

            // If it's the last tab then hide the last button and show the finish instead
            if($current >= $total) {
                $(wizard).find('.btn-next').hide();
                $(wizard).find('.btn-finish').show();
            } else {
                $(wizard).find('.btn-next').show();
                $(wizard).find('.btn-finish').hide();
            }
        }
    });
         

Besides the default style, we added 5 new colors: blue, azzure, green, orange, red. If you want to use one of them, you can use the class for the chosen color 'ct-wizard-{color}'.

Many thanks to our friend for open sourcing the base for this wizard. More details can be found here here.

Many thanks for the awesome jQuery Validate Library. More details can be found here here.

Get more useful items for Bootstrap on Creative Tim.