Introduction:

You search with here a simple user profile for a forum, blog, etc., web site, using jquery and bootstrap, with responsiv web design. Our user profile theme is composed by four main elements: The first element is the image of the profile. The second is a bare action on the profile. The third is a simple bare of navigation, and the last one is a list view for the display of the main information in particular: name, birtgday, city, country, etc. In order for you to modify the template for your needs, read our guide at the bottom of the article. Finally test a demo version on the webi4u.com website, and download the free template on github.

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: User profile theme layout?

            
<section class="row justify-content-center user_profile">
    
  <div class="col-lg-9">
      
   <div class="container-fluid">
       
    <div class="row">   
        
     <div class="col-lg item_left">
     
         //layout for the image profile
     
     </div>
     
     <div class="col-lg item_right">
     
         // layout for the nav bar and user profile info
     
     </div>
        
    </div>
       
   </div>
      
  </div>
    
</section>
Part 2: How modify profile picture?

In this part, you can put the name of the profile in question, info link, action item. The info link part for displaying hyperlinks, and the action item part, allows you to display custom links, to apply actions on the profile in question.

<div class="col-lg item_left">
<div class="container-fluid">
    <div class="row">
        <div class="col-lg">
            <h2 class="name">
                // user profile nam
            </h2>
            <ul class="info_link">
                // info link one
                <li>
                    <a href="">
                        link item one
                    </a>
                </li>
                // info link two
                <li>
                    <a href="">
                        link item tow
                    </a>
                </li>
            </ul>
        </div>
    </div>
</div>
<div class="container-fluid">
    <div class="row">
        <div class="col-lg" style="padding: 0px">
            // user profile image
            <img src="img/your-user-profile-image" class="profile_image"/>
            // user profile action
            <ul class="action_item">
                // item one
                <li>
                    <a href="">
                        item one link
                    </a>
                </li>
                // item two
                <li>
                    <a href="">
                        item two link
                    </a>
                </li>
            </ul>
        </div>
    </div>
</div>
</div>                            
Part 3: How modify the user profile nav bar?

With the bare navigation of our user profile template, you can add links to other features

<div class="col-lg item_right">
    // user profile nav bar
    <nav class="container-fluid">
        <div class="row">
            // nav bar item
            <div class="item">
                // nav bar item link
                <a href="">
                    <input type="button" class="btn" value="// item value"/>
                </a>
            </div>
        </div>
    </nav>
</div>                            
Part 4: How update, insert, delete, user profile information item.?

You can display the user profile information in question: name, job, city, country, and so on.

<div class="col-lg item_right">
    <section class="container-fluid">
        <div class="row">
            <div  class="col-lg title" style="padding: 0px;padding-right: 10px">
                <div>
                    <em>Name</em>
                </div>
            </div>
            <div class="col-lg content" style="padding: 0px">
                <div>
                    <strong>Mouhamed ali derwich</strong>4
                </div>
            </div>
        </div>
    </section>
</div>