Introduction:

Download free bootstrap form wizard step by step, with responsiv web design. Our form contains four steps, one is for account training, the second for the user's personal information, the third for banking data, and the last for your user's photo profile upload. . The form is extensible, which you can adapt to your functional needs of your website. Test a demo version on webi4u.com, and download the full version on github

Plant of the guide

At the end of this course, you will be able to:

Prerequisites: (5)

Before starting this guide, you must already have the following skills:

Part 1: Form wizard layout?

 
<section class="row justify-content-center form_wizard">
    <div class="col-lg-4">
        // form wizard header
        <header class="container-fluid">
        </header>
        
        // form wizard body content
        <section class="container-fluid">
        </section>
        
        // form wizard footer
        <footer class="row justify-content-end">
        </footer>
    </div>
</section>        
Part 2: How update, delete, add, form wizard header?

the form step header composed by four element, each element contains a step icon and a step title is formed of the div.

<section class="row justify-content-center form_wizard">
    <div class="col-lg-4">
        // form wizard header
        <header class="container-fluid">
            <div class="row justify-content-between">
                // form wizard header step item
                <div class="item loding">
                    // item icon
                    <img src="img/lock_icon.png" 
                        chek-img="img/lock_icon_check.png"
                        init-img="img/lock_icon.png"
                    />
                    // item title
                    <strong>
                        Account
                    </strong>
                </div>
           </div>
    </div>
</section>
Part 3: How, upadate, delete, add form wizard body item?

nothing special, regarding the party form wizard body, it is necessary to put the list of your form in this part.

<section class="row justify-content-center form_wizard">
    <div class="col-lg-4">
        // form wizard body
        <section class="container-fluid">
            <div class="col-lg">
                <form>
                    <!-- form wizard item -->
                    <div class="container-fluid form_item">
                        // form item header
                     <div class="row justify-content-between">
                         // item title
                         <div>
                             <strong>
                                 Account information:
                             </strong>
                         </div>
                         // item step number
                         <div>
                            <em>
                                Step 1/4
                            </em>
                         </div>
                     </div>
                    </div>
                    // item form control
                    <div class="row form_control">
                    </div>
                </form>        
            </div>
        </section>
</section>