Introduction:

Here you find a free form wizard step by step, with jquery plugins and bootstrap, with responsiv web design. Our form is by particular, it is used for the reservation of the champre in a hotels, Then you find four steps, one is for the validation of the date check in and chek out, and for the seizure of the number of the room. The step two, validates the choice of type and service rooms. The step three, for the validation of the information of the user, are first name, last name, phone number, email, location. The last steps for the confirmation of the data. Test a demo version on webi4u.com, and download the full version on our github account

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: Add, delete, update nav bar item?

The navigation bar of our index page is very simple, it is composed by div and bind whose display is inline block

            
<body class="container-fluid">
    <header class="row justify-content-between">
        <!-- nav bar left --->
        <nav class="nav_bar">
            <!-- nav bar item -->
            <div class="nav_item">
                <!-- nav bar item label -->
                HOMEPAGE
            </div>    
        </nav>
    </header>
</body>
Part 2: How display large items on the page?

You can also display articles in close-up with a responsiv user experience with all the resolution, mobile, pc and tablet

<body class="container-fluid">
    <header class="row justify-content-between">
        <!-- article in a large plant -->
        <section class="row article_grand_plant">
            <div class="col-lg image">
                <!-- article image  --> 
                <img src="img/1.png"/>
            </div>
            <div class="col-lg-3 description">
                <!-- article description -->
            </div>
        </section>
    </header>
</body>
Part 2: How display large items on the page?

You find with our template, lists view moder and responsiv for the display of the articles in form of the list view item with image, title, taken and the icons links.

<body class="container-fluid">
    <header class="row justify-content-between">
        <!-- article in a large plant -->
        <section class="row article_grand_plant">
            <div class="col-lg image">
                <!-- article image  --> 
                <img src="img/1.png"/>
            </div>
            <div class="col-lg-3 description">
                <!-- article description -->
            </div>
        </section>
    </header>
</body>