Introduction:

Download free, our e-commerce webdesign, with responsiv webdesign, using html, css, jquery and bootstrap. Here you find an index page for an e-commerce website, with a bare header navigation, for a good browsing experience. In a row, you can display large items on the page. Finally, you can list your articles on a modern list view, which contains for each view item list an image article, title, taken and lients icons. Test a demo version on webi4u.com, and download the full version for free 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>