bootstrap gallery

spotlight, imagewall, polaroids, slider1, slider2

by secretgspot

HTML

<h2>Image wall</h2>
<div class="wk-gallery wk-gallery-wall clearfix zoom ">
    <a class="" href="//placehold.it/200x150" data-lightbox="group:504-4f1f1bcd3beed" title="Model 1"><img src="//placehold.it/200x150" width="200" height="150" alt="image1"></a>
    <a class="" href="//placehold.it/200x150" data-lightbox="group:504-4f1f1bcd3beed" title="Model 2"><img src="//placehold.it/200x150" width="200" height="150" alt="image2"></a>
    <a class="" href="//placehold.it/200x150" data-lightbox="group:504-4f1f1bcd3beed" title="Model 3"><img src="//placehold.it/200x150" width="200" height="150" alt="image3"></a>
    <a class="" href="//placehold.it/200x150" data-lightbox="group:504-4f1f1bcd3beed" title="Model 4"><img src="//placehold.it/200x150" width="200" height="150" alt="image4"></a>
    <a class="" href="//placehold.it/200x150" data-lightbox="group:504-4f1f1bcd3beed" title="Model 5"><img src="//placehold.it/200x150" width="200" height="150" alt="image5"></a>
    <a class="" href="//placehold.it/200x150" data-lightbox="group:504-4f1f1bcd3beed" title="Model 6"><img src="//placehold.it/200x150" width="200" height="150" alt="image6"></a>
</div>



<h2>Polaroids</h2>
<div class="wk-gallery wk-gallery-wall clearfix polaroid ">
    <a class="" href="//placehold.it/200x150" data-lightbox="group:506-4f1f1bcd3cbf6" title="Tony"><div><img src="//placehold.it/200x150" width="200" height="150" alt="image1"><p class="title">Tony</p></div></a>

    <a class="" href="//placehold.it/200x150" data-lightbox="group:506-4f1f1bcd3cbf6" title="Susan"><div><img src="//placehold.it/200x150" width="200" height="150" alt="image2"><p class="title">Susan</p></div></a>

    <a class="" href="//placehold.it/200x150" data-lightbox="group:506-4f1f1bcd3cbf6" title="Jennifer"><div><img src="//placehold.it/200x150" width="200" height="150" alt="image3"><p class="title">Jennifer</p></div></a>

    <a class="" href="//placehold.it/200x150" data-lightbox="group:506-4f1f1bcd3cbf6" title="Kim"><div><img...

CSS

.clearfix:before, .clearfix:after, .grid-block:before, .grid-block:after { content: ""; display: table;
}
.clearfix:after, .grid-block:after { clear: both
}
.grid-box { float: left
}
.width20 { width: 20%
}
.width25 { width: 25%
}
.width33 { width: 33.333%
}
.width50 { width: 50%
}
.wk-content>*:first-child { margin-top: 0
}
.wk-content>*:last-child { margin-bottom: 0
}
.wk-slideshow, .wk-slideshow
.slides { position: relative
}
.wk-slideshow .slides, .wk-slideshow
.nav { list-style: none; margin: 0; padding: 0;
}
.wk-slideshow .slides>li { position: absolute
}
.wk-slideshow .nav
li { cursor: pointer
}
.wk-slideshow .nav
span { display: block
}
.wk-slideshow .next, .wk-slideshow
.prev { position: absolute; z-index: 5; cursor: pointer;
}
.wk-slideshow
.caption { position: absolute; left: 0; right: 0; bottom: 0; z-index: 5; padding: 10px; background: rgba(0,0,0,0.5);
}
.wk-slideshow
.captions { display: none
}
.wk-slideshow .caption, .wk-slideshow .caption
a { color: #fff
}
.wk-slideshow .caption
a { text-decoration: underline
}
.wk-slideshow .wk-content > a:first-child, .wk-slideshow .wk-content > img:first-child, .wk-slideshow .wk-content>a:first-child>img { display: block
}
.wk-slideshow .slides > li > *, .wk-slideshow .slides>li>*>img { display: block
}
.wk-gallery
a { display: inline-block
}
.wk-gallery a>img:first-child { display: block
}
.wk-slideset
.sets { overflow: hidden
}
.wk-slideset .set, .wk-slideset
.nav { list-style: none; margin: 0; padding: 0;
}
.wk-slideset
.set { display: none; position: relative; margin: 0 auto; text-align: center;
}
.wk-slideset .set:first-child { display: block
}
.wk-slideset .set>li { display: inline-block
}
.wk-slideset .nav
span { display: block; cursor: pointer;
}
.wk-slideset .next, .wk-slideset
.prev { position: absolute; z-index: 5; cursor: pointer;
}
.wk-slideset .wk-content > a:first-child, .wk-slideset .wk-content > img:first-child, .wk-slideset .wk-content>a:first-child>img { display:...