Q:

Bootstrap Website Images Do Not Line Up Perfectly

This Bootstrap-based website for an artist has tiling photo galleries. I've noticed that they look great except on screens below about 768 pixels. Then, the images tile with gaps in between them. Sometimes it seems to happen when the text box below the image exceeds 3 lines. I also notice that some of the image that are rectangular have this issue (the photo galleries seem to work best with square images) but all the image widths are the same so it shouldn't really be an issue.
How can I remedy this so that the galleries tile perfectly regardless of the amount of text under the photos, and regardless of the image height?
This is what the code for the photo galleries looks like:
<div class="portfolio-thumbs-wrapper">

    <!-- row 1 //-->
    <div class="row portfolio-thumbs leading">
        <div class="col-lg-3 col-xs-6">
            <a href="assets/img/portfolio/panel/Eye Witness 2014.jpg">
                <img src="assets/img/portfolio/panel/Eye Witness 2014t.jpg" alt="Eric K. Eickmann Visual Artist Burlington, VT Eye Witness 2014"/>
                <p>EYE WITNESS, 2014 <br>Acrylic on Panel 9" x 15.25"</p>
            </a>
        </div>
        <div class="col-lg-3 col-xs-6">
            <a href="assets/img/portfolio/panel/Ghost 2014.jpg">
                <img src="assets/img/portfolio/panel/Ghost 2014t.jpg" alt="Eric K. Eickmann Visual Artist Burlington, VT Ghost 2014"/>
                <p>GHOST, 2014 <br>Acrylic on Panel 12" x 12"</p>
            </a>
        </div>
        <div class="col-lg-3 col-xs-6">
            <a href="assets/img/portfolio/panel/Her Feelings 2014.jpg">
                <img src="assets/img/portfolio/panel/Her Feelings 2014t.jpg" alt="Eric K. Eickmann Visual Artist Burlington, VT Her Feelings 2014"/>
                <p>HER FEELINGS, 2014 <br>Acrylic on Panel 6"x 16"</p>
            </a>
        </div>
        <div class="col-lg-3 col-xs-6">
            <a href="assets/img/portfolio/panel/In Hind Sight 2014.jpg">
                <img src="assets/img/portfolio/panel/In Hind Sight 2014t.jpg" alt="Eric K. Eickmann Visual Artist Burlington, VT In Hind Sight 2014"/>
                <p>IN HIND SIGHT, 2014 <br>Acrylic on Panel 7" x 7.5"</p>
            </a>
        </div>
    </div>
    <!-- row 2 //-->
    <div class="row portfolio-thumbs leading">
        <div class="col-lg-3 col-xs-6">
            <a href="assets/img/portfolio/panel/Lonesome Form 2014.jpg">
                <img src="assets/img/portfolio/panel/Lonesome Form 2014t.jpg" alt="Eric K. Eickmann Visual Artist Burlington, VT Lonesome Form 2014"/>
                <p>LONESOME FORM, 2014 <br>Acrylic on Panel 10" x 7.5"</p>
            </a>
        </div>
        <div class="col-lg-3 col-xs-6">
            <a href="assets/img/portfolio/panel/Model Nude 2014.jpg">
                <img src="assets/img/portfolio/panel/Model Nude 2014t.jpg" alt="Eric K. Eickmann Visual Artist Burlington, VT Model Nude 2014"/>
                <p>MODEL NUDE, 2014 <br>Acrylic on Panel 5.5 x 4.25</p>
            </a>
        </div>
        <div class="col-lg-3 col-xs-6">
            <a href="assets/img/portfolio/panel/Models and Actresses All 2014.jpg">
                <img src="assets/img/portfolio/panel/Models and Actresses All 2014t.jpg" alt="Eric K. Eickmann Visual Artist Burlington, VT Models and Actresses 2014"/>
                <p>MODELS AND ACTRESSES, 2014 <br>Print on Panel 2" x 2" (each)</p>
            </a>
        </div>
        <div class="col-lg-3 col-xs-6">
            <a href="assets/img/portfolio/panel/Models and Actresses Blue 2014.jpg">
                <img src="assets/img/portfolio/panel/Models and Actresses Blue 2014t.jpg" alt="Eric K. Eickmann Visual Artist Burlington, VT Models and Actresses 2014"/>
                <p>MODELS AND ACTRESSES, 2014 <br>Print on Panel 2" x 2" <br>(BLUE detail)</p>
            </a>
        </div>
    </div>
    <!-- row 3 //-->
    <div class="row portfolio-thumbs leading">
        <div class="col-lg-3 col-xs-6">
            <a href="assets/img/portfolio/panel/Models and Actresses Green 2014.jpg">
                <img src="assets/img/portfolio/panel/Models and Actresses Green 2014t.jpg" alt="Eric K. Eickmann Visual Artist Burlington, VT Models and Actresses 2014"/>
                <p>MODELS AND ACTRESSES, 2014 <br>Print on Panel 2" x 2" <br>(GREEN detail)</p>
            </a>
        </div>
        <div class="col-lg-3 col-xs-6">
            <a href="assets/img/portfolio/panel/Models and Actresses Magenta 2014.jpg">
                <img src="assets/img/portfolio/panel/Models and Actresses Magenta 2014t.jpg" alt="Eric K. Eickmann Visual Artist Burlington, VT Models and Actresses 2014"/>
                <p>MODELS AND ACTRESSES, 2014 <br>Print on Panel 2" x 2" <br>(MAGENTA detail)</p>
            </a>
        </div>
        <div class="col-lg-3 col-xs-6">
            <a href="assets/img/portfolio/panel/Models and Actresses Orange 2014.jpg">
                <img src="assets/img/portfolio/panel/Models and Actresses Orange 2014t.jpg" alt="Eric K. Eickmann Visual Artist Burlington, VT Models and Actresses 2014"/>
                <p>MODELS AND ACTRESSES, 2014 <br>Print on Panel 2" x 2" <br>(ORANGE detail)</p>
            </a>
        </div>
        <div class="col-lg-3 col-xs-6">
            <a href="assets/img/portfolio/panel/Models and Actresses Purple 2014.jpg">
                <img src="assets/img/portfolio/panel/Models and Actresses Purple 2014t.jpg" alt="Eric K. Eickmann Visual Artist Burlington, VT Models and Actresses 2014"/>
                <p>MODELS AND ACTRESSES, 2014 <br>Print on Panel 2" x 2" <br>(PURPLE detail)</p>
            </a>
        </div>
    </div>
