• Profile page consists of several sections and plugins.
    For more information about each plugin please refer to its relevant section.
  • Profile picture is .img-responsive inside a .profile-picture :
        <img src="path/to/profile-pic.jpg" alt="Alex's Avatar" class="img-responsive" id="avatar" />
  • Profile contact info is inside .profile-contact-links which contains optional .profile-contact-links and .profile-social-links:
  • Profile info fields are inside .profile-user-info with optional .profile-user-info-striped class:
  • Profile activity is inside .profile-feed with .profile-activity items:
    user avatar Name
  • Profile friends list which is inside .profile-users and consists of .itemdiv.memberdiv items with .user, .body and .popover parts:
    With some javascript code, you can dynamically change the popover's direction to right or left:
    $('.memberdiv').on('mouseenter touchstart', function(){
       var $this = $(this);
       var $parent = $this.closest('.tab-pane');//or other relevent parent
       var off1 = $parent.offset();
       var w1 = $parent.width();
       var off2 = $this.offset();
       var w2 = $this.width();
       var place = 'left';
       if( parseInt(off2.left) < parseInt(off1.left) + parseInt(w1 / 2) ) 
             place = 'right';
       $this.find('.popover').removeClass('right left').addClass(place);
     .on('click', function(e) {
  • Skill progress bars are inside .profile-skills with following markup:
    PHP & MySQL 70%