<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">
<img class="group list-group-image" src="http://img.bbystatic.com/BestBuy_US/store/rtb/2015/buyingguides/drones/images/advanced_drones_2.jpg" alt="" />
<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">
$2800.000</p>
</div>
<div class="col-xs-12 col-md-6">
<a class="btn btn-success" href="http://www.jquery2dotnet.com">Add to cart</a>
</div>
</div>
</div>
</div>
</div>
<div class="item col-xs-4 col-lg-4">
<div class="thumbnail">
<img class="group list-group-image" src="http://www.argos.co.uk/content/dam/argos/static-pages/features/drones/Drones_wk41_eCom_28.jpg" alt="" />
<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 class="col-xs-12 col-md-6">
<a class="btn btn-success" href="http://www.jquery2dotnet.com">Add to cart</a>
</div>
</div>
</div>
</div>
</div>
<div class="item col-xs-4 col-lg-4">
<div class="thumbnail">
<img class="group list-group-image" src="https://static.bhphoto.com/images/images250x250/1235779.jpg" alt="" />
<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">
$2000.000</p>
</div>
<div class="col-xs-12 col-md-6">
<a class="btn btn-success" href="http://www.jquery2dotnet.com">Add to cart</a>
</div>
</div>
</div>
</div>
</div>
<div class="item col-xs-4 col-lg-4">
<div class="thumbnail">
<img class="group list-group-image" src="https://s-media-cache-ak0.pinimg.com/originals/bd/3e/27/bd3e273dffdee049c5b8627020203210.jpg" alt="" />
<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">
$210.000</p>
</div>
<div class="col-xs-12 col-md-6">
<a class="btn btn-success" href="http://www.jquery2dotnet.com">Add to cart</a>
</div>
</div>
</div>
</div>
</div>
<div class="item col-xs-4 col-lg-4">
<div class="thumbnail">
<img class="group list-group-image" src="http://thumbs.picclick.com/00/s/NTMyWDg1MA==/z/eFcAAOSwjXRXZHdM/$/DJI-Phantom-3-Standard-Drone-Quadcopter-27K-HD-_1.jpg" alt="" />
<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">
$900.000</p>
</div>
<div class="col-xs-12 col-md-6">
<a class="btn btn-success" href="http://www.jquery2dotnet.com">Add to cart</a>
</div>
</div>
</div>
</div>
</div>
<div class="item col-xs-4 col-lg-4">
<div class="thumbnail">
<img class="group list-group-image" src="http://www.thisissierraleone.com/wp-content/uploads/2013/01/drones-in-africa.gif" alt="" />
<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">
$2,100,000.000</p>
</div>
<div class="col-xs-12 col-md-6">
<a class="btn btn-success" href="http://www.jquery2dotnet.com">Add to cart</a>
</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');});
});
