Introduction:

Free login index page, with responsiv web design, using jquery and bootstrap. Our index page is compsé by a navigation bare, responsiv with bootstrap, for a good experience of the ergonomic navigation on your web site, blog, ecommerce or magazine. You also find a registration form, with a user name, last name, password and a description of the user in question, you can add, modify or delete the form controll to your needs of the site. With the login form, you will find a short description to explain to your visitor the importance of registering on your website. 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: Use the template layout?

The layout of our template is with the bootstrap grid system. you can easily develop a web page using this system. You find three main element: The header, The login form and the login description form.

            
<body class="container-fluid">
    <!-- login index page nav bar -->
    <header class="row justify-content-between">
    </header>
    
    <section class="row justify-content-center form_login">
        <!-- login index page form login -->
        <div class="col-lg-4">
        </div>
        
        <!-- login index page form login description -->
        <div class="col-lg-4">
        </div>
    </section>
</body>
Part 2: How add, delete, nav bar item?

Our bare of navigation is developped by twitter bootstrap nav bar, it is compsed by nav bar item, each nav bar item contains a link to the page you can add.

<body class="container-fluid">
    <!-- login index page nav bar -->
    <header class="row justify-content-between">
        <div>
            <ul class="nav">
                <!-- login index page nav bar item -->
                <li class="nav-item">
                    <!-- nav bar item links -->
                    <a class="nav-link active" href="#">Active</a>
                </li>
            </ul>
        </div>
    </header>
</body>