Bootstrap 13th column is displaying vertically - html

Question

I made a row with 100 columns and each should be as small as possible. But as you can see below the 13th column is acting odd.
all the images and columns are generated using the same code so each height should be the same. I do know the 12 column rule for bootstrap, but I'm okay with it wrapping around at 12 or 40 I dont have a width rule in the application. Also if anyone can help the images are responsive but the column count is not if i shrink the window it goes straight to one column per row instead of say 11 and then 10 and so forth and so on.
<div class="form-horizontal container" id="ActualHallOfLights">
<div class="row">
<div class="thumbnail col-sm-1"> 1:True
<Img alt="True" class="img-responsive" height="50" src="/Images/LightBulbOn.jpg" width="40" />
</div>
<div class="thumbnail col-sm-1"> 2:False
<Img alt="False" class="img-responsive" height="50" src="/Images/LightBulbOff.jpg" width="35" />
</div>
<div class="thumbnail col-sm-1"> 3:True
<Img alt="True" class="img-responsive" height="50" src="/Images/LightBulbOn.jpg" width="40" />
</div>
<div class="thumbnail col-sm-1"> 4:False
<Img alt="False" class="img-responsive" height="50" src="/Images/LightBulbOff.jpg" width="35" />
</div>
<div class="thumbnail col-sm-1"> 5:True
<Img alt="True" class="img-responsive" height="50" src="/Images/LightBulbOn.jpg" width="40" />
</div>
<div class="thumbnail col-sm-1"> 6:False
<Img alt="False" class="img-responsive" height="50" src="/Images/LightBulbOff.jpg" width="35" />
</div>
<div class="thumbnail col-sm-1"> 7:True
<Img alt="True" class="img-responsive" height="50" src="/Images/LightBulbOn.jpg" width="40" />
</div>
<div class="thumbnail col-sm-1"> 8:False
<Img alt="False" class="img-responsive" height="50" src="/Images/LightBulbOff.jpg" width="35" />
</div>
<div class="thumbnail col-sm-1"> 9:True
<Img alt="True" class="img-responsive" height="50" src="/Images/LightBulbOn.jpg" width="40" />
</div>
<div class="thumbnail col-sm-1"> 10:False
<Img alt="False" class="img-responsive" height="50" src="/Images/LightBulbOff.jpg" width="35" />
</div>
<div class="thumbnail col-sm-1"> 11:True
<Img alt="True" class="img-responsive" height="50" src="/Images/LightBulbOn.jpg" width="40" />
</div>
<div class="thumbnail col-sm-1"> 12:False
<Img alt="False" class="img-responsive" height="50" src="/Images/LightBulbOff.jpg" width="35" />
</div>
<div class="thumbnail col-sm-1"> 13:True
<Img alt="True" class="img-responsive" height="50" src="/Images/LightBulbOn.jpg" width="40" />
</div>
<div class="thumbnail col-sm-1"> 14:False
<Img alt="False" class="img-responsive" height="50" src="/Images/LightBulbOff.jpg" width="35" />
</div>
<div class="thumbnail col-sm-1"> 15:True
<Img alt="True" class="img-responsive" height="50" src="/Images/LightBulbOn.jpg" width="40" />
</div>
</div>
</div>

Answer 1

Your images probably vary slightly in height, possibly due to sub-pixel rounding. For this reason, the column elements that contain them also vary. This disrupts float behavior.
One common solution is to set a minimum height on the columns (or the images). Another is to set your images as backgrounds instead, with a size of cover, and use the responsive element to set heights. You could just be sure your images all have exactly the same original size, but that's a fragile approach. Even one faulty image breaks the layout.
In any event, they all need to be the same height.

Answer 2

removed the image tag and added these styles to the div containing the image
.bgLightOn {
background-image: url('/Images/LightBulbOn.jpg');
background-repeat: no-repeat;
background-size: contain;
background-position: bottom;
width: 70px;
height: 110px;
}

Answer 3

As i see in the image, LightBulbOff and LightBulbOn image have slightly difference in height. The height of both images must have same size. Or you may use clearfix class after each 12th image.