THUMBNAILS
With Content
<div class="row"> <div class="col-sm-6 col-md-3"> <div class="thumbnail"> <img class="img-responsive" src="assets/images/demo/people/460x700/8-min.jpg" alt="" /> <div class="caption"> <h4>Thumbnail label</h4> <p>Donec id elit non mi porta gravida at eget metus id dolor.</p> <a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a> </div> </div> </div> <div class="col-sm-6 col-md-3"> <div class="thumbnail"> <img class="img-responsive" src="assets/images/demo/people/460x700/9-min.jpg" alt="" /> <div class="caption"> <h4>Thumbnail label</h4> <p>Donec id elit non mi porta gravida at eget metus id dolor.</p> <a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a> </div> </div> </div> <div class="col-sm-6 col-md-3"> <div class="thumbnail"> <img class="img-responsive" src="assets/images/demo/people/460x700/10-min.jpg" alt="" /> <div class="caption"> <h4>Thumbnail label</h4> <p>Donec id elit non mi porta gravida at eget metus id dolor.</p> <a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a> </div> </div> </div> <div class="col-sm-6 col-md-3"> <div class="thumbnail"> <img class="img-responsive" src="assets/images/demo/people/460x700/12-min.jpg" alt="" /> <div class="caption"> <h4>Thumbnail label</h4> <p>Donec id elit non mi porta gravida at eget metus id dolor.</p> <a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a> </div> </div> </div> </div>
Without Content
<div class="row"> <div class="col-sm-6 col-md-3"> <div class="thumbnail"> <img class="img-responsive" src="assets/images/demo/451x300/8-min.jpg" alt="" /> </div> </div> <div class="col-sm-6 col-md-3"> <div class="thumbnail"> <img class="img-responsive" src="assets/images/demo/451x300/9-min.jpg" alt="" /> </div> </div> <div class="col-sm-6 col-md-3"> <div class="thumbnail"> <img class="img-responsive" src="assets/images/demo/451x300/10-min.jpg" alt="" /> </div> </div> <div class="col-sm-6 col-md-3"> <div class="thumbnail"> <img class="img-responsive" src="assets/images/demo/451x300/12-min.jpg" alt="" /> </div> </div> </div>
Float Left
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quam, quaerat, sequi, architecto consequuntur quae placeat expedita facilis reprehenderit facere accusamus asperiores nam odit neque excepturi aut a dolor quisquam reiciendis dignissimos at molestiae tenetur fugit fuga. Vitae, numquam, assumenda cupiditate sint quam asperiores quae aut nemo ipsa ut mollitia rem necessitatibus officiis eveniet cum deleniti dolorum nostrum odio laudantium inventore autem dolore amet enim magni vel? Vero voluptas maxime dolore.
Quam, quaerat, sequi, architecto consequuntur quae placeat expedita facilis reprehenderit facere accusamus asperiores nam odit neque excepturi aut a dolor quisquam reiciendis dignissimos at molestiae tenetur fugit fuga. Vitae, numquam, assumenda cupiditate sint quam asperiores quae aut nemo ipsa ut mollitia rem necessitatibus officiis eveniet cum deleniti dolorum nostrum odio laudantium inventore autem dolore amet enim magni vel? Quam, quaerat, sequi, architecto consequuntur quae placeat expedita facilis reprehenderit facere accusamus asperiores nam odit neque excepturi assumenda cupiditate sint quam asperiores quae aut nemo ipsa ut mollitia rem necessitatibus.
<img class="pull-left img-responsive" src="assets/images/demo/451x300/31-min.jpg" width="300" alt="" /> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> <p>... MORE TEXT ...</p>
Float Right
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quam, quaerat, sequi, architecto consequuntur quae placeat expedita facilis reprehenderit facere accusamus asperiores nam odit neque excepturi aut a dolor quisquam reiciendis dignissimos at molestiae tenetur fugit fuga. Vitae, numquam, assumenda cupiditate sint quam asperiores quae aut nemo ipsa ut mollitia rem necessitatibus officiis eveniet cum deleniti dolorum nostrum odio laudantium inventore autem dolore amet enim magni vel? Vero voluptas maxime dolore.
Quam, quaerat, sequi, architecto consequuntur quae placeat expedita facilis reprehenderit facere accusamus asperiores nam odit neque excepturi aut a dolor quisquam reiciendis dignissimos at molestiae tenetur fugit fuga. Vitae, numquam, assumenda cupiditate sint quam asperiores quae aut nemo ipsa ut mollitia rem necessitatibus officiis eveniet cum deleniti dolorum nostrum odio laudantium inventore autem dolore amet enim magni vel? Quam, quaerat, sequi, architecto consequuntur quae placeat expedita facilis reprehenderit facere accusamus asperiores nam odit neque excepturi assumenda cupiditate sint quam asperiores quae aut nemo ipsa ut mollitia rem necessitatibus.
<img class="pull-right img-responsive" src="assets/images/demo/451x300/36-min.jpg" width="300" alt="" /> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> <p>... MORE TEXT ...</p>
Image Zoom
<!-- IMAGE ZOOM data-mode="mouseover|grab|click|toggle" --> <figure class="zoom" data-mode="mouseover"> <!-- zoom buttton positions available: .bottom-right .bottom-left .top-right .top-left --> <a class="lightbox top-right" href="assets/images/demo/mockups/1200x800/20-min.jpg" data-plugin-options='{"type":"image"}'><i class="glyphicon glyphicon-search"></i></a> <!-- high resolution image (1200px width recommended) --> <img class="img-responsive" src="assets/images/demo/mockups/1200x800/20-min.jpg" width="1200" height="800" alt="" /> </figure>
<div class="thumbnail"> <!-- IMAGE ZOOM data-mode="mouseover|grab|click|toggle" --> <figure id="zoom-primary" class="zoom" data-mode="mouseover"> <!-- zoom buttton positions available: .bottom-right .bottom-left .top-right .top-left --> <a class="lightbox bottom-right" href="assets/images/demo/mockups/1200x800/9-min.jpg" data-plugin-options='{"type":"image"}'> <i class="glyphicon glyphicon-search"></i> </a> <!-- image Extra: add .image-bw class to force black and white! --> <img class="img-responsive" src="assets/images/demo/mockups/1200x800/9-min.jpg" width="1200" height="1500" alt="" /> </figure> </div> <!-- Thumbnails (required height:100px) data-for = figure image id match --> <div data-for="zoom-primary" class="zoom-more owl-carousel owl-padding-3 featured" data-plugin-options='{"singleItem": false, "autoPlay": false, "navigation": true, "pagination": false}'> <a class="thumbnail active" href="assets/images/demo/mockups/1200x800/9-min.jpg"> <img src="assets/images/demo/mockups/150x100/9-min.jpg" height="100" alt="" /> </a> <a class="thumbnail" href="assets/images/demo/mockups/1200x800/10-min.jpg"> <img src="assets/images/demo/mockups/150x100/10-min.jpg" height="100" alt="" /> </a> <a class="thumbnail" href="assets/images/demo/mockups/1200x800/11-min.jpg"> <img src="assets/images/demo/mockups/150x100/11-min.jpg" height="100" alt="" /> </a> <a class="thumbnail" href="assets/images/demo/mockups/1200x800/12-min.jpg"> <img src="assets/images/demo/mockups/150x100/12-min.jpg" height="100" alt="" /> </a> <a class="thumbnail" href="assets/images/demo/mockups/1200x800/13-min.jpg"> <img src="assets/images/demo/mockups/150x100/13-min.jpg" height="100" alt="" /> </a> <a class="thumbnail" href="assets/images/demo/mockups/1200x800/14-min.jpg"> <img src="assets/images/demo/mockups/150x100/14-min.jpg" height="100" alt="" /> </a> <a class="thumbnail" href="assets/images/demo/mockups/1200x800/15-min.jpg"> <img src="assets/images/demo/mockups/150x100/15-min.jpg" height="100" alt="" /> </a> </div> <!-- /Thumbnails -->
Shadow
<!--
AVAILABLE SHADOWS
box-shadow-1
box-shadow-2
box-shadow-3
box-shadow-4
box-shadow-5
box-shadow-6
box-shadow-7
box-shadow-8
-->
<figure class="box-shadow-1">
<img class="img-responsive" src="assets/images/demo/600x400/4-min.jpg" alt="" />
</figure>