AlexGH AlexGH - 22 days ago 6
CSS Question

Create gallery bootstrap

I want to display kind of a gallery, with maximum two images per row, with a description of the image just beneath every image, I need it to be responsive, I'm not an expert with bootstrap, this is my code:

<div class="container">
<div class="row">
<div class="col-md-6"> <a href="/Apps/Online" > <img src="~/images/aviation.jpg" style="max-height:300px;max-width:300px;" class="img-responsive" /> Aviation</a></div>
<div class="col-md-6"> <a href="/Apps/Printable" > <img src="~/images/International_photo.jpg" style="max-height:300px;max-width:300px;" class="img-responsive" /> International</a></div>
<div class="col-md-6"> <a href="/Apps/Online"> <img src="~/images/ship.jpg" style="max-height:300px;max-width:300px;" class="img-responsive" /> Marine</a> </div>
<div class="col-md-6"> <a href="/Apps/Printable" > <img src="~/images/longshore.jpg" style="max-height:300px;max-width:300px;" class="img-responsive" /> WC/Longshore</a> </div>
</div>






With the code above I'm getting the images of different sizes and they are not organized
I would like some responsive dessign like this:

image image
name_of_image name_of_image

image image
name_of_image name_of_image

Answer

How about using the existing Thumbnail-Class? http://getbootstrap.com/components/#thumbnails-custom-content

<div class="row">
  <div class="col-md-6">
    <div class="thumbnail">
      <img src="..." alt="...">
      <div class="caption">
        Text here
      </div>
    </div>
  </div>
  <div class="col-md-6">
    <div class="thumbnail">
      <img src="..." alt="...">
      <div class="caption">
        Text here
      </div>
    </div>
  </div>
</div>