Bootstrap snippet: User Profile with tabs

designed to help people of all skill levels - designer or developer, huge nerd or early beginner.
copy and paste the code. Use it as a complete kit or use it to start something more complex.
tags: user,profile,tabs,social network,gallery,friends,feed



<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet"> <div id="user-profile-2" class="user-profile"> <div class="tabbable"> <ul class="nav nav-tabs padding-18"> <li class="active"> <a data-toggle="tab" href="#home"> <i class="green ace-icon fa fa-user bigger-120"></i> Profile </a> </li> <li> <a data-toggle="tab" href="#feed"> <i class="orange ace-icon fa fa-rss bigger-120"></i> Activity Feed </a> </li> <li> <a data-toggle="tab" href="#friends"> <i class="blue ace-icon fa fa-users bigger-120"></i> Friends </a> </li> <li> <a data-toggle="tab" href="#pictures"> <i class="pink ace-icon fa fa-picture-o bigger-120"></i> Pictures </a> </li> </ul> <div class="tab-content no-border padding-24"> <div id="home" class="tab-pane in active"> <div class="row"> <div class="col-xs-12 col-sm-3 center"> <span class="profile-picture"> <img class="editable img-responsive" alt=" Avatar" id="avatar2" src="http://bootdey.com/img/Content/avatar/avatar6.png"> </span> <div class="space space-4"></div> <a href="#" class="btn btn-sm btn-block btn-success"> <i class="ace-icon fa fa-plus-circle bigger-120"></i> <span class="bigger-110">Add as a friend</span> </a> <a href="#" class="btn btn-sm btn-block btn-primary"> <i class="ace-icon fa fa-envelope-o bigger-110"></i> <span class="bigger-110">Send a message</span> </a> </div><!-- /.col --> <div class="col-xs-12 col-sm-9"> <h4 class="blue"> <span class="middle">John Doe</span> <span class="label label-purple arrowed-in-right"> <i class="ace-icon fa fa-circle smaller-80 align-middle"></i> online </span> </h4> <div class="profile-user-info"> <div class="profile-info-row"> <div class="profile-info-name"> Username </div> <div class="profile-info-value"> <span>alexdoe</span> </div> </div> <div class="profile-info-row"> <div class="profile-info-name"> Location </div> <div class="profile-info-value"> <i class="fa fa-map-marker light-orange bigger-110"></i> <span>Netherlands</span> <span>Amsterdam</span> </div> </div> <div class="profile-info-row"> <div class="profile-info-name"> Age </div> <div class="profile-info-value"> <span>38</span> </div> </div> <div class="profile-info-row"> <div class="profile-info-name"> Joined </div> <div class="profile-info-value"> <span>2010/06/20</span> </div> </div> <div class="profile-info-row"> <div class="profile-info-name"> Last Online </div> <div class="profile-info-value"> <span>3 hours ago</span> </div> </div> </div> <div class="hr hr-8 dotted"></div> <div class="profile-user-info"> <div class="profile-info-row"> <div class="profile-info-name"> Website </div> <div class="profile-info-value"> <a href="#" target="_blank">www.alexdoe.com</a> </div> </div> <div class="profile-info-row"> <div class="profile-info-name"> <i class="middle ace-icon fa fa-facebook-square bigger-150 blue"></i> </div> <div class="profile-info-value"> <a href="#">Find me on Facebook</a> </div> </div> <div class="profile-info-row"> <div class="profile-info-name"> <i class="middle ace-icon fa fa-twitter-square bigger-150 light-blue"></i> </div> <div class="profile-info-value"> <a href="#">Follow me on Twitter</a> </div> </div> </div> </div><!-- /.col --> </div><!-- /.row --> <div class="space-20"></div> <div class="row"> <div class="col-xs-12 col-sm-6"> <div class="widget-box transparent"> <div class="widget-header widget-header-small"> <h4 class="widget-title smaller"> <i class="ace-icon fa fa-check-square-o bigger-110"></i> Little About Me </h4> </div> <div class="widget-body"> <div class="widget-main"> <p> My job is mostly lorem ipsuming and dolor sit ameting as long as consectetur adipiscing elit. </p> <p> Sometimes quisque commodo massa gets in the way and sed ipsum porttitor facilisis. </p> <p> The best thing about my job is that vestibulum id ligula porta felis euismod and nullam quis risus eget urna mollis ornare. </p> <p> Thanks for visiting my profile. </p> </div> </div> </div> </div> </div> </div><!-- /#home --> <div id="feed" class="tab-pane"> <div class="profile-feed row"> <div class="col-sm-6"> <div class="profile-activity clearfix"> <div> <img class="pull-left" alt="Alex Doe's avatar" src="http://bootdey.com/img/Content/avatar/avatar1.png"> <a class="user" href="#"> Alex Doe </a> changed his profile photo. <a href="#">Take a look</a> <div class="time"> <i class="ace-icon fa fa-clock-o bigger-110"></i> an hour ago </div> </div> <div class="tools action-buttons"> <a href="#" class="blue"> <i class="ace-icon fa fa-pencil bigger-125"></i> </a> <a href="#" class="red"> <i class="ace-icon fa fa-times bigger-125"></i> </a> </div> </div> <div class="profile-activity clearfix"> <div> <img class="pull-left" alt="Susan Smith's avatar" src="http://bootdey.com/img/Content/avatar/avatar2.png"> <a class="user" href="#"> Susan Smith </a> is now friends with Alex Doe. <div class="time"> <i class="ace-icon fa fa-clock-o bigger-110"></i> 2 hours ago </div> </div> <div class="tools action-buttons"> <a href="#" class="blue"> <i class="ace-icon fa fa-pencil bigger-125"></i> </a> <a href="#" class="red"> <i class="ace-icon fa fa-times bigger-125"></i> </a> </div> </div> <div class="profile-activity clearfix"> <div> <i class="pull-left thumbicon fa fa-check btn-success no-hover"></i> <a class="user" href="#"> Alex Doe </a> joined <a href="#">Country Music</a> group. <div class="time"> <i class="ace-icon fa fa-clock-o bigger-110"></i> 5 hours ago </div> </div> <div class="tools action-buttons"> <a href="#" class="blue"> <i class="ace-icon fa fa-pencil bigger-125"></i> </a> <a href="#" class="red"> <i class="ace-icon fa fa-times bigger-125"></i> </a> </div> </div> <div class="profile-activity clearfix"> <div> <i class="pull-left thumbicon fa fa-picture-o btn-info no-hover"></i> <a class="user" href="#"> Alex Doe </a> uploaded a new photo. <a href="#">Take a look</a> <div class="time"> <i class="ace-icon fa fa-clock-o bigger-110"></i> 5 hours ago </div> </div> <div class="tools action-buttons"> <a href="#" class="blue"> <i class="ace-icon fa fa-pencil bigger-125"></i> </a> <a href="#" class="red"> <i class="ace-icon fa fa-times bigger-125"></i> </a> </div> </div> <div class="profile-activity clearfix"> <div> <img class="pull-left" alt="David Palms's avatar" src="http://bootdey.com/img/Content/avatar/avatar3.png"> <a class="user" href="#"> David Palms </a> left a comment on Alex's wall. <div class="time"> <i class="ace-icon fa fa-clock-o bigger-110"></i> 8 hours ago </div> </div> <div class="tools action-buttons"> <a href="#" class="blue"> <i class="ace-icon fa fa-pencil bigger-125"></i> </a> <a href="#" class="red"> <i class="ace-icon fa fa-times bigger-125"></i> </a> </div> </div> </div><!-- /.col --> <div class="col-sm-6"> <div class="profile-activity clearfix"> <div> <i class="pull-left thumbicon fa fa-pencil-square-o btn-pink no-hover"></i> <a class="user" href="#"> Alex Doe </a> published a new blog post. <a href="#">Read now</a> <div class="time"> <i class="ace-icon fa fa-clock-o bigger-110"></i> 11 hours ago </div> </div> <div class="tools action-buttons"> <a href="#" class="blue"> <i class="ace-icon fa fa-pencil bigger-125"></i> </a> <a href="#" class="red"> <i class="ace-icon fa fa-times bigger-125"></i> </a> </div> </div> <div class="profile-activity clearfix"> <div> <img class="pull-left" alt="Alex Doe's avatar" src="http://bootdey.com/img/Content/avatar/avatar4.png"> <a class="user" href="#"> Alex Doe </a> upgraded his skills. <div class="time"> <i class="ace-icon fa fa-clock-o bigger-110"></i> 12 hours ago </div> </div> <div class="tools action-buttons"> <a href="#" class="blue"> <i class="ace-icon fa fa-pencil bigger-125"></i> </a> <a href="#" class="red"> <i class="ace-icon fa fa-times bigger-125"></i> </a> </div> </div> <div class="profile-activity clearfix"> <div> <i class="pull-left thumbicon fa fa-key btn-info no-hover"></i> <a class="user" href="#"> Alex Doe </a> logged in. <div class="time"> <i class="ace-icon fa fa-clock-o bigger-110"></i> 12 hours ago </div> </div> <div class="tools action-buttons"> <a href="#" class="blue"> <i class="ace-icon fa fa-pencil bigger-125"></i> </a> <a href="#" class="red"> <i class="ace-icon fa fa-times bigger-125"></i> </a> </div> </div> <div class="profile-activity clearfix"> <div> <i class="pull-left thumbicon fa fa-power-off btn-inverse no-hover"></i> <a class="user" href="#"> Alex Doe </a> logged out. <div class="time"> <i class="ace-icon fa fa-clock-o bigger-110"></i> 16 hours ago </div> </div> <div class="tools action-buttons"> <a href="#" class="blue"> <i class="ace-icon fa fa-pencil bigger-125"></i> </a> <a href="#" class="red"> <i class="ace-icon fa fa-times bigger-125"></i> </a> </div> </div> <div class="profile-activity clearfix"> <div> <i class="pull-left thumbicon fa fa-key btn-info no-hover"></i> <a class="user" href="#"> Alex Doe </a> logged in. <div class="time"> <i class="ace-icon fa fa-clock-o bigger-110"></i> 16 hours ago </div> </div> <div class="tools action-buttons"> <a href="#" class="blue"> <i class="ace-icon fa fa-pencil bigger-125"></i> </a> <a href="#" class="red"> <i class="ace-icon fa fa-times bigger-125"></i> </a> </div> </div> </div><!-- /.col --> </div><!-- /.row --> <div class="space-12"></div> <div class="center"> <button type="button" class="btn btn-sm btn-primary btn-white btn-round"> <i class="ace-icon fa fa-rss bigger-150 middle orange2"></i> <span class="bigger-110">View more activities</span> <i class="icon-on-right ace-icon fa fa-arrow-right"></i> </button> </div> </div><!-- /#feed --> <div id="friends" class="tab-pane"> <div class="profile-users clearfix"> <div class="itemdiv memberdiv"> <div class="inline pos-rel"> <div class="user"> <a href="#"> <img src="http://bootdey.com/img/Content/avatar/avatar6.png" alt="Bob Doe's avatar"> </a> </div> <div class="body"> <div class="name"> <a href="#"> <span class="user-status status-online"></span> Bob Doe </a> </div> </div> <div class="popover"> <div class="arrow"></div> <div class="popover-content"> <div class="bolder">Content Editor</div> <div class="time"> <i class="ace-icon fa fa-clock-o middle bigger-120 orange"></i> <span class="green"> 20 mins ago </span> </div> <div class="hr dotted hr-8"></div> <div class="tools action-buttons"> <a href="#"> <i class="ace-icon fa fa-facebook-square blue bigger-150"></i> </a> <a href="#"> <i class="ace-icon fa fa-twitter-square light-blue bigger-150"></i> </a> <a href="#"> <i class="ace-icon fa fa-google-plus-square red bigger-150"></i> </a> </div> </div> </div> </div> </div> <div class="itemdiv memberdiv"> <div class="inline pos-rel"> <div class="user"> <a href="#"> <img src="http://bootdey.com/img/Content/avatar/avatar1.png" alt="Rose Doe's avatar"> </a> </div> <div class="body"> <div class="name"> <a href="#"> <span class="user-status status-offline"></span> Rose Doe </a> </div> </div> <div class="popover"> <div class="arrow"></div> <div class="popover-content"> <div class="bolder">Graphic Designer</div> <div class="time"> <i class="ace-icon fa fa-clock-o middle bigger-120 grey"></i> <span class="grey"> 30 min ago </span> </div> <div class="hr dotted hr-8"></div> <div class="tools action-buttons"> <a href="#"> <i class="ace-icon fa fa-facebook-square blue bigger-150"></i> </a> <a href="#"> <i class="ace-icon fa fa-twitter-square light-blue bigger-150"></i> </a> <a href="#"> <i class="ace-icon fa fa-google-plus-square red bigger-150"></i> </a> </div> </div> </div> </div> </div> <div class="itemdiv memberdiv"> <div class="inline pos-rel"> <div class="user"> <a href="#"> <img src="http://bootdey.com/img/Content/avatar/avatar2.png" alt="Jim Doe's avatar"> </a> </div> <div class="body"> <div class="name"> <a href="#"> <span class="user-status status-busy"></span> Jim Doe </a> </div> </div> <div class="popover"> <div class="arrow"></div> <div class="popover-content"> <div class="bolder">SEO &amp; Advertising</div> <div class="time"> <i class="ace-icon fa fa-clock-o middle bigger-120 red"></i> <span class="grey"> 1 hour ago </span> </div> <div class="hr dotted hr-8"></div> <div class="tools action-buttons"> <a href="#"> <i class="ace-icon fa fa-facebook-square blue bigger-150"></i> </a> <a href="#"> <i class="ace-icon fa fa-twitter-square light-blue bigger-150"></i> </a> <a href="#"> <i class="ace-icon fa fa-google-plus-square red bigger-150"></i> </a> </div> </div> </div> </div> </div> <div class="itemdiv memberdiv"> <div class="inline pos-rel"> <div class="user"> <a href="#"> <img src="http://bootdey.com/img/Content/avatar/avatar3.png" alt="Alex Doe's avatar"> </a> </div> <div class="body"> <div class="name"> <a href="#"> <span class="user-status status-idle"></span> Alex Doe </a> </div> </div> <div class="popover"> <div class="arrow"></div> <div class="popover-content"> <div class="bolder">Marketing</div> <div class="time"> <i class="ace-icon fa fa-clock-o middle bigger-120 orange"></i> <span class=""> 40 minutes idle </span> </div> <div class="hr dotted hr-8"></div> <div class="tools action-buttons"> <a href="#"> <i class="ace-icon fa fa-facebook-square blue bigger-150"></i> </a> <a href="#"> <i class="ace-icon fa fa-twitter-square light-blue bigger-150"></i> </a> <a href="#"> <i class="ace-icon fa fa-google-plus-square red bigger-150"></i> </a> </div> </div> </div> </div> </div> <div class="itemdiv memberdiv"> <div class="inline pos-rel"> <div class="user"> <a href="#"> <img src="http://bootdey.com/img/Content/avatar/avatar4.png" alt="Phil Doe's avatar"> </a> </div> <div class="body"> <div class="name"> <a href="#"> <span class="user-status status-online"></span> Phil Doe </a> </div> </div> <div class="popover"> <div class="arrow"></div> <div class="popover-content"> <div class="bolder">Public Relations</div> <div class="time"> <i class="ace-icon fa fa-clock-o middle bigger-120 orange"></i> <span class="green"> 2 hours ago </span> </div> <div class="hr dotted hr-8"></div> <div class="tools action-buttons"> <a href="#"> <i class="ace-icon fa fa-facebook-square blue bigger-150"></i> </a> <a href="#"> <i class="ace-icon fa fa-twitter-square light-blue bigger-150"></i> </a> <a href="#"> <i class="ace-icon fa fa-google-plus-square red bigger-150"></i> </a> </div> </div> </div> </div> </div> <div class="itemdiv memberdiv"> <div class="inline pos-rel"> <div class="user"> <a href="#"> <img src="http://bootdey.com/img/Content/avatar/avatar6.png" alt="Susan Doe's avatar"> </a> </div> <div class="body"> <div class="name"> <a href="#"> <span class="user-status status-online"></span> Susan Doe </a> </div> </div> <div class="popover"> <div class="arrow"></div> <div class="popover-content"> <div class="bolder">HR Management</div> <div class="time"> <i class="ace-icon fa fa-clock-o middle bigger-120 orange"></i> <span class="green"> 20 mins ago </span> </div> <div class="hr dotted hr-8"></div> <div class="tools action-buttons"> <a href="#"> <i class="ace-icon fa fa-facebook-square blue bigger-150"></i> </a> <a href="#"> <i class="ace-icon fa fa-twitter-square light-blue bigger-150"></i> </a> <a href="#"> <i class="ace-icon fa fa-google-plus-square red bigger-150"></i> </a> </div> </div> </div> </div> </div> <div class="itemdiv memberdiv"> <div class="inline pos-rel"> <div class="user"> <a href="#"> <img src="http://bootdey.com/img/Content/avatar/avatar1.png" alt="Jennifer Doe's avatar"> </a> </div> <div class="body"> <div class="name"> <a href="#"> <span class="user-status status-offline"></span> Jennifer Doe </a> </div> </div> <div class="popover"> <div class="arrow"></div> <div class="popover-content"> <div class="bolder">Graphic Designer</div> <div class="time"> <i class="ace-icon fa fa-clock-o middle bigger-120 grey"></i> <span class="grey"> 2 hours ago </span> </div> <div class="hr dotted hr-8"></div> <div class="tools action-buttons"> <a href="#"> <i class="ace-icon fa fa-facebook-square blue bigger-150"></i> </a> <a href="#"> <i class="ace-icon fa fa-twitter-square light-blue bigger-150"></i> </a> <a href="#"> <i class="ace-icon fa fa-google-plus-square red bigger-150"></i> </a> </div> </div> </div> </div> </div> <div class="itemdiv memberdiv"> <div class="inline pos-rel"> <div class="user"> <a href="#"> <img src="http://bootdey.com/img/Content/avatar/avatar2.png" alt="Alexa Doe's avatar"> </a> </div> <div class="body"> <div class="name"> <a href="#"> <span class="user-status status-offline"></span> Alexa Doe </a> </div> </div> <div class="popover"> <div class="arrow"></div> <div class="popover-content"> <div class="bolder">Accounting</div> <div class="time"> <i class="ace-icon fa fa-clock-o middle bigger-120 grey"></i> <span class="grey"> 4 hours ago </span> </div> <div class="hr dotted hr-8"></div> <div class="tools action-buttons"> <a href="#"> <i class="ace-icon fa fa-facebook-square blue bigger-150"></i> </a> <a href="#"> <i class="ace-icon fa fa-twitter-square light-blue bigger-150"></i> </a> <a href="#"> <i class="ace-icon fa fa-google-plus-square red bigger-150"></i> </a> </div> </div> </div> </div> </div> </div> <div class="hr hr10 hr-double"></div> <ul class="pager pull-right"> <li class="previous disabled"> <a href="#">← Prev</a> </li> <li class="next"> <a href="#">Next →</a> </li> </ul> </div><!-- /#friends --> <div id="pictures" class="tab-pane"> <ul class="ace-thumbnails"> <li> <a href="#" data-rel="colorbox"> <img alt="150x150" src="http://lorempixel.com/200/200/nature/1/"> <div class="text"> <div class="inner">Sample Caption on Hover</div> </div> </a> <div class="tools tools-bottom"> <a href="#"> <i class="ace-icon fa fa-link"></i> </a> <a href="#"> <i class="ace-icon fa fa-paperclip"></i> </a> <a href="#"> <i class="ace-icon fa fa-pencil"></i> </a> <a href="#"> <i class="ace-icon fa fa-times red"></i> </a> </div> </li> <li> <a href="#" data-rel="colorbox"> <img alt="150x150" src="http://lorempixel.com/200/200/nature/2/"> <div class="text"> <div class="inner">Sample Caption on Hover</div> </div> </a> <div class="tools tools-bottom"> <a href="#"> <i class="ace-icon fa fa-link"></i> </a> <a href="#"> <i class="ace-icon fa fa-paperclip"></i> </a> <a href="#"> <i class="ace-icon fa fa-pencil"></i> </a> <a href="#"> <i class="ace-icon fa fa-times red"></i> </a> </div> </li> <li> <a href="#" data-rel="colorbox"> <img alt="150x150" src="http://lorempixel.com/200/200/nature/3/"> <div class="text"> <div class="inner">Sample Caption on Hover</div> </div> </a> <div class="tools tools-bottom"> <a href="#"> <i class="ace-icon fa fa-link"></i> </a> <a href="#"> <i class="ace-icon fa fa-paperclip"></i> </a> <a href="#"> <i class="ace-icon fa fa-pencil"></i> </a> <a href="#"> <i class="ace-icon fa fa-times red"></i> </a> </div> </li> <li> <a href="#" data-rel="colorbox"> <img alt="150x150" src="http://lorempixel.com/200/200/nature/4/"> <div class="text"> <div class="inner">Sample Caption on Hover</div> </div> </a> <div class="tools tools-bottom"> <a href="#"> <i class="ace-icon fa fa-link"></i> </a> <a href="#"> <i class="ace-icon fa fa-paperclip"></i> </a> <a href="#"> <i class="ace-icon fa fa-pencil"></i> </a> <a href="#"> <i class="ace-icon fa fa-times red"></i> </a> </div> </li> <li> <a href="#" data-rel="colorbox"> <img alt="150x150" src="http://lorempixel.com/200/200/nature/5/"> <div class="text"> <div class="inner">Sample Caption on Hover</div> </div> </a> <div class="tools tools-bottom"> <a href="#"> <i class="ace-icon fa fa-link"></i> </a> <a href="#"> <i class="ace-icon fa fa-paperclip"></i> </a> <a href="#"> <i class="ace-icon fa fa-pencil"></i> </a> <a href="#"> <i class="ace-icon fa fa-times red"></i> </a> </div> </li> <li> <a href="#" data-rel="colorbox"> <img alt="150x150" src="http://lorempixel.com/200/200/nature/6/"> <div class="text"> <div class="inner">Sample Caption on Hover</div> </div> </a> <div class="tools tools-bottom"> <a href="#"> <i class="ace-icon fa fa-link"></i> </a> <a href="#"> <i class="ace-icon fa fa-paperclip"></i> </a> <a href="#"> <i class="ace-icon fa fa-pencil"></i> </a> <a href="#"> <i class="ace-icon fa fa-times red"></i> </a> </div> </li> <li> <a href="#" data-rel="colorbox"> <img alt="150x150" src="http://lorempixel.com/200/200/nature/7/"> <div class="text"> <div class="inner">Sample Caption on Hover</div> </div> </a> <div class="tools tools-bottom"> <a href="#"> <i class="ace-icon fa fa-link"></i> </a> <a href="#"> <i class="ace-icon fa fa-paperclip"></i> </a> <a href="#"> <i class="ace-icon fa fa-pencil"></i> </a> <a href="#"> <i class="ace-icon fa fa-times red"></i> </a> </div> </li> <li> <a href="#" data-rel="colorbox"> <img alt="150x150" src="http://lorempixel.com/200/200/nature/1/"> <div class="text"> <div class="inner">Sample Caption on Hover</div> </div> </a> <div class="tools tools-bottom"> <a href="#"> <i class="ace-icon fa fa-link"></i> </a> <a href="#"> <i class="ace-icon fa fa-paperclip"></i> </a> <a href="#"> <i class="ace-icon fa fa-pencil"></i> </a> <a href="#"> <i class="ace-icon fa fa-times red"></i> </a> </div> </li> </ul> </div><!-- /#pictures --> </div> </div> </div>
body{margin-top:20px;} .align-center, .center { text-align: center!important; } .profile-user-info { display: table; width: 98%; width: calc(100% - 24px); margin: 0 auto } .profile-info-row { display: table-row } .profile-info-name, .profile-info-value { display: table-cell; border-top: 1px dotted #D5E4F1 } .profile-info-name { text-align: right; padding: 6px 10px 6px 4px; font-weight: 400; color: #667E99; background-color: transparent; width: 110px; vertical-align: middle } .profile-info-value { padding: 6px 4px 6px 6px } .profile-info-value>span+span:before { display: inline; content: ","; margin-left: 1px; margin-right: 3px; color: #666; border-bottom: 1px solid #FFF } .profile-info-value>span+span.editable-container:before { display: none } .profile-info-row:first-child .profile-info-name, .profile-info-row:first-child .profile-info-value { border-top: none } .profile-user-info-striped { border: 1px solid #DCEBF7 } .profile-user-info-striped .profile-info-name { color: #336199; background-color: #EDF3F4; border-top: 1px solid #F7FBFF } .profile-user-info-striped .profile-info-value { border-top: 1px dotted #DCEBF7; padding-left: 12px } .profile-picture { border: 1px solid #CCC; background-color: #FFF; padding: 4px; display: inline-block; max-width: 100%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; box-shadow: 1px 1px 1px rgba(0, 0, 0, .15) } .dd-empty, .dd-handle, .dd-placeholder, .dd2-content { -webkit-box-sizing: border-box; -moz-box-sizing: border-box } .profile-activity { padding: 10px 4px; border-bottom: 1px dotted #D0D8E0; position: relative; border-left: 1px dotted #FFF; border-right: 1px dotted #FFF } .profile-activity:first-child { border-top: 1px dotted transparent } .profile-activity:first-child:hover { border-top-color: #D0D8E0 } .profile-activity:hover { background-color: #F4F9FD; border-left: 1px dotted #D0D8E0; border-right: 1px dotted #D0D8E0 } .profile-activity img { border: 2px solid #C9D6E5; border-radius: 100%; max-width: 40px; margin-right: 10px; margin-left: 0; box-shadow: none } .profile-activity .thumbicon { background-color: #74ABD7; display: inline-block; border-radius: 100%; width: 38px; height: 38px; color: #FFF; font-size: 18px; text-align: center; line-height: 38px; margin-right: 10px; margin-left: 0; text-shadow: none!important } .profile-activity .time { display: block; margin-top: 4px; color: #777 } .profile-activity a.user { font-weight: 700; color: #9585BF } .profile-activity .tools { position: absolute; right: 12px; bottom: 8px; display: none } .profile-activity:hover .tools { display: block } .user-profile .ace-thumbnails li { border: 1px solid #CCC; padding: 3px; margin: 6px } .user-profile .ace-thumbnails li .tools { left: 3px; right: 3px } .user-profile .ace-thumbnails li:hover .tools { bottom: 3px } .user-title-label:hover { text-decoration: none } .user-title-label+.dropdown-menu { margin-left: -12px } .profile-contact-links { padding: 4px 2px 5px; border: 1px solid #E0E2E5; background-color: #F8FAFC } .btn-link:hover .ace-icon { text-decoration: none!important } .profile-social-links>a:hover>.ace-icon, .profile-users .memberdiv .name a:hover .ace-icon, .profile-users .memberdiv .tools>a:hover { text-decoration: none } .profile-social-links>a { text-decoration: none; margin: 0 1px } .profile-skills .progress { height: 26px; margin-bottom: 2px; background-color: transparent } .profile-skills .progress .progress-bar { line-height: 26px; font-size: 13px; font-weight: 700; font-family: "Open Sans"; padding: 0 8px } .profile-users .user { display: block; position: static; text-align: center; width: auto } .profile-users .user img { padding: 2px; border-radius: 100%; border: 1px solid #AAA; max-width: none; width: 64px; -webkit-transition: all .1s; -o-transition: all .1s; transition: all .1s } .profile-users .user img:hover { -webkit-box-shadow: 0 0 1px 1px rgba(0, 0, 0, .33); box-shadow: 0 0 1px 1px rgba(0, 0, 0, .33) } .profile-users .memberdiv { background-color: #FFF; width: 100px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; border: none; text-align: center; margin: 0 8px 24px } .profile-users .memberdiv .body { display: inline-block; margin: 8px 0 0 } .profile-users .memberdiv .popover { visibility: hidden; min-width: 0; max-height: 0; max-width: 0; margin-left: 0; margin-right: 0; top: -5%; left: auto; right: auto; opacity: 0; display: none; position: absolute; -webkit-transition: opacity .2s linear 0s, visibility 0s linear .2s, max-height 0s linear .2s, max-width 0s linear .2s, min-width 0s linear .2s; -o-transition: opacity .2s linear 0s, visibility 0s linear .2s, max-height 0s linear .2s, max-width 0s linear .2s, min-width 0s linear .2s; transition: opacity .2s linear 0s, visibility 0s linear .2s, max-height 0s linear .2s, max-width 0s linear .2s, min-width 0s linear .2s } .profile-users .memberdiv .popover.right { left: 100%; right: auto; display: block } .profile-users .memberdiv .popover.left { left: auto; right: 100%; display: block } .profile-users .memberdiv>:first-child:hover .popover { visibility: visible; opacity: 1; z-index: 1060; max-height: 250px; max-width: 250px; min-width: 150px; -webkit-transition-delay: 0s; -moz-transition-delay: 0s; -o-transition-delay: 0s; transition-delay: 0s } .profile-users .memberdiv .tools { position: static; display: block; width: 100%; margin-top: 2px } .profile-users .memberdiv .tools>a { margin: 0 2px } .user-status { display: inline-block; width: 11px; height: 11px; background-color: #FFF; border: 3px solid #AAA; border-radius: 100%; vertical-align: middle; margin-right: 1px } .user-status.status-online { border-color: #8AC16C } .user-status.status-busy { border-color: #E07F69 } .user-status.status-idle { border-color: #FFB752 } .tab-content.profile-edit-tab-content { border: 1px solid #DDD; padding: 8px 32px 32px; -webkit-box-shadow: 1px 1px 0 0 rgba(0, 0, 0, .2); box-shadow: 1px 1px 0 0 rgba(0, 0, 0, .2); background-color: #FFF } @media only screen and (max-width:480px) { .profile-info-name { width: 80px } .profile-user-info-striped .profile-info-name { float: none; width: auto; text-align: left; padding: 6px 4px 6px 10px; display: block } .profile-user-info-striped .profile-info-value { margin-left: 10px; display: block } .user-profile .memberdiv { width: 50%; margin-left: 0; margin-right: 0 } } .itemdiv { padding-right: 3px; min-height: 66px } .itemdiv>.user { display: inline-block; width: 42px; position: absolute; left: 0 } .itemdiv>.user>.img, .itemdiv>.user>img { border-radius: 100%; border: 2px solid #5293C4; max-width: 40px; position: relative } .itemdiv>.user>.img { padding: 2px } .itemdiv>.body { width: auto; margin-left: 50px; margin-right: 12px; position: relative } .itemdiv>.body>.time { display: block; font-size: 11px; font-weight: 700; color: #666; position: absolute; right: 9px; top: 0 } .itemdiv>.body>.time .ace-icon { font-size: 14px; font-weight: 400 } .itemdiv>.body>.name { display: block; color: #999 } .itemdiv>.body>.name>b { color: #777 } .itemdiv>.body>.text { display: block; position: relative; margin-top: 2px; padding-bottom: 19px; padding-left: 7px; font-size: 13px } .itemdiv.dialogdiv:before, .itemdiv.dialogdiv>.body:before, .itemdiv>.body>.text:after { content: ""; position: absolute } .itemdiv>.body>.text:after { display: block; height: 1px; font-size: 0; overflow: hidden; left: 16px; right: -12px; margin-top: 9px; border-top: 1px solid #E4ECF3 } .itemdiv>.body>.text>.ace-icon:first-child { color: #DCE3ED; margin-right: 4px } .itemdiv:last-child>.body>.text { border-bottom-width: 0 } .itemdiv:last-child>.body>.text:after { display: none } .itemdiv.dialogdiv { padding-bottom: 14px } .itemdiv.dialogdiv:before { display: block; top: 0; bottom: 0; left: 19px; width: 3px; max-width: 3px; background-color: #E1E6ED; border: 1px solid #D7DBDD; border-width: 0 1px } .itemdiv.dialogdiv:last-child { padding-bottom: 0 } .itemdiv.dialogdiv:last-child:before { display: none } .itemdiv.dialogdiv>.user>img { border-color: #C9D6E5 } .itemdiv.dialogdiv>.body { border: 1px solid #DDE4ED; padding: 5px 8px 8px; border-left-width: 2px; margin-right: 1px } .itemdiv.dialogdiv>.body:before { display: block; left: -7px; top: 11px; width: 8px; height: 8px; border: 2px solid #DDE4ED; border-width: 2px 0 0 2px; background-color: #FFF; -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; -webkit-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg) } .itemdiv.dialogdiv>.body>.time { position: static; float: right } .itemdiv.dialogdiv>.body>.text { padding-left: 0; padding-bottom: 0 } .itemdiv.dialogdiv>.body>.text:after { display: none } .itemdiv.dialogdiv .tooltip-inner { word-break: break-all } .itemdiv.memberdiv { width: 175px; padding: 2px; margin: 3px 0; float: left; border-bottom: 1px solid #E8E8E8 } @media (min-width:992px) { .itemdiv.memberdiv { max-width: 50% } } @media (max-width:991px) { .itemdiv.memberdiv { min-width: 33.333% } } .itemdiv.memberdiv>.user>img { border-color: #DCE3ED } .itemdiv.memberdiv>.body>.time { position: static } .itemdiv.memberdiv>.body>.name { line-height: 18px; height: 18px; margin-bottom: 0 } .itemdiv.memberdiv>.body>.name>a { display: inline-block; max-width: 100px; max-height: 18px; overflow: hidden; text-overflow: ellipsis; word-break: break-all } .itemdiv .tools { position: absolute; right: 5px; bottom: 10px; display: none } .item-list>li>.checkbox, .item-list>li>label.inline, .itemdiv:hover .tools { display: inline-block } .itemdiv .tools .btn { border-radius: 36px; margin: 1px 0 } .itemdiv .body .tools { bottom: 4px } .itemdiv.commentdiv .tools { right: 9px } .item-list { margin: 0; padding: 0; list-style: none } .item-list>li { padding: 9px; background-color: #FFF; margin-top: -1px; position: relative } .item-list>li.selected { color: #8090A0; background-color: #F4F9FC } .item-list>li.selected .lbl, .item-list>li.selected label { text-decoration: line-through; color: #8090A0 } .item-list>li label { font-size: 13px } .item-list>li .percentage { font-size: 11px; font-weight: 700; color: #777 } .ace-thumbnails>li, .ace-thumbnails>li>:first-child { display: block; position: relative } .ace-thumbnails { list-style: none; margin: 0; padding: 0 } .ace-thumbnails>li { float: left; overflow: hidden; margin: 2px; border: 2px solid #333 } .ace-thumbnails>li>:first-child:focus { outline: 0 } .ace-thumbnails>li .tags { display: inline-block; position: absolute; bottom: 0; right: 0; overflow: visible; direction: rtl; padding: 0; margin: 0; height: auto; width: auto; background-color: transparent; border-width: 0; vertical-align: inherit } .ace-thumbnails>li .tags>.label-holder { opacity: .92; filter: alpha(opacity=92); display: table; margin: 1px 0 0; direction: ltr; text-align: left } .ace-thumbnails>li>.tools, .ace-thumbnails>li>:first-child>.text { position: absolute; text-align: center; background-color: rgba(0, 0, 0, .55) } .ace-thumbnails>li .tags>.label-holder:hover { opacity: 1; filter: alpha(opacity=100) } .ace-thumbnails>li>.tools { top: 0; bottom: 0; left: -30px; width: 24px; vertical-align: middle; -webkit-transition: all .2s ease; -o-transition: all .2s ease; transition: all .2s ease } .ace-thumbnails>li>.tools.tools-right { left: auto; right: -30px } .ace-thumbnails>li>.tools.tools-bottom { width: auto; height: 28px; left: 0; right: 0; top: auto; bottom: -30px } .ace-thumbnails>li>.tools.tools-top { width: auto; height: 28px; left: 0; right: 0; top: -30px; bottom: auto } .ace-thumbnails>li:hover>.tools { left: 0; right: 0 } .ace-thumbnails>li:hover>.tools.tools-bottom { top: auto; bottom: 0 } .ace-thumbnails>li:hover>.tools.tools-top { bottom: auto; top: 0 } .ace-thumbnails>li:hover>.tools.tools-right { left: auto; right: 0 } .ace-thumbnails>li>.in.tools { left: 0; right: 0 } .ace-thumbnails>li>.in.tools.tools-bottom { top: auto; bottom: 0 } .ace-thumbnails>li>.in.tools.tools-top { bottom: auto; top: 0 } .ace-thumbnails>li>.in.tools.tools-right { left: auto; right: 0 } .ace-thumbnails>li>.tools>a, .ace-thumbnails>li>:first-child .inner a { display: inline-block; color: #FFF; font-size: 18px; font-weight: 400; padding: 0 4px } .ace-thumbnails>li>.tools>a:hover, .ace-thumbnails>li>:first-child .inner a:hover { text-decoration: none; color: #C9E2EA } .ace-thumbnails>li .tools.tools-bottom>a, .ace-thumbnails>li .tools.tools-top>a { display: inline-block } .ace-thumbnails>li>:first-child>.text { right: 0; left: 0; bottom: 0; top: 0; color: #FFF; opacity: 0; filter: alpha(opacity=0); -webkit-transition: all .2s ease; -o-transition: all .2s ease; transition: all .2s ease } .dialogs, .itemdiv { position: relative } .ace-thumbnails>li>:first-child>.text:before { content: ''; display: inline-block; height: 100%; vertical-align: middle; margin-right: 0 } .ace-thumbnails>li>:first-child>.text>.inner { padding: 4px 0; margin: 0; display: inline-block; vertical-align: middle; max-width: 90% } .ace-thumbnails>li:hover>:first-child>.text { opacity: 1; filter: alpha(opacity=100) } @media only screen and (max-width:480px) { .ace-thumbnails { text-align: center } .ace-thumbnails>li { float: none; display: inline-block } } .tab-content { border: 1px solid #C5D0DC; padding: 16px 12px; position: relative } .tab-content.no-padding { padding: 0 } .tab-content.no-border { border: none; padding: 12px } .tab-content.padding-32 { padding: 32px 24px } .tab-content.no-border.padding-32 { padding: 32px } .tab-content.padding-30 { padding: 30px 23px } .tab-content.no-border.padding-30 { padding: 30px } .tab-content.padding-28 { padding: 28px 21px } .tab-content.no-border.padding-28 { padding: 28px } .tab-content.padding-26 { padding: 26px 20px } .tab-content.no-border.padding-26 { padding: 26px } .tab-content.padding-24 { padding: 24px 18px } .tab-content.no-border.padding-24 { padding: 24px } .tab-content.padding-22 { padding: 22px 17px } .tab-content.no-border.padding-22 { padding: 22px } .tab-content.padding-20 { padding: 20px 15px } .tab-content.no-border.padding-20 { padding: 20px } .tab-content.padding-18 { padding: 18px 14px } .tab-content.no-border.padding-18 { padding: 18px } .tab-content.padding-16 { padding: 16px 12px } .tab-content.no-border.padding-16 { padding: 16px } .tab-content.padding-14 { padding: 14px 11px } .tab-content.no-border.padding-14 { padding: 14px } .tab-content.padding-12 { padding: 12px 9px } .tab-content.no-border.padding-12 { padding: 12px } .tab-content.padding-10 { padding: 10px 8px } .tab-content.no-border.padding-10 { padding: 10px } .tab-content.padding-8 { padding: 8px 6px } .tab-content.no-border.padding-8 { padding: 8px } .tab-content.padding-6 { padding: 6px 5px } .tab-content.no-border.padding-6 { padding: 6px } .tab-content.padding-4 { padding: 4px 3px } .tab-content.no-border.padding-4 { padding: 4px } .tab-content.no-border.padding-2, .tab-content.padding-2 { padding: 2px } .tab-content.no-border.padding-0, .tab-content.padding-0 { padding: 0 } .nav.nav-tabs.padding-28 { padding-left: 28px } .tabs-left>.nav.nav-tabs.padding-28, .tabs-right>.nav.nav-tabs.padding-28 { padding-left: 0; padding-top: 28px } .nav.nav-tabs.padding-26 { padding-left: 26px } .tabs-left>.nav.nav-tabs.padding-26, .tabs-right>.nav.nav-tabs.padding-26 { padding-left: 0; padding-top: 26px } .nav.nav-tabs.padding-24 { padding-left: 24px } .tabs-left>.nav.nav-tabs.padding-24, .tabs-right>.nav.nav-tabs.padding-24 { padding-left: 0; padding-top: 24px } .nav.nav-tabs.padding-22 { padding-left: 22px } .tabs-left>.nav.nav-tabs.padding-22, .tabs-right>.nav.nav-tabs.padding-22 { padding-left: 0; padding-top: 22px } .nav.nav-tabs.padding-20 { padding-left: 20px } .tabs-left>.nav.nav-tabs.padding-20, .tabs-right>.nav.nav-tabs.padding-20 { padding-left: 0; padding-top: 20px } .nav.nav-tabs.padding-18 { padding-left: 18px } .tabs-left>.nav.nav-tabs.padding-18, .tabs-right>.nav.nav-tabs.padding-18 { padding-left: 0; padding-top: 18px } .nav.nav-tabs.padding-16 { padding-left: 16px } .tabs-left>.nav.nav-tabs.padding-16, .tabs-right>.nav.nav-tabs.padding-16 { padding-left: 0; padding-top: 16px } .nav.nav-tabs.padding-14 { padding-left: 14px } .tabs-left>.nav.nav-tabs.padding-14, .tabs-right>.nav.nav-tabs.padding-14 { padding-left: 0; padding-top: 14px } .nav.nav-tabs.padding-12 { padding-left: 12px } .tabs-left>.nav.nav-tabs.padding-12, .tabs-right>.nav.nav-tabs.padding-12 { padding-left: 0; padding-top: 12px } .nav.nav-tabs.padding-10 { padding-left: 10px } .tabs-left>.nav.nav-tabs.padding-10, .tabs-right>.nav.nav-tabs.padding-10 { padding-left: 0; padding-top: 10px } .nav.nav-tabs.padding-8 { padding-left: 8px } .tabs-left>.nav.nav-tabs.padding-8, .tabs-right>.nav.nav-tabs.padding-8 { padding-left: 0; padding-top: 8px } .nav.nav-tabs.padding-6 { padding-left: 6px } .tabs-left>.nav.nav-tabs.padding-6, .tabs-right>.nav.nav-tabs.padding-6 { padding-left: 0; padding-top: 6px } .nav.nav-tabs.padding-4 { padding-left: 4px } .tabs-left>.nav.nav-tabs.padding-4, .tabs-right>.nav.nav-tabs.padding-4 { padding-left: 0; padding-top: 4px } .nav.nav-tabs.padding-2 { padding-left: 2px } .tabs-left>.nav.nav-tabs.padding-2, .tabs-right>.nav.nav-tabs.padding-2 { padding-left: 0; padding-top: 2px } .nav-tabs { border-color: #C5D0DC; margin-bottom: 0!important; position: relative; top: 1px } .nav-tabs>li>a { padding: 7px 12px 8px } .nav-tabs>li>a, .nav-tabs>li>a:focus { border-radius: 0!important; border-color: #C5D0DC; background-color: #F9F9F9; color: #999; margin-right: -1px; line-height: 18px; position: relative } .nav-tabs>li>a:hover { background-color: #FFF; color: #4C8FBD; border-color: #C5D0DC } .nav-tabs>li>a:active, .nav-tabs>li>a:focus { outline: 0!important } .nav-tabs>li.active>a, .nav-tabs>li.active>a:focus, .nav-tabs>li.active>a:hover { color: #576373; border-color: #C5D0DC #C5D0DC transparent; border-top: 2px solid #4C8FBD; background-color: #FFF; z-index: 1; line-height: 18px; margin-top: -1px; box-shadow: 0 -2px 3px 0 rgba(0, 0, 0, .15) } .tabs-below>.nav-tabs { top: auto; margin-bottom: 0; margin-top: -1px; border-color: #C5D0DC; border-bottom-width: 0 } .tabs-below>.nav-tabs>li>a, .tabs-below>.nav-tabs>li>a:focus, .tabs-below>.nav-tabs>li>a:hover { border-color: #C5D0DC } .tabs-below>.nav-tabs>li.active>a, .tabs-below>.nav-tabs>li.active>a:focus, .tabs-below>.nav-tabs>li.active>a:hover { border-color: transparent #C5D0DC #C5D0DC; border-top-width: 1px; border-bottom: 2px solid #4C8FBD; margin-top: 0; box-shadow: 0 2px 3px 0 rgba(0, 0, 0, .15) } .tabs-left>.nav-tabs>li>a, .tabs-right>.nav-tabs>li>a { min-width: 60px } .tabs-left>.nav-tabs { top: auto; margin-bottom: 0; border-color: #C5D0DC; float: left } .tabs-left>.nav-tabs>li { float: none!important } .tabs-left>.nav-tabs>li>a, .tabs-left>.nav-tabs>li>a:focus, .tabs-left>.nav-tabs>li>a:hover { border-color: #C5D0DC; margin: 0 -1px 0 0 } .tabs-left>.nav-tabs>li.active>a, .tabs-left>.nav-tabs>li.active>a:focus, .tabs-left>.nav-tabs>li.active>a:hover { border-color: #C5D0DC transparent #C5D0DC #C5D0DC; border-top-width: 1px; border-left: 2px solid #4C8FBD; margin: 0 -1px; -webkit-box-shadow: -2px 0 3px 0 rgba(0, 0, 0, .15)!important; box-shadow: -2px 0 3px 0 rgba(0, 0, 0, .15)!important } .tabs-right>.nav-tabs { top: auto; margin-bottom: 0; border-color: #C5D0DC; float: right } .tabs-right>.nav-tabs>li { float: none!important } .tabs-right>.nav-tabs>li>a, .tabs-right>.nav-tabs>li>a:focus, .tabs-right>.nav-tabs>li>a:hover { border-color: #C5D0DC; margin: 0 -1px } .tabs-right>.nav-tabs>li.active>a, .tabs-right>.nav-tabs>li.active>a:focus, .tabs-right>.nav-tabs>li.active>a:hover { border-color: #C5D0DC #C5D0DC #C5D0DC transparent; border-top-width: 1px; border-right: 2px solid #4C8FBD; margin: 0 -2px 0 -1px; -webkit-box-shadow: 2px 0 3px 0 rgba(0, 0, 0, .15); box-shadow: 2px 0 3px 0 rgba(0, 0, 0, .15) } .nav-tabs>li>a .badge { padding: 1px 5px; line-height: 15px; opacity: .75; vertical-align: initial } .nav-tabs>li>a .ace-icon { opacity: .75 } .nav-tabs>li.active>a .ace-icon, .nav-tabs>li.active>a .badge { opacity: 1 } .nav-tabs li .ace-icon { width: 1.25em; display: inline-block; text-align: center } .nav-tabs>li.open .dropdown-toggle { background-color: #4F99C6; border-color: #4F99C6; color: #FFF } .nav-tabs>li.open .dropdown-toggle>.ace-icon { color: #FFF!important } .tabs-left .tab-content, .tabs-right .tab-content { overflow: auto } .dark { color: #333!important } .white { color: #FFF!important } .red { color: #DD5A43!important } .red2 { color: #E08374!important } .light-red { color: #F77!important } .blue { color: #478FCA!important } .light-blue { color: #93CBF9!important } .green { color: #69AA46!important } .light-green { color: #B0D877!important } .orange { color: #FF892A!important } .orange2 { color: #FEB902!important } .light-orange { color: #FCAC6F!important } .purple { color: #A069C3!important } .pink { color: #C6699F!important } .pink2 { color: #D6487E!important } .brown { color: brown!important } .grey { color: #777!important }
Dey-Dey

User Profile with tabs

Dey-Dey
  Oct 27th, 07:46
1.6K Views