"List Grid View"
Bootstrap 3.0.0 Snippet by BhaumikPatel

<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://placehold.it/400x250/000/fff" 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="http://placehold.it/400x250/000/fff" 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="http://placehold.it/400x250/000/fff" 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="http://placehold.it/400x250/000/fff" 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="http://placehold.it/400x250/000/fff" 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="http://placehold.it/400x250/000/fff" 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> </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');}); });

Related: See More


Questions / Comments:

Completly amazing.

Luiz Arruda () - 6 years ago - Reply 0


i want to automatically generate this list/grid view based on the search result

Sheik Abdullah () - 7 years ago - Reply 0


Guys i want to automatically generate this based on the search result from the database in asp.net c#

Sheik Abdullah () - 7 years ago - Reply 0


is it possible to add pagination to this snippets ?

redocder () - 7 years ago - Reply 0


How can I make this responsive so images are arranged in a column on mobile devices?

oregondude () - 7 years ago - Reply 0


Hello guys,

do you know how I can fix this portfolio to be only displayed as a list?

Thanks :)

Alf () - 8 years ago - Reply 0


Thanks for the code! Working well so far. Now just hacking it up so it only works half as well

shookdesign () - 8 years ago - Reply 0


Great Preview, how can I apply the same concept in asp.net, but with content from the database

Vuyo20 () - 8 years ago - Reply 0


Hey did you ever find a solution to this?

Melanie Dick () - 7 years ago - Reply 0


It's not working well here. Click the below link please
http://snag.gy/Rk2mK.jpg
http://snag.gy/dgVWK.jpg

Hussain Sumrat () - 8 years ago - Reply 0


Seems like you are using Bootstrap 2 on your demo pages. This snippet is for Bootstrap version 3 so it wouldn't work with your page unless you update Bootstrap to version 3.

maxsurguy () - 8 years ago - Reply 0


Thank You brother. It's working better than previous.

Hussain Sumrat () - 8 years ago - Reply 0


How would you default to list view on mobile?

Travis () - 9 years ago - Reply 0


I am getting an error where floats are not being cleared properly.

e.g. http://snag.gy/ERldB.jpg

Alex () - 10 years ago - Reply 0


u can a min-height for the items

cici () - 9 years ago - Reply 0


the caption from thumbnail is visible only for the last row of the grid. on chrome

hls () - 10 years ago - Reply 0


I do not agree. - Works fine on Chrome Version 31 - OS: Windows 7 Professional

Alex () - 10 years ago - Reply 0


don't work on my firefox on Ubuntu.

gazgaz78 () - 10 years ago - Reply 0


I agree.
Don't work on firefox on Ubuntu.

add this jquery to #grid.onclick event.
$('#products .item').addClass('grid-group-item');

Florin Donald () - 10 years ago - Reply 0


how and where do i add that code,, when i click its not responsive

columbus () - 8 years ago - Reply 0


Thanks for support, now resolve this issue.

Bhaumik Patel () - 10 years ago - Reply 0


I confirm its works now ;)
Thanks

gazgaz78 () - 10 years ago - Reply 0