Why are some images in Bootstrap rows appearing in a checkered pattern?

Question

I am doing a products page using Bootstrap and most of the images appear fine, but the last line on the two bottom rows checker in a smaller screen size.

To let you know what I mean I've included an image here.

Here is the code of one of the rows that are not working right:

<div class= "row">

  <div class="col-sm-6 col-md-3">

  <img src="images/seasonal_1.jpg">

  </div>

  <div class="col-sm-6 col-md-3">

  <img src="images/seasonal_2.jpg">

  </div>

  <div class="col-sm-6 col-md-3">

  <img src="images/seasonal_3.jpg">

  </div>

  <div class="col-sm-6 col-md-3">

  <img src="images/seasonal_4.jpg">

  </div>

</div>

Answer 1

This usually happens when you have some padding or border that is increasing the size of the element.

Grids work on the basis of % so if you have 2 elements that width each equal 50% but then you add something like some padding or a border you are going over a total of 100% and the element is pushed to the next line.

My advice (given I don't have the actual code) would be to review your styles using the browser dev tools to see what styles are being applied when this happens. You should be able to track down the offending property.

Hope this is useful even if not a definitive answer.

Answer 2

So I eventually fixed the problem by making the all the images the exact same size/dimensions (some were a few pixels off). Just thought I'd follow up on this.

Also I later discovered that if you have an extra line of text or two underneath the picture that might throw the pattern off.