</div>

Here's the CSS:
.portfolio-thumbs-wrapper-home {
 margin-top: 6em;
 }
.portfolio-thumbs-wrapper {
 margin-top: 2em;
 }
.portfolio-thumbs-wrapper h2 {
display: block;
margin-bottom: 2em;
}
.portfolio-thumbs {
margin-bottom: 2em;
}
.portfolio-thumbs img {
width: 100%;
height: auto;
}

And this is a link to the site and the photo gallery which I'm having issues with: This is an artist's site so features adult content (respectfully, as art), but still, don't look if you can't handle it. www.ericeickmann.com/panel.html

A:

The problem is that you are going from a 4 item row to now a 2 item one and not fixing for any float issues that will arise due to your item's variable height. A quick and easy solution to this is to then clear your floats every two items inside your rows and have this only take place in mobile. You can use the following bootstrap element for this effect:
<div class="clearfix visible-sm"></div>

In your case I can do something like this to fix the grid issue in one of your rows:
<div class="row portfolio-thumbs leading">
  <div class="col-lg-3 col-xs-6">
    <a href="assets/img/portfolio/panel/Lonesome Form 2014.jpg">
      <img src="assets/img/portfolio/panel/Lonesome Form 2014t.jpg" alt="Eric K. Eickmann Visual Artist Burlington, VT Lonesome Form 2014">
      <p>LONESOME FORM, 2014 <br>Acrylic on Panel 10" x 7.5"</p>
    </a>
  </div>
  <div class="col-lg-3 col-xs-6">
    <a href="assets/img/portfolio/panel/Model Nude 2014.jpg">
      <img src="assets/img/portfolio/panel/Model Nude 2014t.jpg" alt="Eric K. Eickmann Visual Artist Burlington, VT Model Nude 2014">
      <p>MODEL NUDE, 2014 <br>Acrylic on Panel 5.5 x 4.25</p>
    </a>
  </div>

  <div class="clearfix visible-sm"></div>

  <div class="col-lg-3 col-xs-6">
    <a href="assets/img/portfolio/panel/Models and Actresses All 2014.jpg">
      <img src="assets/img/portfolio/panel/Models and Actresses All 2014t.jpg" alt="Eric K. Eickmann Visual Artist Burlington, VT Models and Actresses 2014">
      <p>MODELS AND ACTRESSES, 2014 <br>Print on Panel 2" x 2" (each)</p>
    </a>
  </div>
  <div class="col-lg-3 col-xs-6">
    <a href="assets/img/portfolio/panel/Models and Actresses Blue 2014.jpg">
      <img src="assets/img/portfolio/panel/Models and Actresses Blue 2014t.jpg" alt="Eric K. Eickmann Visual Artist Burlington, VT Models and Actresses 2014">
      <p>MODELS AND ACTRESSES, 2014 <br>Print on Panel 2" x 2" <br>(BLUE detail)</p>
    </a>
  </div>
</div>

There is more info on working with the grid, clearing floats and other bootstrap helper classes here:
http://getbootstrap.com/css/#grid-responsive-resets
and here:
http://getbootstrap.com/css/#responsive-utilities
Note that you are using an older version of bootstrap (3.1) so some of the responsive classes are different for you (no -block at the end for visible-sm).

