Bootstrap snippet: new contacts widget

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: contact,list,widget,dashboard



<div class="container bootstrap snippet"> <div class="row"> <div class="col-sm-6 col-xs-12"> <div class="panel panel-default"> <div class="panel-body bg-primary"> <h2 class="text-thin mt">New contacts</h2> <div class="clearfix"> <div class="pull-right"> <ul class="list-inline m0"> <li class="p0"> <a href=""> <img src="http://bootdey.com/img/Content/avatar/avatar1.png" alt="Follower" class="img-responsive img-circle thumb24"> </a> </li> <li class="p0"> <a href=""> <img src="http://bootdey.com/img/Content/avatar/avatar2.png" alt="Follower" class="img-responsive img-circle thumb24"> </a> </li> <li class="p0"> <a href=""> <img src="http://bootdey.com/img/Content/avatar/avatar3.png" alt="Follower" class="img-responsive img-circle thumb24"> </a> </li> <li class="p0"> <a href=""> <img src="http://bootdey.com/img/Content/avatar/avatar4.png" alt="Follower" class="img-responsive img-circle thumb24"> </a> </li> <li class="p0"> <a href="" class="v-middle"> <strong>+7</strong> </a> </li> </ul> </div> </div> </div> </div> </div> <div class="col-sm-6 col-xs-12"> <div class="panel panel-default"> <div class="panel-body bg-danger"> <h2 class="text-thin mt">New contacts</h2> <div class="clearfix"> <div class="pull-right"> <ul class="list-inline m0"> <li class="p0"> <a href=""> <img src="http://bootdey.com/img/Content/avatar/avatar5.png" alt="Follower" class="img-responsive img-circle thumb24"> </a> </li> <li class="p0"> <a href=""> <img src="http://bootdey.com/img/Content/avatar/avatar6.png" alt="Follower" class="img-responsive img-circle thumb24"> </a> </li> <li class="p0"> <a href=""> <img src="http://bootdey.com/img/Content/avatar/avatar7.png" alt="Follower" class="img-responsive img-circle thumb24"> </a> </li> <li class="p0"> <a href=""> <img src="http://bootdey.com/img/Content/avatar/avatar8.png" alt="Follower" class="img-responsive img-circle thumb24"> </a> </li> <li class="p0"> <a href="" class="v-middle"> <strong>+7</strong> </a> </li> </ul> </div> </div> </div> </div> </div> <div class="col-sm-6 col-xs-12"> <div class="panel panel-default"> <div class="panel-body bg-warning"> <h2 class="text-thin mt">New contacts</h2> <div class="clearfix"> <div class="pull-right"> <ul class="list-inline m0"> <li class="p0"> <a href=""> <img src="http://bootdey.com/img/Content/avatar/avatar1.png" alt="Follower" class="img-responsive img-circle thumb24"> </a> </li> <li class="p0"> <a href=""> <img src="http://bootdey.com/img/Content/avatar/avatar2.png" alt="Follower" class="img-responsive img-circle thumb24"> </a> </li> <li class="p0"> <a href=""> <img src="http://bootdey.com/img/Content/avatar/avatar3.png" alt="Follower" class="img-responsive img-circle thumb24"> </a> </li> <li class="p0"> <a href=""> <img src="http://bootdey.com/img/Content/avatar/avatar4.png" alt="Follower" class="img-responsive img-circle thumb24"> </a> </li> <li class="p0"> <a href="" class="v-middle"> <strong>+7</strong> </a> </li> </ul> </div> </div> </div> </div> </div> <div class="col-sm-6 col-xs-12"> <div class="panel panel-default"> <div class="panel-body bg-success"> <h2 class="text-thin mt">New contacts</h2> <div class="clearfix"> <div class="pull-right"> <ul class="list-inline m0"> <li class="p0"> <a href=""> <img src="http://bootdey.com/img/Content/avatar/avatar5.png" alt="Follower" class="img-responsive img-circle thumb24"> </a> </li> <li class="p0"> <a href=""> <img src="http://bootdey.com/img/Content/avatar/avatar6.png" alt="Follower" class="img-responsive img-circle thumb24"> </a> </li> <li class="p0"> <a href=""> <img src="http://bootdey.com/img/Content/avatar/avatar7.png" alt="Follower" class="img-responsive img-circle thumb24"> </a> </li> <li class="p0"> <a href=""> <img src="http://bootdey.com/img/Content/avatar/avatar8.png" alt="Follower" class="img-responsive img-circle thumb24"> </a> </li> <li class="p0"> <a href="" class="v-middle"> <strong>+7</strong> </a> </li> </ul> </div> </div> </div> </div> </div> </div> </div>
body{ margin-top:20px; } .panel { margin-bottom: 19px; background-color: #fff; border: 1px solid transparent; border-radius: 4px; -webkit-box-shadow: 0 2px 5px 0 rgba(0,0,0,.26); box-shadow: 0 2px 5px 0 rgba(0,0,0,.26); } .text-thin { font-weight: 100!important; } .mt, .mv { margin-top: 10px!important; } .h2, h2 { font-size: 27px; } .m0 { margin: 0!important; } .list-inline>li { display: inline-block; padding-left: 5px; padding-right: 5px; } .p0 { padding: 0!important; } .thumb24 { width: 24px!important; height: 24px!important; line-height: 24px!important; } .bg-primary a { color: #c5cae9; } .v-middle, [slider], slider { vertical-align: middle; }
Dey-Dey

new contacts widget

Dey-Dey
  Jan 18th, 08:39
1.2K Views