gallery with small images

This bootstrap snippet called "gallery with small images" was created to help web designers,
front-end developers and back-end developer save time. Use it in your project and build your app faster,
You can also download the HTML, CSS, and JS code
tags: gallery,image

This is the HTML code for this bootstrap snippet

Copy, paste, change, customize and run the following HTML code to get a result like the one shown in the preview tab

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet">
<div class="container">
<div class="row">
    <!-- begin col-9 -->
    <div class="col-md-9">
        <!-- begin gallery-list -->
        <ul class="gallery-list">
            <li>
                <div class="image-container">
                    <div class="image">
                        <img src="https://lorempixel.com/200/200/nature/1/" alt="">
                    </div>
                    <div class="btn-list">
                        <a href="#" class="btn btn-white btn-xs"><i class="fa fa-search-plus"></i></a>
                        <a href="#" class="btn btn-white btn-xs"><i class="fa fa-cog"></i></a>
                    </div>
                    <div class="info">
                        <h5>Quisque a eleifend est, quis accumsan metus.</h5>
                        <small class="text-muted">24/08/2015</small>
                    </div>
                </div>
            </li>
            <li>
                <div class="image-container">
                    <div class="image">
                        <img src="https://lorempixel.com/200/200/nature/2/" alt="">
                    </div>
                    <div class="btn-list">
                        <a href="#" class="btn btn-white btn-xs"><i class="fa fa-search-plus"></i></a>
                        <a href="#" class="btn btn-white btn-xs"><i class="fa fa-cog"></i></a>
                    </div>
                    <div class="info">
                        <h5>Nunc posuere augue vitae mi egestas, in suscipit risus aliquet.</h5>
                        <small class="text-muted">24/08/2015</small>
                    </div>
                </div>
            </li>
            <li>
                <div class="image-container">
                    <div class="image">
                        <img src="https://lorempixel.com/200/200/nature/3/" alt="">
                    </div>
                    <div class="btn-list">
                        <a href="#" class="btn btn-white btn-xs"><i class="fa fa-search-plus"></i></a>
                        <a href="#" class="btn btn-white btn-xs"><i class="fa fa-cog"></i></a>
                    </div>
                    <div class="info">
                        <h5>Mauris erat odio, ullamcorper non lacus ac, pulvinar aliquet eros.</h5>
                        <small class="text-muted">25/08/2015</small>
                    </div>
                </div>
            </li>
            <li>
                <div class="image-container">
                    <div class="image">
                        <img src="https://lorempixel.com/200/200/nature/4/" alt="">
                    </div>
                    <div class="btn-list">
                        <a href="#" class="btn btn-white btn-xs"><i class="fa fa-search-plus"></i></a>
                        <a href="#" class="btn btn-white btn-xs"><i class="fa fa-cog"></i></a>
                    </div>
                    <div class="info">
                        <h5>Maecenas ornare, purus nec egestas dapibus, sem erat dapibus tellus.</h5>
                        <small class="text-muted">25/08/2015</small>
                    </div>
                </div>
            </li>
            <li>
                <div class="image-container">
                    <div class="image">
                        <img src="https://lorempixel.com/200/200/nature/5/" alt="">
                    </div>
                    <div class="btn-list">
                        <a href="#" class="btn btn-white btn-xs"><i class="fa fa-search-plus"></i></a>
                        <a href="#" class="btn btn-white btn-xs"><i class="fa fa-cog"></i></a>
                    </div>
                    <div class="info">
                        <h5>Sed nec justo condimentum, gravida massa id, elementum mauris.</h5>
                        <small class="text-muted">27/08/2015</small>
                    </div>
                </div>
            </li>
            <li>
                <div class="image-container">
                    <div class="image">
                        <img src="https://lorempixel.com/200/200/nature/6/" alt="">
                    </div>
                    <div class="btn-list">
                        <a href="#" class="btn btn-white btn-xs"><i class="fa fa-search-plus"></i></a>
                        <a href="#" class="btn btn-white btn-xs"><i class="fa fa-cog"></i></a>
                    </div>
                    <div class="info">
                        <h5>Donec eget velit quis libero congue blandit.</h5>
                        <small class="text-muted">28/08/2015</small>
                    </div>
                </div>
            </li>
            <li>
                <div class="image-container">
                    <div class="image">
                        <img src="https://lorempixel.com/200/200/nature/7/" alt="">
                    </div>
                    <div class="btn-list">
                        <a href="#" class="btn btn-white btn-xs"><i class="fa fa-search-plus"></i></a>
                        <a href="#" class="btn btn-white btn-xs"><i class="fa fa-cog"></i></a>
                    </div>
                    <div class="info">
                        <h5>Fusce suscipit suscipit nisi eu tempus.</h5>
                        <small class="text-muted">28/08/2015</small>
                    </div>
                </div>
            </li>
            <li>
                <div class="image-container">
                    <div class="image">
                        <img src="https://lorempixel.com/200/200/sports/1/" alt="">
                    </div>
                    <div class="btn-list">
                        <a href="#" class="btn btn-white btn-xs"><i class="fa fa-search-plus"></i></a>
                        <a href="#" class="btn btn-white btn-xs"><i class="fa fa-cog"></i></a>
                    </div>
                    <div class="info">
                        <h5>Cras interdum nisl ut lacus accumsan varius.</h5>
                        <small class="text-muted">28/08/2015</small>
                    </div>
                </div>
            </li>
            <li>
                <div class="image-container">
                    <div class="image">
                        <img src="https://lorempixel.com/200/200/sports/2/" alt="">
                    </div>
                    <div class="btn-list">
                        <a href="#" class="btn btn-white btn-xs"><i class="fa fa-search-plus"></i></a>
                        <a href="#" class="btn btn-white btn-xs"><i class="fa fa-cog"></i></a>
                    </div>
                    <div class="info">
                        <h5>Praesent quis porta sapien.</h5>
                        <small class="text-muted">28/08/2015</small>
                    </div>
                </div>
            </li>
            <li>
                <div class="image-container">
                    <div class="image">
                        <img src="https://lorempixel.com/200/200/sports/3/" alt="">
                    </div>
                    <div class="btn-list">
                        <a href="#" class="btn btn-white btn-xs"><i class="fa fa-search-plus"></i></a>
                        <a href="#" class="btn btn-white btn-xs"><i class="fa fa-cog"></i></a>
                    </div>
                    <div class="info">
                        <h5>Duis pulvinar est ac sem tincidunt dictum.</h5>
                        <small class="text-muted">28/08/2015</small>
                    </div>
                </div>
            </li>
            <li>
                <div class="image-container">
                    <div class="image">
                        <img src="https://lorempixel.com/200/200/sports/4/" alt="">
                    </div>
                    <div class="btn-list">
                        <a href="#" class="btn btn-white btn-xs"><i class="fa fa-search-plus"></i></a>
                        <a href="#" class="btn btn-white btn-xs"><i class="fa fa-cog"></i></a>
                    </div>
                    <div class="info">
                        <h5>Praesent tempor iaculis dolor.</h5>
                        <small class="text-muted">28/08/2015</small>
                    </div>
                </div>
            </li>
            <li>
                <div class="image-container">
                    <div class="image">
                        <img src="https://lorempixel.com/200/200/sports/5/" alt="">
                    </div>
                    <div class="btn-list">
                        <a href="#" class="btn btn-white btn-xs"><i class="fa fa-search-plus"></i></a>
                        <a href="#" class="btn btn-white btn-xs"><i class="fa fa-cog"></i></a>
                    </div>
                    <div class="info">
                        <h5>Pellentesque feugiat varius magna at rutrum.</h5>
                        <small class="text-muted">28/08/2015</small>
                    </div>
                </div>
            </li>
            <li>
                <div class="image-container">
                    <div class="image">
                        <img src="https://lorempixel.com/200/200/sports/6/" alt="">
                    </div>
                    <div class="btn-list">
                        <a href="#" class="btn btn-white btn-xs"><i class="fa fa-search-plus"></i></a>
                        <a href="#" class="btn btn-white btn-xs"><i class="fa fa-cog"></i></a>
                    </div>
                    <div class="info">
                        <h5>Fusce dictum nulla in nunc finibus.</h5>
                        <small class="text-muted">28/08/2015</small>
                    </div>
                </div>
            </li>
            <li>
                <div class="image-container">
                    <div class="image">
                        <img src="https://lorempixel.com/200/200/sports/7/" alt="">
                    </div>
                    <div class="btn-list">
                        <a href="#" class="btn btn-white btn-xs"><i class="fa fa-search-plus"></i></a>
                        <a href="#" class="btn btn-white btn-xs"><i class="fa fa-cog"></i></a>
                    </div>
                    <div class="info">
                        <h5>Duis pulvinar est ac sem tincidunt dictum.</h5>
                        <small class="text-muted">28/08/2015</small>
                    </div>
                </div>
            </li>
            <li>
                <div class="image-container">
                    <div class="image">
                        <img src="https://lorempixel.com/200/200/sports/8/" alt="">
                    </div>
                    <div class="btn-list">
                        <a href="#" class="btn btn-white btn-xs"><i class="fa fa-search-plus"></i></a>
                        <a href="#" class="btn btn-white btn-xs"><i class="fa fa-cog"></i></a>
                    </div>
                    <div class="info">
                        <h5>Phasellus consequat tortor vitae magna iaculis.</h5>
                        <small class="text-muted">29/08/2015</small>
                    </div>
                </div>
            </li>
            <li>
                <div class="image-container">
                    <div class="image">
                        <img src="https://lorempixel.com/200/200/nature/1/" alt="">
                    </div>
                    <div class="btn-list">
                        <a href="#" class="btn btn-white btn-xs"><i class="fa fa-search-plus"></i></a>
                        <a href="#" class="btn btn-white btn-xs"><i class="fa fa-cog"></i></a>
                    </div>
                    <div class="info">
                        <h5>Praesent pretium tempor ante sit amet finibus.</h5>
                        <small class="text-muted">29/08/2015</small>
                    </div>
                </div>
            </li>
            <li>
                <div class="image-container">
                    <div class="image">
                        <img src="https://lorempixel.com/200/200/nature/2/" alt="">
                    </div>
                    <div class="btn-list">
                        <a href="#" class="btn btn-white btn-xs"><i class="fa fa-search-plus"></i></a>
                        <a href="#" class="btn btn-white btn-xs"><i class="fa fa-cog"></i></a>
                    </div>
                    <div class="info">
                        <h5>Vestibulum egestas placerat purus.</h5>
                        <small class="text-muted">30/08/2015</small>
                    </div>
                </div>
            </li>
            <li>
                <div class="image-container">
                    <div class="image">
                        <img src="https://lorempixel.com/200/200/nature/3/" alt="">
                    </div>
                    <div class="btn-list">
                        <a href="#" class="btn btn-white btn-xs"><i class="fa fa-search-plus"></i></a>
                        <a href="#" class="btn btn-white btn-xs"><i class="fa fa-cog"></i></a>
                    </div>
                    <div class="info">
                        <h5>Aliquam consequat blandit purus quis sodales.</h5>
                        <small class="text-muted">31/08/2015</small>
                    </div>
                </div>
            </li>
            <li>
                <div class="image-container">
                    <div class="image">
                        <img src="https://lorempixel.com/200/200/nature/4/" alt="">
                    </div>
                    <div class="btn-list">
                        <a href="#" class="btn btn-white btn-xs"><i class="fa fa-search-plus"></i></a>
                        <a href="#" class="btn btn-white btn-xs"><i class="fa fa-cog"></i></a>
                    </div>
                    <div class="info">
                        <h5>Lorem ipsum dolor sit amet.</h5>
                        <small class="text-muted">31/08/2015</small>
                    </div>
                </div>
            </li>
            <li>
                <div class="image-container">
                    <div class="image">
                        <img src="https://lorempixel.com/200/200/nature/5/" alt="">
                    </div>
                    <div class="btn-list">
                        <a href="#" class="btn btn-white btn-xs"><i class="fa fa-search-plus"></i></a>
                        <a href="#" class="btn btn-white btn-xs"><i class="fa fa-cog"></i></a>
                    </div>
                    <div class="info">
                        <h5>Suspendisse varius est dui.</h5>
                        <small class="text-muted">31/08/2015</small>
                    </div>
                </div>
            </li>
        </ul>
        <!-- end gallery-list -->
    </div>
    <!-- end col-9 -->
    <!-- begin col-3 -->
    <div class="col-md-3">
        <!-- begin panel -->
        <div class="panel p-20">
            <h5 class="m-t-0">Search Images</h5>
            <form class="form-input-flat">
                <div class="input-group m-b-15">
                    <input type="text" class="form-control" placeholder="Enter keywords...">
                    <div class="input-group-btn">
                        <button type="submit" class="btn btn-default"><i class="fa fa-search"></i></button>
                    </div>
                </div>
            </form>
            <div class="horizontal-divider m-0 m-b-15"></div>
            <h5 class="m-t-0">Filter By Category</h5>
            <form class="form-input-flat">
                <div class="form-group m-b-15">
                    <select class="form-control"> 
                        <option value="">All Category</option>
                        <option value="">Nature</option>
                        <option value="">Car</option>
                        <option value="">People</option>
                        <option value="">Food</option>
                    </select>
                </div>
            </form>
            <div class="horizontal-divider m-0 m-b-15"></div>
            <h5 class="m-t-0">Tags</h5>
            <ul class="tag-list m-b-10">
                <li><a href="#">Forest</a></li>
                <li><a href="#">Animals</a></li>
                <li><a href="#">People</a></li>
                <li><a href="#">Technology</a></li>
                <li><a href="#">iPhone</a></li>
                <li><a href="#">Food</a></li>
                <li><a href="#">Media</a></li>
                <li><a href="#">Building</a></li>
                <li><a href="#">Camera</a></li>
                <li><a href="#">Insect</a></li>
                <li><a href="#">Food &amp; Drink</a></li>
                <li><a href="#">Nature</a></li>
                <li><a href="#">Objects</a></li>
                <li><a href="#">Car</a></li>
            </ul>
            <div class="horizontal-divider m-0 m-b-15"></div>
            <div class="text-center">
                <a href="#" class="btn btn-rounded btn-default btn-sm"><i class="fa fa-plus"></i> Upload New Images</a>
            </div>
        </div>
        <!-- end panel -->
    </div>
    <!-- end col-3 -->
