Weird bootstrap grid fail?

Question

I'm not sure if I'm doing anything wrong but I'm getting a weird bug in a bootstrap grid when I resize my browser. It happens in a matter of a pixel and stops when I keep resizing. One of the images in the grid gets out of place and goes to the bottom. I'll attach a picture of the fail and another one of the normal.

Does anyone know what this bug is and how to fix it?

this is my code:

<section class="container-fluid">

    <div class="row">
       <div class="col-xs-12"> <img id="imgClickAndChange" src="img.jpg" onclick="changeImage(1)"/> </div>
   </div>

   <div class="row no-pad">
       <div class="col-xs-12 col-md-6 col-lg-4"> 
          <img class="grid" src="img1.jpg"/>
       </div>

       <div class="col-xs-12 col-md-6 col-lg-4"> 
          <img class="grid" src="img2.jpg"/>
       </div>

       <div class="col-xs-12 col-md-6 col-lg-4"> 
          <img class="grid" src="img1.jpg"/>
       </div>
</div>
       <div class="row no-pad">
       <div class="col-xs-12 col-md-6 col-lg-4"> 
          <img class="grid" src="img2.jpg"/>
       </div>

       <div class="col-xs-12 col-md-6 col-lg-4"> 
          <img class="grid" src="img1.jpg"/>
       </div>

       <div class="col-xs-12 col-md-6 col-lg-4"> 
          <img class="grid" src="img.jpg2"/>
       </div>
   </div>

 </section>

Only css I used: Btw it's a customized bootstrap (but the only thing I customized was the min width for a large screen from 1200px to 1900px and removed the grid glutter)

.grid { width: 100%;}

Thank you.

Answer 1

If all the images are the same size, there is no issue:

https://jsbin.com/muzug/1/

https://jsbin.com/muzug/1/edit?html,css,output

Also, not necessary to have the col-xs-12, it will always be 100% under the last min-width class used.

Added a rounding error correction.

CSS:

.row.no-pad img {width:100.1%;}
.row.no-pad [class*="col-"] {padding:0;margin-bottom:-1px}

HTML

 <section class="container-fluid">
    
    
       <div class="row no-pad">
         
           <div class="col-md-6 col-lg-4"> 
              <img src="https://scontent-a-lhr.xx.fbcdn.net/hphotos-xap1/t31.0-8/1617132_1517052665201751_3430332756563801835_o.jpg">
           </div>
    
           <div class="col-md-6 col-lg-4"> 
              <img src="https://scontent-a-lhr.xx.fbcdn.net/hphotos-xap1/t31.0-8/1617132_1517052665201751_3430332756563801835_o.jpg">
           </div>
         
                <div class="col-md-6 col-lg-4"> 
              <img src="https://scontent-a-lhr.xx.fbcdn.net/hphotos-xap1/t31.0-8/1617132_1517052665201751_3430332756563801835_o.jpg">
           </div>
    
           <div class="col-md-6 col-lg-4"> 
              <img src="https://scontent-a-lhr.xx.fbcdn.net/hphotos-xap1/t31.0-8/1617132_1517052665201751_3430332756563801835_o.jpg">
           </div>
    
           <div class="col-md-6 col-lg-4"> 
              <img src="https://scontent-a-lhr.xx.fbcdn.net/hphotos-xap1/t31.0-8/1617132_1517052665201751_3430332756563801835_o.jpg">
           </div>
         
           <div class="col-md-6 col-lg-4"> 
              <img src="https://scontent-a-lhr.xx.fbcdn.net/hphotos-xap1/t31.0-8/1617132_1517052665201751_3430332756563801835_o.jpg">
           </div>
    
      </div>
   </div>

Answer 2

With Bootstrap, try applying the class img-responsive to your images to ensure they never exceed 100% width of their parent.

<img class="img-responsive" src="img1.jpg"/>

Documentation: http://getbootstrap.com/css/#images