"Pure css Responsive Masonry Gallery"
Bootstrap 3.0.0 Snippet by Shuvendu Dhenki

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="//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">
<h1>Pure Css Responsive Masonry Gallery</h1>
<div class="col-md-12">
<div class="row">
<hr>
<div class="gal">
<img src="https://preview.ibb.co/i0PmHk/1.jpg" alt="">
<img src="https://preview.ibb.co/mWpE3Q/2.jpg" alt="">
<img src="https://preview.ibb.co/i0PmHk/1.jpg" alt="">
<img src="https://preview.ibb.co/mysOxk/3.jpg" alt="">
<img src="https://preview.ibb.co/i0PmHk/1.jpg" alt="">
<img src="https://preview.ibb.co/mWpE3Q/2.jpg" alt="">
<img src="https://preview.ibb.co/i0PmHk/1.jpg" alt="">
<img src="https://preview.ibb.co/mysOxk/3.jpg" alt="">
<img src="https://preview.ibb.co/i0PmHk/1.jpg" alt="">
<img src="https://preview.ibb.co/i0PmHk/1.jpg" alt=""><img src="https://preview.ibb.co/i0PmHk/1.jpg" alt="">
<img src="https://preview.ibb.co/i0PmHk/1.jpg" alt="">
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
.gal {
-webkit-column-count: 3; /* Chrome, Safari, Opera */
-moz-column-count: 3; /* Firefox */
column-count: 3;
}
.gal img{ width: 100%; padding: 7px 0;}
@media (max-width: 500px) {
.gal {
-webkit-column-count: 1; /* Chrome, Safari, Opera */
-moz-column-count: 1; /* Firefox */
column-count: 1;
}
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Fresh Bootstrap Table
Team Design Section with Pure CSS Effect
arrow key navigation thumbnail gallery modal view
Responsive Invoice template

Questions / Comments: