Bootstrap snippet: panel followers

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: followers,panel



<div class="row bootstrap snippet"> <div class="col-md-6 col-xs-12 col-md-offset-3"> <div class="panel" id="followers"> <div class="panel-heading"> <h3 class="panel-title"> <i class="icon md-check" aria-hidden="true"></i> Followers </h3> </div> <div class="panel-body"> <ul class="list-group list-group-dividered list-group-full"> <li class="list-group-item"> <div class="media"> <div class="media-left"> <a class="avatar avatar-online" href="javascript:void(0)"> <img src="http://bootdey.com/img/Content/avatar/avatar1.png" alt=""> <i></i> </a> </div> <div class="media-body"> <div class="pull-right"> <button type="button" class="btn btn-info btn-sm waves-effect waves-light">Follow</button> </div> <div><a class="name" href="javascript:void(0)">Willard Wood</a></div> <small>@heavybutterfly920</small> </div> </div> </li> <li class="list-group-item"> <div class="media"> <div class="media-left"> <a class="avatar avatar-away" href="javascript:void(0)"> <img src="http://bootdey.com/img/Content/avatar/avatar1.png" alt=""> <i></i> </a> </div> <div class="media-body"> <div class="pull-right"> <button type="button" class="btn btn-success btn-default btn-sm waves-effect waves-light"><i class="icon md-check" aria-hidden="true"></i>Following</button> </div> <div><a class="name" href="javascript:void(0)">Ronnie Ellis</a></div> <small>@kingronnie24</small> </div> </div> </li> <li class="list-group-item"> <div class="media"> <div class="media-left"> <a class="avatar avatar-busy" href="javascript:void(0)"> <img src="http://bootdey.com/img/Content/avatar/avatar1.png" alt=""> <i></i> </a> </div> <div class="media-body"> <div class="pull-right"> <button type="button" class="btn btn-info btn-sm waves-effect waves-light">Follow</button> </div> <div><a class="name" href="javascript:void(0)">Gwendolyn Wheeler</a></div> <small>@perttygirl66</small> </div> </div> </li> <li class="list-group-item"> <div class="media"> <div class="media-left"> <a class="avatar avatar-off" href="javascript:void(0)"> <img src="http://bootdey.com/img/Content/avatar/avatar1.png" alt=""> <i></i> </a> </div> <div class="media-body"> <div class="pull-right"> <button type="button" class="btn btn-info btn-sm waves-effect waves-light">Follow</button> </div> <div><a class="name" href="javascript:void(0)">Daniel Russell</a></div> <small>@danieltiger08</small> </div> </div> </li> </ul> </div> </div> </div> </div>
body{ margin-top:20px; background:#eee; } .avatar { position: relative; display: inline-block; width: 40px; white-space: nowrap; border-radius: 1000px; vertical-align: bottom } .avatar i { position: absolute; right: 0; bottom: 0; width: 10px; height: 10px; border: 2px solid #fff; border-radius: 100% } .avatar img { width: 100%; max-width: 100%; height: auto; border: 0 none; border-radius: 1000px } .avatar-online i { background-color: #4caf50 } .avatar-off i { background-color: #616161 } .avatar-busy i { background-color: #ff9800 } .avatar-away i { background-color: #f44336 } .avatar-100 { width: 100px } .avatar-100 i { height: 20px; width: 20px } .avatar-lg { width: 50px } .avatar-lg i { height: 12px; width: 12px } .avatar-sm { width: 30px } .avatar-sm i { height: 8px; width: 8px } .avatar-xs { width: 20px } .avatar-xs i { height: 7px; width: 7px } .list-group-item { position: relative; display: block; padding: 10px 15px; margin-bottom: -1px; background-color: #fff; border: 1px solid transparent; }
Dey-Dey

panel followers

Dey-Dey
  Mar 14th, 07:58
1.2K Views