Wizard

Basic Wizard
Show Code

Personal Information

Personal Information

Try the keyboard navigation by clicking arrow left or right!

Billing Information

Billing Information

Wonderful transition effects.

Payment Details

Payment Details

The next and previous buttons help you to navigate through your content.

                    
        <div id="wizard">
        <h3>Personal Information</h3>
        <div class="border mb-0">
        <h5>Personal Information</h5>
        <p>Try the keyboard navigation by clicking arrow left or right!</p>
        </div>
        <h3>Billing Information</h3>
        <div class="border mb-0">
        <h5>Billing Information</h5>
        <p>Wonderful transition effects.</p>
        </div>
        <h3>Payment Details</h3>
        <div class="border mb-0">
        <h5>Payment Details</h5>
        <p>The next and previous buttons help you to navigate through your content.</p>
        </div>
        </div>  
                    
                    
        <!-- Script -->
        <script>
        $('#wizard').steps({
        headerTag: 'h3',
        bodyTag: 'div',
        autoFocus: true,
        titleTemplate: '<span class="wizard-index">#index#</span> #title#'
        });
        </script>
                    
                  
Vertical Wizard
Show Code

Personal Information

Personal Information
Looks good!
Looks good!

Billing Information

Billing Information

Wonderful transition effects.

Payment Details

Payment Details

The next and previous buttons help you to navigate through your content.

                    
        <div id="wizard-vertical">
        <h3>Personal Information</h3>
        <section class="border mb-0">
        <h5>Personal Information</h5>
        <form id="form1">
        <div class="form-group wd-xs-300">
        <label>First name</label>
        <input type="text" class="form-control" placeholder="First name" required>
        <div class="valid-feedback">
          Looks good!
        </div>
        </div>
        <div class="form-group wd-xs-300">
        <label>Last name</label>
        <input type="text" class="form-control" name="lastname" placeholder="Enter lastname" required>
        <div class="valid-feedback">
          Looks good!
        </div>
        </div>
        </form>
        </section>
        <h3>Billing Information</h3>
        <section class="border mb-0">
        <h5>Billing Information</h5>
        <p>Wonderful transition effects.</p>
        </section>
        <h3>Payment Details</h3>
        <section class="border mb-0">
        <h5>Payment Details</h5>
        <p>The next and previous buttons help you to navigate through your content.</p>
        </section>
        </div>
                    
                    
        <!-- Script -->
        <script>
        $("#wizard-vertical").steps({
        headerTag: 'h3',
        bodyTag: 'section',
        autoFocus: true,
        titleTemplate: '<span class="wizard-index">#index#</span> #title#',
        stepsOrientation: 'vertical'
        });
        </script>