<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<body>
<div class="container">
<h2 class="text-center"> IMAGE RESPONSIVE WITH HOVER EFFECT </h2>
<div class="row bottom">
<div class="col-md-3">
<img src="http://www.almanac.com/sites/default/files/image_nodes/sturgeon-moon.jpg" class="img-responsive"/>
<div class="caption border">
<h4>Image Responsive 1</h4><hr />
<p class="text-justify">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</div>
</div>
<div class="col-md-3 ">
<img src="http://www.almanac.com/sites/default/files/image_nodes/sturgeon-moon.jpg" class="img-responsive"/>
<div class="caption border">
<h4>Image Responsive 2</h4><hr />
<p class="text-justify">Lorem Ipsum is simply dummy text of vthe printing and typesetting industry.</p>
</div>
</div>
<div class="col-md-3 ">
<img src="http://www.almanac.com/sites/default/files/image_nodes/sturgeon-moon.jpg" class="img-responsive"/>
<div class="caption border">
<h4>Image Responsive 3</h4><hr />
<p class="text-justify">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</div>
</div>
<div class="col-md-3 ">
<img src="http://www.almanac.com/sites/default/files/image_nodes/sturgeon-moon.jpg" class="img-responsive"/>
<div class="caption border">
<h4>Image Responsive 4</h4><hr />
<p class="text-justify">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</div>
</div>
</div>
</div>
</body>
