Introduction:

Free download responsiv user profile template using html, css, jquery and bootstrap. You find with our template all the components so that you can display your customers on your site. First of all, a menu at your disposal, which contains a backgroud image, user image, and social media links. Then, in terms of the content of the user in question, you find a view list, where each view item list is compsé by an icon, label and content description of the item. Finally, you find a simple form, which sends a private message to your users. 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: How to use the user profile header?

You will find with the user profile header, a backgroud image, social media links, and contact information.

            
<section class="row justify-content-center user_profile">
    <div class="col-lg-8">
        <header class="container-fluid">
            <div class="row">
                <img src="img/Excursion  Baignade  Korbous.jpg"/>
            </div>
            <div class="row justify-content-between">
                <div>
                    <img src="img/user_icon.png" class="user_icon"/>
                    <strong class="user_name">
                        Mouhamed derwich
                    </strong>
                </div>
                <div>
                    <div class="social_media_links row justify-content-end">
                        <a href="">
                            <img src="img/facebook_icon.png"/>
                        </a>
                        <a href="">
                            <img src="img/twitter_icon.jpg"/>
                        </a>
                        <a href="">
                            <img src="img/google_plus_icon.png"/>
                        </a>
                    </div>
                    <div class="row justify-content-end">
                        <ul>
                            <li>
                                <img src="img/rss_icon.png"/>
                            </li>
                            <li>
                                <em>
                                    0 ENTIRES
                                </em>
                            </li>
                        </ul>
                        <ul>
                            <li>
                                <img src="img/Comments-512.png"/>
                            </li>
                            <li>
                                <em>
                                    50 COMMENTS
                                </em>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </header>
    </div>
</section>
Part 2: Add, delete, update liste view and list view item?

Our list view, serves to display the information of the user in question, in an ergonomic and responsiv way. You can adapt it to your needs of your website.

<section class="row justify-content-center user_profile">
    <div class="col-lg-8">
        <section class="container-fluid">
            <div class="row">
                <div class="col-lg">
                    <div class="container-fluid item">
                        <div class="row justify-content-between">
                            <div>
                                <img src="img/Account-2-512.png" class="icon"/>
                                <em class="label">
                                    Profile Status
                                </em>
                            </div>
                            <div>
                                <strong class="content">
                                    Activ
                                </strong>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </div>
</section>
Part 3: Add, delete, update liste view and liste view item?

You find with our index page, a list view moder, ergonimic and responsiv for the display of your list of articles by category. Each view item list is composed by an image article, title, description, price, links info. etc. You can add, modify, or delete view item lists to your website requirements.

<section class="row products_liste_view_one justify-content-between">
    <div class="col-lg">
        <header class="container-fluid">
            <div class="row justify-content-between">
                <div class="label">
                    <em>
                        Our Featured Products
                    </em>
                </div>
                <div>
                    <a href="">
                        <input value="view all" class="btn"/>
                    </a>
                </div>
            </div>
        </header>
        <section class="container-fluid">
            <div class="row justify-content-between">
                <div class="item">
                    <div class="image">
                        <img src="img/08.jpg"/>
                        <div class="links row justify-content-end">
                            <div>
                                <a href="">
                                    <img src="img/view_icon.png"/>
                                </a>
                                <a href="">
                                    <img src="img/like_icon.png"/>
                                </a>
                            </div>
                        </div>
                    </div>
                    <div class="tiltle">
                        <strong>
                            2019 New FILA
                        </strong>
                    </div>
                    <div class="revious row justify-content-center">
                        <div>
                            <img src="img/star-icon.png"/>
                            <img src="img/star-icon.png"/>
                            <img src="img/star-icon.png"/>
                            <img src="img/star-icon.png"/>
                            <img src="img/star-icon.png"/>
                        </div>
                        <div class="label">
                            (254) revious
                        </div>
                    </div>
                    <div class="prise">
                        <em>
                            £145.24
                        </em>
                    </div>
                </div>
            </div>
        </section>
    </div>
</section>