"User Profile Sidebar"
Bootstrap 3.3.0 Snippet by keenthemes

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!-- User Profile Sidebar by @keenthemes A component of Metronic Theme - #1 Selling Bootstrap 3 Admin Theme in Themeforest: http://j.mp/metronictheme Licensed under MIT --> <div class="container"> <div class="row profile"> <div class="col-md-3"> <div class="profile-sidebar"> <!-- SIDEBAR USERPIC --> <div class="profile-userpic"> <img src="http://keenthemes.com/preview/metronic/theme/assets/admin/pages/media/profile/profile_user.jpg" class="img-responsive" alt=""> </div> <!-- END SIDEBAR USERPIC --> <!-- SIDEBAR USER TITLE --> <div class="profile-usertitle"> <div class="profile-usertitle-name"> Marcus Doe </div> <div class="profile-usertitle-job"> Developer </div> </div> <!-- END SIDEBAR USER TITLE --> <!-- SIDEBAR BUTTONS --> <div class="profile-userbuttons"> <button type="button" class="btn btn-success btn-sm">Follow</button> <button type="button" class="btn btn-danger btn-sm">Message</button> </div> <!-- END SIDEBAR BUTTONS --> <!-- SIDEBAR MENU --> <div class="profile-usermenu"> <ul class="nav"> <li class="active"> <a href="#"> <i class="glyphicon glyphicon-home"></i> Overview </a> </li> <li> <a href="#"> <i class="glyphicon glyphicon-user"></i> Account Settings </a> </li> <li> <a href="#" target="_blank"> <i class="glyphicon glyphicon-ok"></i> Tasks </a> </li> <li> <a href="#"> <i class="glyphicon glyphicon-flag"></i> Help </a> </li> </ul> </div> <!-- END MENU --> </div> </div> <div class="col-md-9"> <div class="profile-content"> Some user related content goes here... </div> </div> </div> </div> <center> <strong>Powered by <a href="http://j.mp/metronictheme" target="_blank">KeenThemes</a></strong> </center> <br> <br>
/*** User Profile Sidebar by @keenthemes A component of Metronic Theme - #1 Selling Bootstrap 3 Admin Theme in Themeforest: http://j.mp/metronictheme Licensed under MIT ***/ body { background: #F1F3FA; } /* Profile container */ .profile { margin: 20px 0; } /* Profile sidebar */ .profile-sidebar { padding: 20px 0 10px 0; background: #fff; } .profile-userpic img { float: none; margin: 0 auto; width: 50%; height: 50%; -webkit-border-radius: 50% !important; -moz-border-radius: 50% !important; border-radius: 50% !important; } .profile-usertitle { text-align: center; margin-top: 20px; } .profile-usertitle-name { color: #5a7391; font-size: 16px; font-weight: 600; margin-bottom: 7px; } .profile-usertitle-job { text-transform: uppercase; color: #5b9bd1; font-size: 12px; font-weight: 600; margin-bottom: 15px; } .profile-userbuttons { text-align: center; margin-top: 10px; } .profile-userbuttons .btn { text-transform: uppercase; font-size: 11px; font-weight: 600; padding: 6px 15px; margin-right: 5px; } .profile-userbuttons .btn:last-child { margin-right: 0px; } .profile-usermenu { margin-top: 30px; } .profile-usermenu ul li { border-bottom: 1px solid #f0f4f7; } .profile-usermenu ul li:last-child { border-bottom: none; } .profile-usermenu ul li a { color: #93a3b5; font-size: 14px; font-weight: 400; } .profile-usermenu ul li a i { margin-right: 8px; font-size: 14px; } .profile-usermenu ul li a:hover { background-color: #fafcfd; color: #5b9bd1; } .profile-usermenu ul li.active { border-bottom: none; } .profile-usermenu ul li.active a { color: #5b9bd1; background-color: #f6f9fb; border-left: 2px solid #5b9bd1; margin-left: -2px; } /* Profile Content */ .profile-content { padding: 20px; background: #fff; min-height: 460px; }

Related: See More


Questions / Comments:

very useful design thank you

mithlesh29 () - 1 year ago - Reply 0


very usefull design thank you

mithlesh29 () - 1 year ago - Reply 0


Hi!
Who knows how to make a fixed profile-sidebar?
Thanks

Keyser_Soze () - 7 years ago - Reply 0


having the same problem

Sujan Joshi () - 7 years ago - Reply 0


i wonder how can someone actually copyright a html code.

Artuuro () - 8 years ago - Reply 0


you know the sources are from a premium theme on themeforest right? i am sure you do not have the rights to even share this code or snippet as its part of the theme and is not allowed to be shared without permission by the creator. which means this snippet and possibly others like this one is copyright infringed. I won't be using it at all. as i do not need something it is copyrighted and stolen

Alucard () - 8 years ago - Reply 0


The thing is that keen themes has a lot of their own premium themes and it could very well be their own content.

maxsurguy () - 8 years ago - Reply 0


What's the theme? Could you please provide a link here?

maxsurguy () - 8 years ago - Reply 0


http://bootsnipp.com/snippe... check this snippet tho i don't think it was posted by the actual author tho.

i have contacted the author of flatlab which is vectorlab

Original theme: http://themeforest.net/item... or http://thevectorlab.net/fla... ( actual snippet came from)

vectorlab:

"Hi, Thanks for noticing this. No we didn't post this. Its totally illegal even they are not take a permission. We're gonna report regarding this.

thx"

it was not approved by them. they would like for that snippet to be removed.

Alucard () - 8 years ago - Reply 0


http://themeforest.net/item...

they know its added here.

Keenthemes replied: http://themeforest.net/item...

keenthemes

Hi ,

Yes, those snippets are posted by us with a link to our premium
theme Metronic. If you need any further clarifications please let us
know.

Thanks.

Alucard () - 8 years ago - Reply 0


The links don't work though?

Thomas Kennedy () - 8 years ago - Reply 0


I like it, it's simple but to the point and not trying to oversell itself very good job on this snippet.

pakuize () - 8 years ago - Reply 0