<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.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 ----------> <div class="container"> <div class="row"> <div class="col-md-12"> <ul class="list-group" id="contact-list"> <li class="list-group-item"> <div class="col-xs-12 col-sm-3"> <img src="http://api.randomuser.me/portraits/men/49.jpg" alt="Scott Stevens" class="img-responsive img-circle" /> </div> <div class="col-xs-12 col-sm-9"> <span class="name">Scott Stevens</span><br/> </div> <div class="clearfix"></div> </li> <li class="list-group-item"> <div class="col-xs-12 col-sm-3"> <img src="http://api.randomuser.me/portraits/men/97.jpg" alt="Seth Frazier" class="img-responsive img-circle" /> </div> <div class="col-xs-12 col-sm-9"> <span class="name">Seth Frazier</span><br/> </div> <div class="clearfix"></div> </li> <li class="list-group-item"> <div class="col-xs-12 col-sm-3"> <img src="http://api.randomuser.me/portraits/women/90.jpg" alt="Jean Myers" class="img-responsive img-circle" /> </div> <div class="col-xs-12 col-sm-9"> </div> <div class="clearfix"></div> </li> <li class="list-group-item"> <div class="col-xs-12 col-sm-3"> <img src="http://api.randomuser.me/portraits/men/24.jpg" alt="Todd Shelton" class="img-responsive img-circle" /> </div> <div class="col-xs-12 col-sm-9"> </div> <div class="clearfix"></div> </li> <li class="list-group-item"> <div class="col-xs-12 col-sm-3"> <img src="http://api.randomuser.me/portraits/women/34.jpg" alt="Rosemary Porter" class="img-responsive img-circle" /> </div> <div class="col-xs-12 col-sm-9"> <span class="name">Rosemary Porter</span><br/> </div> <div class="clearfix"></div> </li> <li class="list-group-item"> <div class="col-xs-12 col-sm-3"> <img src="http://api.randomuser.me/portraits/women/56.jpg" alt="Debbie Schmidt" class="img-responsive img-circle" /> </div> <div class="col-xs-12 col-sm-9"> </div> <div class="clearfix"></div> </li> <li class="list-group-item"> <div class="col-xs-12 col-sm-3"> <img src="http://api.randomuser.me/portraits/women/76.jpg" alt="Glenda Patterson" class="img-responsive img-circle" /> </div> <div class="col-xs-12 col-sm-9"> <span class="name">Glenda Patterson</span><br/> </div> <div class="clearfix"></div> </li> </ul> </div> </div> </div> <div id="cant-do-all-the-work-for-you" class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true"> <div class="modal-dialog modal-sm"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h4 class="modal-title" id="mySmallModalLabel">Ooops!!!</h4> </div> </div> </div> </div> </div>

@import url(//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css); body { padding: 30px 0px 60px; } .panel > .list-group .list-group-item:first-child { /*border-top: 1px solid rgb(204, 204, 204);*/ } @media (max-width: 767px) { .visible-xs { display: inline-block !important; } .block { display: block !important; width: 100%; height: 1px !important; } } #back-to-bootsnipp { position: fixed; top: 10px; right: 10px; } .c-list { padding: 0px; min-height: 44px; } .title { display: inline-block; font-size: 1.7em; font-weight: bold; padding: 5px 15px; } ul.c-controls { list-style: none; margin: 0px; min-height: 44px; } ul.c-controls li { margin-top: 8px; float: left; } ul.c-controls li a { font-size: 1.7em; padding: 11px 10px 6px; } ul.c-controls li a i { min-width: 24px; text-align: center; } ul.c-controls li a:hover { background-color: rgba(51, 51, 51, 0.2); } .c-toggle { font-size: 1.7em; } .name { font-size: 1.7em; font-weight: 700; } .c-info { padding: 5px 10px; font-size: 1.25em; }