Bootstrap snippet: Followers page

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: users,list,profile



<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet"> <div class="container bootstrap snippet"> <div class="row profile"> <div class="col-md-3" id="profileCol"> <div class="profile-sidebar"> <div class="profile-userpic"> <img src="http://bootdey.com/img/Content/User_for_snippets.png" class="img-responsive" alt=""> </div> <div class="profile-usertitle"> <div class="profile-usertitle-name"> Clark rodriguez </div> </div> <div class="profile-userbuttons"> <button type="button" class="btn btn-info btn-sm"> <i class="fa fa-user-plus"></i> Follow </button> </div> <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> </div> </div> <div class="col-md-9" id="contentCol"> <div class="profile-content"> <div class="row hidden-xs hidden-sm"> <a href="#" class="btn btn-info" id="toggle-link"> <i class="fa fa-arrow-left"></i> Hide menu </a> <hr class="hr-sep"> </div> <div class="row "> <div class="col-md-4 col-sm-6 follower-item"> <div class="ibox-content text-center"> <h2 class="text-muted h-name">Deyson Smith</h2> <div class="m-b-sm"> <img alt="image" class="img-circle circle-border" src="http://bootdey.com/img/Content/user_1.jpg"> </div> <p></p> <div class="text-center"> <a class="btn btn-xs btn-default"><i class="fa fa-thumbs-up"></i> </a> <a class="btn btn-xs btn-info"><i class="fa fa-heart"></i> </a> <a class="btn btn-xs btn-primary"><i class="fa fa-envelope"></i> </a> <a class="btn btn-xs btn-success"><i class="fa fa-phone"></i> </a> </div> </div> </div> <div class="col-md-4 col-sm-6 follower-item"> <div class="ibox-content text-center"> <h2 class="text-muted h-name">Nicki Smith</h2> <div class="m-b-sm"> <img alt="image" class="img-circle circle-border" src="http://bootdey.com/img/Content/user_2.jpg"> </div> <p></p> <div class="text-center"> <a class="btn btn-xs btn-default"><i class="fa fa-thumbs-up"></i> </a> <a class="btn btn-xs btn-info"><i class="fa fa-heart"></i> </a> <a class="btn btn-xs btn-primary"><i class="fa fa-envelope"></i> </a> <a class="btn btn-xs btn-success"><i class="fa fa-phone"></i> </a> </div> </div> </div> <div class="col-md-4 col-sm-6 follower-item"> <div class="ibox-content text-center"> <h2 class="text-muted h-name">Barbao Smith</h2> <div class="m-b-sm"> <img alt="image" class="img-circle circle-border" src="http://bootdey.com/img/Content/user_3.jpg"> </div> <p></p> <div class="text-center"> <a class="btn btn-xs btn-default"><i class="fa fa-thumbs-up"></i> </a> <a class="btn btn-xs btn-info"><i class="fa fa-heart"></i> </a> <a class="btn btn-xs btn-primary"><i class="fa fa-envelope"></i> </a> <a class="btn btn-xs btn-success"><i class="fa fa-phone"></i> </a> </div> </div> </div> </div> </div> </div> </div> </div>
body { background: #eee; } .toggled { position: absolute; margin-right: -250px; } #profileCol .profile-sidebar{ min-height: 410px; } .hr-sep{ border:1px solid #eee; } .profile { margin: 20px 0; } .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-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-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 { padding: 20px; background: #fff; min-height: 410px; } .ibox-content { background-color: #eee; color: inherit; padding: 15px 20px 20px 20px; border-color: #e7eaec; border-image: none; border-style: solid solid none; border-width: 1px 0px; } .h-name{ font-size:20px; } img.circle-border { border: 2px solid #fff; border-radius: 50%; } .follower-list{ background:#eee; } .follower-item{ margin-top:3px; } .btn { border-radius: 0; border: 0; border-bottom: 4px solid #CCCCCC; margin:0; -webkit-box-shadow: 0 5px 5px -6px rgba(0,0,0,.3); -moz-box-shadow: 0 5px 5px -6px rgba(0,0,0,.3); box-shadow: 0 5px 5px -6px rgba(0,0,0,.3); } .btn .btn-block:active, .btn .btn-lg:active { -webkit-box-shadow: inset 0 3px 3px -5px rgba(0,0,0,.3); -moz-box-shadow: inset 0 3px 3px -5px rgba(0,0,0,.3); box-shadow: inset 0 3px 3px -5px rgba(0,0,0,.3); } .btn-default { color: #555; background-color: #f9f9f9; border-color: #cacaca; text-shadow: 1px 1px 0 #f5f5f5; } .btn-default:hover, .btn-default:focus { background-color: #f4f4f4; border-color: #bebebe; } .btn-success { background-color: #80d752; border-color: #61be26; text-shadow: 1px 1px 0 #5fdb34; } .btn-success:hover, .btn-success:focus { background-color: #75cd53; border-color: #53aa27; } .btn-info { background-color: #39b3d7; border-color: #348fd2; text-shadow: 1px 1px 0 #238ed5; } .btn-info:hover, .btn-info:focus { background-color: #45abcd; border-color: #347abe; } .btn-warning { background-color: #FEAF20; border-color: #d79a34; text-shadow: 1px 1px 0 #db9e34; } .btn-warning:hover, .btn-warning:focus { background-color: #f5a620; border-color: #cd9034; } .btn-danger { background-color: #d73814; border-color: #be0000; text-shadow: 1px 1px 0 #ac2925; } .btn-danger:hover, .btn-danger:focus { background-color: #cd3714; border-color: #aa0000; } .btn-primary { background-color: #4274d7; border-color: #4d5bbe; text-shadow: 1px 1px 0 #232bd5; } .btn-primary:hover, .btn-primary:focus { background-color: #426acd; border-color: #4f56aa; } .btn-magick { color: #fff; background-color: #bb39d7; border-color: #9a00cd; text-shadow: 1px 1px 0 #9823d5; } .btn-magick:hover, .btn-magick:focus { color: #fff; background-color: #b13acd; border-color: #8600b9; } .btn-pressure { position: relative; margin-bottom: 0; } .btn-pressure:focus { -moz-outline-style:none; outline:medium none; } .btn-pressure:active, .btn-pressure.active { top: 4px; border: 0; position: relative; } .btn-sensitive:active, .btn-sensitive.active { top: 1px; margin-top: 4px; }
$(function(){ $("#toggle-link").click(function(e) { e.preventDefault(); $("#profileCol").toggleClass("hidden"); if($("#profileCol").hasClass('hidden')){ $("#contentCol").removeClass('col-md-9'); $("#contentCol").addClass('col-md-12 fade in'); $(this).html('Show Menu <i class="fa fa-arrow-right"></i>'); }else { $("#contentCol").removeClass('col-md-12'); $("#contentCol").addClass('col-md-9'); $(this).html('<i class="fa fa-arrow-left"></i> Hide Menu'); } }); $('.tip').tooltip(); });
Dey-Dey

Followers page

Dey-Dey
  Jul 6th 2015, 08:33
2.6K Views