<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.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>Category Title</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-4 col-lg-4"> <div class="thumbnail"> <div class="caption"> <ul> <li> Silvia Bagnesi<BR> <a data-toggle="tooltip" title="Organization Name" class="orglink" href="http://www.testtix.com/Management/OrganizationSessionChange.asp?OrganizationNumber=2932">South Beach Duck Tours</a> </li> <li><span class="icon-stack"><i class="icon-circle icon-stack-base"></i><a data-toggle="tooltip" data-animation="true" title="Users Email Address"><i class="icon-envelope icon-light"></i></a></span> ducktours@email.com</li> <li><span class="icon-stack"><i class="icon-circle icon-stack-base"></i><a data-toggle="tooltip" title="Last Login Date"><i class="icon-calendar-empty icon-light"></i></a></span> 6/8/2014</li> <li><span class="icon-stack"><i class="icon-circle icon-stack-base"></i><i class="icon-ticket icon-light" data-toggle="tooltip" title="ticket icon"></i></span> DuckToursSouthBeach</li> </ul> </div> </div> </div> <div class="item col-xs-4 col-lg-4"> <div class="thumbnail"> <div class="caption"> <ul class="group inner row"> <li class="col-lg-3"> Silvia Bagnesi<BR> <a data-toggle="tooltip" title="Organization Name" class="orglink" href="http://www.testtix.com/Management/OrganizationSessionChange.asp?OrganizationNumber=2932">South Beach Duck Tours</a> </li> <li class="col-lg-3"><span class="icon-stack"><i class="icon-circle icon-stack-base"></i><a data-toggle="tooltip" data-animation="true" title="Users Email Address"><i class="icon-envelope icon-light"></i></a></span> ducktours@email.com</li> <li class="col-lg-3"><span class="icon-stack"><i class="icon-circle icon-stack-base"></i><a data-toggle="tooltip" title="Last Login Date"><i class="icon-calendar-empty icon-light"></i></a></span> 6/8/2014</li> <li class="col-lg-3"><span class="icon-stack"><i class="icon-circle icon-stack-base"></i><i class="icon-ticket icon-light" data-toggle="tooltip" title="ticket icon"></i></span> DuckToursSouthBeach</li> </ul> </div> </div> </div> <div class="item col-xs-4 col-lg-4"> <div class="thumbnail"> <div class="caption"> <h4 class="group inner list-group-item-heading"> Product title</h4> <p class="group inner list-group-item-text"> Product description... Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p> <div class="row"> <div class="col-xs-12 col-md-6"> <p class="lead"> $21.000</p> </div> </div> </div> </div> </div> <div class="item col-xs-4 col-lg-4"> <div class="thumbnail"> <div class="caption"> <h4 class="group inner list-group-item-heading"> Product title</h4> <p class="group inner list-group-item-text"> Product description... Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p> <div class="row"> <div class="col-xs-12 col-md-6"> <p class="lead"> $21.000</p> </div> </div> </div> </div> </div> <div class="item col-xs-4 col-lg-4"> <div class="thumbnail"> <div class="caption"> <h4 class="group inner list-group-item-heading"> Product title</h4> <p class="group inner list-group-item-text"> Product description... Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p> <div class="row"> <div class="col-xs-12 col-md-6"> <p class="lead"> $21.000</p> </div> </div> </div> </div> </div> <div class="item col-xs-4 col-lg-4"> <div class="thumbnail"> <div class="caption"> <h4 class="group inner list-group-item-heading"> Product title</h4> <p class="group inner list-group-item-text"> Product description... Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p> <div class="row"> <div class="col-xs-12 col-md-6"> <p class="lead"> $21.000</p> </div> </div> </div> </div> </div> </div> </div>

.glyphicon { margin-right:5px; } .thumbnail { margin-bottom: 20px; padding: 0px; -webkit-border-radius: 0px; -moz-border-radius: 0px; border-radius: 0px; } .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: 9px 9px 0px 9px; } .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');}); });