Gallery of images

This bootstrap snippet called "Gallery of 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,images

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

<div class="container">
<div class="portfolioContainer">
    <div class="col-sm-6 col-lg-3 col-md-4 webdesign illustrator">
        <div class="gal-detail thumb">
            <a href="#" class="image-popup" title="Screenshot-1">
                <img src="https://lorempixel.com/400/280/nature/1/" class="thumb-img" alt="work-thumbnail">
            </a>
            <h4 class="text-center">Gallary Image</h4>
            <div class="ga-border"></div>
            <p class="text-muted text-center"><small>Photography</small></p>
        </div>
    </div>

    <div class="col-sm-6 col-lg-3 col-md-4 graphicdesign illustrator photography">
        <div class="gal-detail thumb">
            <a href="#" class="image-popup" title="Screenshot-2">
                <img src="https://lorempixel.com/400/280/nature/2/" class="thumb-img" alt="work-thumbnail">
            </a>
            <h4 class="text-center">Gallary Image</h4>
            <div class="ga-border"></div>
            <p class="text-muted text-center"><small>Photography</small></p>
        </div>
    </div>

    <div class="col-sm-6 col-lg-3 col-md-4 webdesign graphicdesign">
        <div class="gal-detail thumb">
            <a href="#" class="image-popup" title="Screenshot-3">
                <img src="https://lorempixel.com/400/280/nature/3/" class="thumb-img" alt="work-thumbnail">
            </a>
            <h4 class="text-center">Gallary Image</h4>
            <div class="ga-border"></div>
            <p class="text-muted text-center"><small>Photography</small></p>
        </div>
    </div>

    <div class="col-sm-6 col-lg-3 col-md-4 illustrator photography">
        <div class="gal-detail thumb">
            <a href="#" class="image-popup" title="Screenshot-4">
                <img src="https://lorempixel.com/400/280/nature/4/" class="thumb-img" alt="work-thumbnail">
            </a>
            <h4 class="text-center">Gallary Image</h4>
            <div class="ga-border"></div>
            <p class="text-muted text-center"><small>Photography</small></p>
        </div>
    </div>

    <div class="col-sm-6 col-lg-3 col-md-4 graphicdesign photography">
        <div class="gal-detail thumb">
            <a href="#" class="image-popup" title="Screenshot-5">
                <img src="https://lorempixel.com/400/280/nature/5/" class="thumb-img" alt="work-thumbnail">
            </a>
            <h4 class="text-center">Gallary Image</h4>
            <div class="ga-border"></div>
            <p class="text-muted text-center"><small>Photography</small></p>
        </div>
    </div>

    <div class="col-sm-6 col-lg-3 col-md-4 webdesign photography">
        <div class="gal-detail thumb">
            <a href="#" class="image-popup" title="Screenshot-6">
                <img src="https://lorempixel.com/400/280/nature/6/" class="thumb-img" alt="work-thumbnail">
            </a>
            <h4 class="text-center">Gallary Image</h4>
            <div class="ga-border"></div>
            <p class="text-muted text-center"><small>Photography</small></p>
        </div>
    </div>

    <div class="col-sm-6 col-lg-3 col-md-4 illustrator photography graphicdesign">
        <div class="gal-detail thumb">
            <a href="#" class="image-popup" title="Screenshot-7">
                <img src="https://lorempixel.com/400/280/nature/7/" class="thumb-img" alt="work-thumbnail">
            </a>
            <h4 class="text-center">Gallary Image</h4>
            <div class="ga-border"></div>
            <p class="text-muted text-center"><small>Photography</small></p>
        </div>
    </div>

    <div class="col-sm-6 col-lg-3 col-md-4 graphicdesign photography webdesign">
        <div class="gal-detail thumb">
            <a href="#" class="image-popup" title="Screenshot-8">
                <img src="https://lorempixel.com/400/280/nature/1/" class="thumb-img" alt="work-thumbnail">
            </a>
            <h4 class="text-center">Gallary Image</h4>
            <div class="ga-border"></div>
            <p class="text-muted text-center"><small>Photography</small></p>
        </div>
    </div>

    <div class="col-sm-6 col-lg-3 col-md-4 webdesign illustrator">
        <div class="gal-detail thumb">
            <a href="#" class="image-popup" title="Screenshot-9">
                <img src="https://lorempixel.com/400/280/nature/2/" class="thumb-img" alt="work-thumbnail">
            </a>
            <h4 class="text-center">Gallary Image</h4>
            <div class="ga-border"></div>
            <p class="text-muted text-center"><small>Photography</small></p>
        </div>
    </div>

    <div class="col-sm-6 col-lg-3 col-md-4 photography graphicdesign">
        <div class="gal-detail thumb">
            <a href="#" class="image-popup" title="Screenshot-10">
                <img src="https://lorempixel.com/400/280/nature/5/" class="thumb-img" alt="work-thumbnail">
            </a>
            <h4 class="text-center">Gallary Image</h4>
            <div class="ga-border"></div>
            <p class="text-muted text-center"><small>Photography</small></p>
        </div>
    </div>

    <div class="col-sm-6 col-lg-3 col-md-4 graphicdesign photography">
        <div class="gal-detail thumb">
            <a href="#" class="image-popup" title="Screenshot-11">
                <img src="https://lorempixel.com/400/280/nature/6/" class="thumb-img" alt="work-thumbnail">
            </a>
            <h4 class="text-center">Gallary Image</h4>
            <div class="ga-border"></div>
            <p class="text-muted text-center"><small>Photography</small></p>
        </div>
    </div>

    <div class="col-sm-6 col-lg-3 col-md-4 webdesign graphicdesign illustrator">
        <div class="gal-detail thumb">
            <a href="#" class="image-popup" title="Screenshot-12">
                <img src="https://lorempixel.com/400/280/nature/3/" class="thumb-img" alt="work-thumbnail">
            </a>
            <h4 class="text-center">Gallary Image</h4>
            <div class="ga-border"></div>
            <p class="text-muted text-center"><small>Photography</small></p>
        </div>
    </div>

</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;
}

/* ===========
   Gallery
 =============*/
.portfolioFilter a {
  -moz-box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.1);
  -moz-transition: all 0.3s ease-out;
  -ms-transition: all 0.3s ease-out;
  -o-transition: all 0.3s ease-out;
  -webkit-box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.1);
  -webkit-transition: all 0.3s ease-out;
  box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.1);
  color: #333333;
  padding: 5px 10px;
  display: inline-block;
  transition: all 0.3s ease-out;
}
.portfolioFilter a:hover {
  background-color: #228bdf;
  color: #ffffff;
}
.portfolioFilter a.current {
  background-color: #228bdf;
  color: #ffffff;
}
.thumb {
  background-color: #ffffff;
  border-radius: 3px;
  box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1);
  margin-top: 30px;
  padding-bottom: 10px;
  padding-left: 10px;
  padding-right: 10px;
  padding-top: 10px;
  width: 100%;
}
.thumb-img {
  border-radius: 2px;
  overflow: hidden;
  width: 100%;
}
.gal-detail h4 {
  margin: 16px auto 10px auto;
  width: 80%;
  white-space: nowrap;
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
}
.gal-detail .ga-border {
  height: 3px;
  width: 40px;
  background-color: #228bdf;
  margin: 10px auto;
}
                                    

Information about this bootstrap snippet

Creator: Dey Dey

Bootstrap version: 3.3.6

Created: Apr 30th 2016, 00:17

Views: 5.0K

Rated 5/5 based on 6 reviews