html - Bootstrap Website Images Do Not Line Up Perfectly -

this bootstrap-based website artist has tiling photo galleries. i've noticed great except on screens below 768 pixels. then, images tile gaps in between them. seems happen when text box below image exceeds 3 lines. notice of image rectangular have issue (the photo galleries seem work best square images) image widths same shouldn't issue.

how can remedy galleries tile regardless of amount of text under photos, , regardless of image height?

this code 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 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 , actresses 2014.jpg">                 <img src="assets/img/portfolio/panel/models , actresses 2014t.jpg" alt="eric k. eickmann visual artist burlington, vt models , actresses 2014"/>                 <p>models , 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 , actresses blue 2014.jpg">                 <img src="assets/img/portfolio/panel/models , actresses blue 2014t.jpg" alt="eric k. eickmann visual artist burlington, vt models , actresses 2014"/>                 <p>models , 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 , actresses green 2014.jpg">                 <img src="assets/img/portfolio/panel/models , actresses green 2014t.jpg" alt="eric k. eickmann visual artist burlington, vt models , actresses 2014"/>                 <p>models , 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 , actresses magenta 2014.jpg">                 <img src="assets/img/portfolio/panel/models , actresses magenta 2014t.jpg" alt="eric k. eickmann visual artist burlington, vt models , actresses 2014"/>                 <p>models , 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 , actresses orange 2014.jpg">                 <img src="assets/img/portfolio/panel/models , actresses orange 2014t.jpg" alt="eric k. eickmann visual artist burlington, vt models , actresses 2014"/>                 <p>models , 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 , actresses purple 2014.jpg">                 <img src="assets/img/portfolio/panel/models , actresses purple 2014t.jpg" alt="eric k. eickmann visual artist burlington, vt models , actresses 2014"/>                 <p>models , actresses, 2014 <br>print on panel 2" x 2" <br>(purple detail)</p>             </a>         </div>     </div> </div> 

here's 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 link site , photo gallery i'm having issues with: artist's site features adult content (respectfully, art), still, don't if can't handle it. www.ericeickmann.com/panel.html

the problem going 4 item row 2 item 1 , not fixing float issues arise due item's variable height. quick , easy solution clear floats every 2 items inside rows , have take place in mobile. can use following bootstrap element effect:

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

in case can fix grid issue in 1 of 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 , actresses 2014.jpg">       <img src="assets/img/portfolio/panel/models , actresses 2014t.jpg" alt="eric k. eickmann visual artist burlington, vt models , actresses 2014">       <p>models , 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 , actresses blue 2014.jpg">       <img src="assets/img/portfolio/panel/models , actresses blue 2014t.jpg" alt="eric k. eickmann visual artist burlington, vt models , actresses 2014">       <p>models , actresses, 2014 <br>print on panel 2" x 2" <br>(blue detail)</p>     </a>   </div> </div> 

there more info on working grid, clearing floats , other bootstrap helper classes here:

http://getbootstrap.com/css/#grid-responsive-resets

and here:

http://getbootstrap.com/css/#responsive-utilities

note using older version of bootstrap (3.1) of responsive classes different (no -block @ end visible-sm).