<link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.2.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="row"> <div class="col-xs-3"> <div class="panel panel-default"> <div class="panel-heading c-list" style="background-color: #a00d00;"> <span class="title">Rank</span> </div> <ul class="list-group" > <li class="list-group-item"> <div class="col-xs-2" style="margin:0; padding-left:0"> <h2 style="margin:0; padding-left:0">1</h2> </div> <div class="col-xs-3" style="margin:0; padding-left:0"> <img src="http://api.randomuser.me/portraits/men/49.jpg" alt="Scott Stevens" width="40" /> </div> <div class="col-xs-7" style="margin:0; padding-left:0"> <h4 style="margin:0; padding-left:0">Scott Stevens</h4> <h5 style="margin:0; padding-left:0">Score 4.24</h5> </div> <div class="clearfix"></div> </li> </ul> </div> </div> </div>

$(function () { /* BOOTSNIPP FULLSCREEN FIX */ if (window.location == window.parent.location) { $('#back-to-bootsnipp').removeClass('hide'); } $('[data-toggle="tooltip"]').tooltip(); $('#fullscreen').on('click', function(event) { event.preventDefault(); window.parent.location = "http://bootsnipp.com/iframe/4l0k2"; }); $('a[href="#cant-do-all-the-work-for-you"]').on('click', function(event) { event.preventDefault(); $('#cant-do-all-the-work-for-you').modal('show'); }) $('[data-command="toggle-search"]').on('click', function(event) { event.preventDefault(); $(this).toggleClass('hide-search'); if ($(this).hasClass('hide-search')) { $('.c-search').closest('.row').slideUp(100); }else{ $('.c-search').closest('.row').slideDown(100); } }) $('#contact-list').searchable({ searchField: '#contact-list-search', selector: 'li', childSelector: '.col-xs-12', show: function( elem ) { elem.slideDown(100); }, hide: function( elem ) { elem.slideUp( 100 ); } }) });