Bootstrap Snippet Gallery using HTML CSS Bootstrap

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
<link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.2.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-3 col-sm-4 col-xs-6">
                    <img class="img-responsive" src="http://2.bp.blogspot.com/-H6MAoWN-UIE/TuRwLbHRSWI/AAAAAAAABBk/89iiEulVsyg/s400/Free%2BNature%2BPhoto.jpg" />
                </div>
                <div class="col-md-3 col-sm-4 col-xs-6">
                    <img class="img-responsive" src="http://www.virginia.org/uploadedImages/virginiaorg/Images/OrgImages/H/HamptonConventionVisitorBureau/Grandview_Nature_Preserve.jpg?width=300&height=200&scale=upscalecanvas" />
                </div>
                <div class="col-md-3 col-sm-4 col-xs-6">
                    <img class="img-responsive" src="http://blog.arborday.org/wp-content/uploads/2013/02/NEC1-300x200.jpg" />
                </div>
                <div class="col-md-3 col-sm-4 col-xs-6">
                    <img class="img-responsive" src="http://th03.deviantart.net/fs70/200H/f/2010/256/0/9/painting_of_nature_by_dhikagraph-d2ynalq.jpg" />
                </div>
                <div class="col-md-3 col-sm-4 col-xs-6">
                    <img class="img-responsive" src="http://www.virginia.org/uploadedImages/virginiaorg/Images/OrgImages/H/HamptonConventionVisitorBureau/Grandview_Nature_Preserve.jpg?width=300&height=200&scale=upscalecanvas" />
                </div>
                <div class="col-md-3 col-sm-4 col-xs-6">
                    <img class="img-responsive" src="http://th03.deviantart.net/fs70/200H/f/2010/256/0/9/painting_of_nature_by_dhikagraph-d2ynalq.jpg" />
                </div>
                <div class="col-md-3 col-sm-4 col-xs-6">
                    <img class="img-responsive" src="http://2.bp.blogspot.com/-H6MAoWN-UIE/TuRwLbHRSWI/AAAAAAAABBk/89iiEulVsyg/s400/Free%2BNature%2BPhoto.jpg" />
                </div>
                <div class="col-md-3 col-sm-4 col-xs-6">
                    <img class="img-responsive" src="http://blog.arborday.org/wp-content/uploads/2013/02/NEC1-300x200.jpg" />
                </div>
            </div>
        </div>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
img {
            filter: gray; /* IE6-9 */
            -webkit-filter: grayscale(1); /* Google Chrome, Safari 6+ & Opera 15+ */
            -webkit-box-shadow: 0 2px 6px 2px rgba(0,0,0,0.75);
            -moz-box-shadow: 0 2px 6px 2px rgba(0,0,0,0.75);
            box-shadow: 0 2px 6px 2px rgba(0,0,0,0.75);
            margin-bottom: 20px;
        }
            img:hover {
                filter: none; /* IE6-9 */
                -webkit-filter: grayscale(0); /* Google Chrome, Safari 6+ & Opera 15+ */
                mouse:pointer;
            }
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Gallery"
Bootstrap 3.2.0 Snippet by crashlgnd

Related: See More

Questions / Comments:

"Gallery" Bootstrap 3.2.0 Snippet by crashlgnd

Related: See More

Questions / Comments:

"Gallery"
Bootstrap 3.2.0 Snippet by crashlgnd