<div class="container">
<div class="row">
<h3>Click on Image to see larger version</h3>
<!-- Thumbnail image City-->
<a href="#" data-toggle="modal" data-target=".dialog1">
<img src="http://www.prepbootstrap.com/Content/images/template/thumbnailpopup/city_small.jpg" width="150" class="img-responsive img-rounded center-block" alt="" />
</a>
<hr />
<!-- Thumbnail image House-->
<a href="#" data-toggle="modal" data-target=".dialog2">
<img src="http://www.prepbootstrap.com/Content/images/template/thumbnailpopup/house_small.jpg" width="150" class="img-responsive img-rounded center-block" alt="" />
</a>
<hr />
<!-- Thumbnail image Galaxy-->
<a href="#" data-toggle="modal" data-target=".dialog3">
<img src="http://www.prepbootstrap.com/Content/images/template/thumbnailpopup/galaxy_small.jpg" width="150" class="img-responsive img-rounded center-block" alt="" />
</a>
<hr />
<!-- Modal content for City Image -->
<div class="modal fade dialog1" tabindex="-1">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">x</button>
<h4 class="modal-title" id="myLargeModalLabel-1">City</h4>
</div>
<div class="modal-body active">
<img src="http://www.prepbootstrap.com/Content/images/template/thumbnailpopup/city.jpg" class="img-responsive img-rounded center-block" alt="" />
</div>
</div>
</div>
</div>
<!-- Modal content for House Image -->
<div class="modal fade dialog2" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel-2" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">x</button>
<h4 class="modal-title" id="myLargeModalLabel-2">House</h4>
</div>
<div class="modal-body">
<img src="http://www.prepbootstrap.com/Content/images/template/thumbnailpopup/house.jpg" class="img-responsive img-rounded center-block" alt="" />
</div>
</div>
</div>
</div>
<!-- Modal content for House Image -->
<div class="modal fade dialog3" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel-2" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">x</button>
<h4 class="modal-title" id="myLargeModalLabel-3">Galaxy</h4>
</div>
<div class="modal-body">
<img src="http://www.prepbootstrap.com/Content/images/template/thumbnailpopup/galaxy.jpg" class="img-responsive img-rounded center-block" alt="" />
</div>
</div>
</div>
</div>
</div>
</div>