Bootstrap Snippet Simple gallery card 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
<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="//cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container-fluid" style="padding: 20px 40px; background-color: #F6F6F6;">
    <div class="row">
        <div class="col-xs-6 col-sm-3 col-md-3 col-lg-2">
            <div class="thumbnail">
                <a href="#" title="Visit design">
                    <img alt="" class="img-responsive" src="https://www.iliketowastemytime.com/sites/default/files/imagecache/blog_preview/golden-gate-bridge-san-francisco-wallpaper-iltwmt.jpg">
                </a>
                <a href="#" title="Visit UserName's profile">
                    <img width="40" height="40" class="img-rounded" alt="" src="https://www.threefifty.ca/images/threefifty-logo-lg.jpg">
                </a>
                <h3>
                    <a href="#" title="Title goes here">Title goes here</a><br>
                    <small>(6h ago) <a href="#" title="Visit UserName's profile">UserName</a></small>
                </h3>
                <div class="stats">
                    <small>
                        <span><a href="#"> <span class="glyphicon glyphicon-heart" aria-hidden="true"></span> 1 </a></span>
                        <span><a href="#"> <span class="glyphicon glyphicon-comment" aria-hidden="true"></span> <span>2</span></a></span>
                    </small>
                </div>
        </div>
</div>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
/* Card */
.thumbnail { padding-bottom: 4px; border-radius: 3px; line-height: 13px; border: 1px solid #EEE; position: relative; box-shadow: 1px 2px 8px rgba(0, 0, 0, 0.034); transition: all 0.25s ease; }
.thumbnail a:hover { text-decoration: none; }
.thumbnail:hover { box-shadow: 1px 2px 15px rgba(116, 189, 226, 0.25); transition: all 0.35s ease; }
.thumbnail h3 { font-size: 90%; margin: 0 0 0 3px; padding: 8px 10px 0 0; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; font-weight: 600; line-height: 18px; }
.thumbnail h3 a { color: #444; }
.thumbnail h3 a:hover { color: #EF6644; }
.thumbnail img.img-rounded { margin: 4px 4px 0 0; float: left; border-radius: 3px; }
.thumbnail small { font-size: 85%; color: #999; padding: 0 0 5px 0; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; }
.thumbnail small a { color: #999; text-decoration: none; }
.thumbnail small a:hover { color: #EF6644; }
.thumbnail .stats { line-height: 14px; bottom: 5px; right: 10px; position: absolute; background-color: #FFF; padding-left: 10px; }
.thumbnail .stats a { font-size: 95%; color: #BBB; text-decoration: none; }
.thumbnail .stats span { margin-left: 3px; }
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Simple gallery card"
Bootstrap 3.3.0 Snippet by YuriySklyar

Related: See More

Questions / Comments:

"Simple gallery card" Bootstrap 3.3.0 Snippet by YuriySklyar

Related: See More

Questions / Comments:

"Simple gallery card"
Bootstrap 3.3.0 Snippet by YuriySklyar