title: bootstrap multiple image gallery leaves a space in between
body: <p>I am using bootstrap and I am trying to make a gallery with multiple image along with the name below it. </p>
  
  <p>Code:</p>
  
  <pre><code>&lt;div class="col-lg-3 col-md-4 col-xs-6"&gt;
      &lt;a  href="#"&gt;
        &lt;img class="img-responsive" src="http://www.example.com/img" &gt;
        &lt;/br&gt;
        &lt;span&gt;name&lt;/span&gt;
      &lt;/a&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>This displays the different sized images and with random gaps in between rows and columns. How can I fix it and get all images structures properly. I want to open a page when I click on the image not image gallery.</p>