Introduction:

Download free, user profile template, with bootstrap and jquery, with responsiv web design. You will find with our template a modern and ergonomical user profile, which contains all the necessary components so that you can manage the display of the users of your website. The template is compsé by two main elements. The first to display the basic information of the user in question, for example: Image profile, user name, description and contact info. The second is a tab component, which contains a bare of navigation, of which each item you can put all the information you want, with the style for your choice. 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 using user profile layout?

Using bootstrap grid layout, you find two main elements with our template. One for displaying the basic information of the user in question. And the second is a tab component for displaying personalized information.

            
<!-- user profile -->
<section class="row user_profile justify-content-center">
    <!-- user profile basic info -->
    <div class="col-lg-3 basic_info">
    </div>
    <!-- user profile tab information -->
    <div class="col-lg-7 user_profile_body">
    </div>
</section>
                        
Part 2: How add user profile basic info?

The user profile basic infor component consists of: The image profile, User name, Location and Work, About description, and contact info.

<!-- user profile -->
<section class="row user_profile justify-content-center">
    <!-- user profile basic info -->
    <div class="col-lg-3 basic_info">
        <!-- user image -->
        <div class="user_image">
            <img src="img/61756570_1134110166775593_2241271401438773248_n.jpg"/>
        </div>
        <!-- user name -->
        <div class="user_name">
            <strong>
                Mouhamed Ali Derwich
            </strong>
        </div>
        <ul>
            <!-- location info -->
            <li>
                <img src="img/locate_gps_navigation_pin_point_location_icon-icons.com_59906.png"/>
                <span>
                    San franchisko, California, USA
                </span>
            </li>
            <!-- work info -->
            <li>
                <img src="img/portfolio_78923.png"/>
                <span>
                    Webdesign and developpement
                </span>
            </li>
        </ul>
        <div class="flowers_links">
            <input type="button" value="Following" class="btn"/>
            <input type="button" value="Followers" class="btn"/>
        </div>
        <p>
            <!-- about description -->
        <span class="basic_info_label">
            ABOUT
        </span>
        <br/>
        Lorem Ipsum has been the industry's as
        dummy text ever since the 50, printer took a galley.
        has been the industry's ashas been the industry's as
        dummy text ever since the 50, printer took a galley.
        </p>            
    </div>
</section>