Bootstrap snippet: simple user profile presentation social

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: simple,user,profile presentation,social



<link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet"> <div class="container profile"> <div class="row"> <div class="col-md-12"> <div class="well well-small clearfix"> <div class="row"> <div class="col-md-2"> <img src="http://www.gravatar.com/avatar/f6112e781842d6a2b4636b35451401ff?s=125" class="img-polaroid"/> </div> <div class="col-md-4"> <h2>Dey-Dey name</h2> <ul class="list-unstyled"> <li><i class="icon-phone"></i> 916-241-3613</li> <li><i class="icon-envelope"></i> mrsmith@me.com</li> <li><i class="icon-globe"></i> http://bootnipets.com</li> </ul> </div> <div class="col-md-6"> <ul class="list-inline stats"> <li> <span>275</span> Friends </li> <li> <span>354</span> Followers </li> <li> <span>186</span> Photos </li> </ul> <div><!--/span6--> </div><!--/row--> </div> <!--Body content--> </div> </div> <div class="well clearfix"> <b>Aplication name</b> </div> </div>
body{margin-top:20px;} body{ padding-top:25px !important; } .stats { text-align:center; text-shadow:1px 1px 0px #fff; margin-top:25px; } .stats li{ width:125px; } .stats span{ font-family:Helvetica; font-weight:bold; text-shadow:1px 1px 0px #fff; font-size:4em; display:block; line-height:1em; } /* Large desktop */ @media (min-width: 1200px) { } /* Portrait tablet to landscape and desktop */ @media (min-width: 768px) and (max-width: 979px) { } /* Landscape phone to portrait tablet */ @media (max-width: 767px) { .profile img{ width:75px; } .profile h2{ font-size:1.7em; } .stats span{ font-size: 2em; } } /* Landscape phones and down */ @media (max-width: 480px) { }
Dey-Dey

simple user profile presentation social

Dey-Dey
  May 6th 2014, 23:08
1.8K Views