<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.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="well well-sm"> <strong>Search Results</strong> <div class="btn-group"> <a href="#" id="list" class="btn btn-default btn-sm"><span class="glyphicon glyphicon-th-list"> </span>List</a> <a href="#" id="grid" class="btn btn-default btn-sm"><span class="glyphicon glyphicon-th"></span>Grid</a> </div> </div> <div id="products" class="row list-group"> <div class="item col-xs-2 col-lg-2"> <div class="thumbnail"> <img class="group list-group-image" src="http://placehold.it/200x200/e3e3e3/fff" alt="" /> <div class="caption"> <h4 class="group inner list-group-item-heading">Person Name</h4> </div> </div> </div> <div class="item col-xs-2 col-lg-2"> <div class="thumbnail"> <img class="group list-group-image" src="http://placehold.it/200x200/e3e3e3/fff" alt="" /> <div class="caption"> <h4 class="group inner list-group-item-heading">Person Name</h4> </div> </div> </div> <div class="item col-xs-2 col-lg-2"> <div class="thumbnail"> <img class="group list-group-image" src="http://placehold.it/200x200/e3e3e3/fff" alt="" /> <div class="caption"> <h4 class="group inner list-group-item-heading">Person Name</h4> </div> </div> </div> <div class="item col-xs-2 col-lg-2"> <div class="thumbnail"> <img class="group list-group-image" src="http://placehold.it/200x200/e3e3e3/fff" alt="" /> <div class="caption"> <h4 class="group inner list-group-item-heading">Person Name</h4> </div> </div> </div> <div class="item col-xs-2 col-lg-2"> <div class="thumbnail"> <img class="group list-group-image" src="http://placehold.it/200x200/e3e3e3/fff" alt="" /> <div class="caption"> <h4 class="group inner list-group-item-heading">Person Name</h4> </div> </div> </div> <div class="item col-xs-2 col-lg-2"> <div class="thumbnail"> <img class="group list-group-image" src="http://placehold.it/200x200/e3e3e3/fff" alt="" /> <div class="caption"> <h4 class="group inner list-group-item-heading">Person Name</h4> </div> </div> </div> </div> </div>

.glyphicon { margin-right:5px; } .thumbnail { margin-bottom: 10px; padding: 0px; -webkit-border-radius: 0px; -moz-border-radius: 0px; border-radius: 0px; } .item h4 { font-size:12px; } .item.list-group-item { float: none; width: 100%; background-color: #fff; margin-bottom: 10px; } .item.list-group-item:nth-of-type(odd):hover,.item.list-group-item:hover { background: #428bca; } .item.list-group-item .list-group-image { margin-right: 10px; } .item.list-group-item .thumbnail { margin-bottom: 0px; } .item.list-group-item .caption { padding: 2px 2px 0px 2px; } .item.list-group-item:nth-of-type(odd) { background: #eeeeee; } .item.list-group-item:before, .item.list-group-item:after { display: table; content: " "; } .item.list-group-item img { float: left; } .item.list-group-item:after { clear: both; } .list-group-item-text { margin: 0 0 11px; }

$(document).ready(function() { $('#list').click(function(event){event.preventDefault();$('#products .item').addClass('list-group-item');}); $('#grid').click(function(event){event.preventDefault();$('#products .item').removeClass('list-group-item');$('#products .item').addClass('grid-group-item');}); });