### Profile

- 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`:

              Add as a friend

- Profile info fields are inside `.profile-user-info` with optional `.profile-user-info-striped` class:

            field name

            field value

- Profile activity is inside `.profile-feed` with `.profile-activity` items:

              Name
               Time

- Profile friends list which is inside `.profile-users` and consists of `.itemdiv.memberdiv` items with `.user`, `.body` and `.popover` parts:

                    user name

                  occupation

  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) {
          e.preventDefault();
       });

- Skill progress bars are inside `.profile-skills` with following markup:

      	   PHP & MySQL
      	   70%