"List Grid View"
Bootstrap 3.0.0 Snippet by BhaumikPatel

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<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">
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
.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;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
$(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');});
});
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More


Questions / Comments:

Completly amazing.

Luiz Arruda () - 7 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 () - 9 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 () - 9 years ago - Reply 0


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

Vuyo20 () - 9 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 () - 9 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 () - 9 years ago - Reply 0


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

Hussain Sumrat () - 9 years ago - Reply 0


How would you default to list view on mobile?

Travis () - 10 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 () - 10 years ago - Reply 0


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

hls () - 11 years ago - Reply 0


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

Alex () - 11 years ago - Reply 0


don't work on my firefox on Ubuntu.

gazgaz78 () - 11 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 () - 11 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 () - 11 years ago - Reply 0


I confirm its works now ;)
Thanks

gazgaz78 () - 11 years ago - Reply 0