</div>
</div>

This is the CSS code for this bootstrap snippet

Copy, paste, change, customize and run the following CSS code to get a result Like the one shown in the preview

body{margin-top:20px;
background:#eee;
}

.p-20, .wrapper {
    padding: 20px!important;
}

.btn.btn-white {
    color: #30373e;
    background: #fff;
    -webkit-box-shadow: 0 1px #b1b5b8;
    box-shadow: 0 1px #b1b5b8;
}

.gallery-list {
    list-style-type: none;
    margin: -5px -5px 15px;
    padding: 0
}

.gallery-list>li {
    float: left;
    width: 20%;
    padding: 5px
}

.gallery-list>li .image-container {
    border-radius: 5px;
    background: #fff;
    position: relative;
    -webkit-box-shadow: 0 2px 0 rgba(0, 0, 0, .07);
    box-shadow: 0 2px 0 rgba(0, 0, 0, .07)
}

.gallery-list>li .image {
    padding-top: 60%;
    position: relative;
    overflow: hidden;
    border-radius: 5px 5px 0 0
}

.gallery-list>li .image img {
    max-width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000
}

.gallery-list>li .btn-list {
    position: absolute;
    left: 10px;
    top: 10px;
    right: 10px;
    z-index: 1020
}

.gallery-list>li .info {
    padding: 8px 10px
}

.gallery-list>li .info * {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.gallery-list>li .info h5 {
    margin: 0;
    font-size: 12px
}

@media (max-width:991px) {
    .gallery-list>li {
        width: 33.33%
    }
}

@media (max-width:480px) {
    .gallery-list>li {
        width: 50%
    }
}



.tag-list {
    list-style-type: none;
    margin: 0;
    padding: 0
}

.tag-list>li {
    float: left;
    margin-right: 5px;
    margin-bottom: 5px
}

.tag-list>li a,
.tag-list>li span {
    border: 2px solid #ebeced;
    border-radius: 40px;
    color: #30373e;
    font-size: 11px;
    padding: 2px 8px;
    display: block
}

.tag-list>li.active a,
.tag-list>li.active span {
    color: #30373e;
    border-color: #30373e
}
                                    

Information about this bootstrap snippet

Creator: Dey Dey

Bootstrap version: 3.3.6

Created: Apr 13th 2016, 16:23

Views: 3.4K

Rated 5/5 based on 5 reviews