"Full Responsive CSS Masonry Grid Gallery Or Blog"
Bootstrap 3.3.0 Snippet by AminulDev

Post to Facebook Tweet this

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="//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="row">
<div class="col-md-12">
<div class="well text-center"><h2>Full Responsive CSS Masonry Grid Gallery Or Blog</h2></div>
</div>
</div>
<div class="container">
<div id="masonry">
<div class="item">
<img src="http://placehold.it/1200x1200" alt="" />
</div>
<div class="item">
<img src="http://placehold.it/300x200" alt="" />
</div>
<div class="item">
<img src="http://placehold.it/300x300" alt="" />
</div>
<div class="item">
<img src="http://placehold.it/200x200" alt="" />
</div>
<div class="item">
<img src="http://placehold.it/300x250" alt="" />
</div>
<div class="item">
<img src="http://placehold.it/200x320" alt="" />
</div>
<div class="item">
<img src="http://placehold.it/300x200" alt="" />
</div>
<div class="item">
<img src="http://placehold.it/300x300" alt="" />
</div>
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
#masonry {
column-count: 2;
column-gap: 1em;
}
@media(min-width: 30em) {
#masonry {
column-count: 3;
column-gap: 1em;
}
}
@media(min-width: 40em) {
#masonry {
column-count: 4;
column-gap: 1em;
}
}
@media(min-width: 60em) {
#masonry {
column-count: 5;
column-gap: 1em;
}
}
@media(min-width: 75em) {
#masonry {
column-count: 6;
column-gap: 1em;
}
}
.item {
background-color: none;
display: inline-block;
margin: 0 0 1em 0;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
$('.item').click(function() {
$(this).toggleClass('active');
});
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Vue Material Kit
Bootstrap 4 Blog Carousel
arrow key navigation thumbnail gallery modal view
Responsive Invoice template

Questions / Comments:

Hi AminulDev,

I like your image gallery a lot, but I am struggling to find a way to make it accept captions for each image. Are you able to offer any advice on that?

Regards,

David

haggis999 () - 6 years ago - Reply 0

Problem solved. Simply adding <div class="caption"><p>Image Title</p></div> inside each image div was the answer. That was actually the first thing I tried before posting here earlier today, but I must have made a mistake, as it messed up the gallery with duplicated images. When I tried it again an hour ago, all was well.

haggis999 () - 6 years ago - Reply 0