<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 ----------> <a href="http://bootsnipp.com/mouse0270/snippets/4l0k2" class="btn btn-danger hide" id="back-to-bootsnipp">Back to Bootsnipp</a> <div class="container"> <div class="row"> <div class="col-xs-12 col-sm-offset-3 col-sm-6"> <div class="panel panel-default"> <div class="panel-heading c-list"> <span class="title">Пользователь</span> </div> <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">Калегин Ярослав</span><br/> <span class="glyphicon glyphicon-map-marker text-muted c-info" data-toggle="tooltip" data-placement="bottom" title="5842 Hillcrest Rd"></span> <span class="visible-xs"> <span class="text-muted">5842 Hillcrest Rd</span><br/></span> <span class="glyphicon glyphicon-earphone text-muted c-info" data-toggle="tooltip" data-placement="bottom" title="(870) 288-4149"></span> <span class="visible-xs"> <span class="text-muted">(870) 288-4149</span><br/></span> <span class="fa fa-comments text-muted c-info" data-toggle="tooltip" data-placement="bottom" title="scott.stevens@example.com"></span> <span class="visible-xs"> <span class="text-muted">scott.stevens@example.com</span><br/></span> </div> <div class="clearfix"></div> </li> </ul> </div> </div> </div> <!-- JavaScrip Search Plugin --> <script src="//rawgithub.com/stidges/jquery-searchable/master/dist/jquery.searchable-1.0.0.min.js"></script> </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; } } .c-list { padding: 0px; min-height: 44px; } .title { display: inline-block; font-size: 1.7em; font-weight: bold; padding: 5px 15px; } .name { font-size: 1.7em; font-weight: 700; } .c-info { padding: 10px 10px; font-size: 1.25em; }

$(function () { $('[data-toggle="tooltip"]').tooltip(); });