bootstrap 3 responsive grid break with images - html

Question

Probably I'm missing something or have misinterpreted BS documentation, the html below works as expected if I use text instead of images, as I place the images it breaks on xs and sm.
By expected I mean: 1 row 8 columns on >= md, 2 rows 4 columns on sm, 4 rows 2 columns on xs.
On my browsers (Chrome/Firefox) the behavior seems to be:
first row always correct
second row align the first image to the right and break the line (go to the next line)
Any suggestion?
<div class="container">
<div class="row">
<div class="col-xs-6 col-sm-3 col-md-1 text-center">
<img src="http://placehold.it/50x50" />
</div>
<div class="col-xs-6 col-sm-3 col-md-2 text-center">
<span class="stat-title">999</span><br />text
</div>
<div class="col-xs-6 col-sm-3 col-md-1 text-center">
<img src="http://placehold.it/50x50" />
</div>
<div class="col-xs-6 col-sm-3 col-md-2 text-center">
<span class="stat-title">999</span><br />text
</div>
<div class="col-xs-6 col-sm-3 col-md-1 text-center">
<img src="http://placehold.it/50x50" />
</div>
<div class="col-xs-6 col-sm-3 col-md-2 text-center">
<span class="stat-title">999</span><br />text
</div>
<div class="col-xs-6 col-sm-3 col-md-1 text-center">
<img src="http://placehold.it/50x50" />
</div>
<div class="col-xs-6 col-sm-3 col-md-2 text-center">
<span class="stat-title">999</span><br />text
</div>
</div>
</div>

Answer 1

i believe its because the height of your divs is different. the image is 50px while the text is slightly less, so when bootstrap puts them in their columns, it sees that the right column is shorter than the left, so it'll put the next image (2nd) under the 1st text block.
if you do something like this it should work.
*in essence, all you have to do is make sure that the heights of the divs are equal
div.text-center{
min-height: 50px;
}
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-xs-6 col-sm-3 col-md-1 text-center">
<img src="http://placehold.it/50x50" />
</div>
<div class="col-xs-6 col-sm-3 col-md-2 text-center">
<span class="stat-title">999</span><br />text
</div>
<div class="col-xs-6 col-sm-3 col-md-1 text-center">
<img src="http://placehold.it/50x50" />
</div>
<div class="col-xs-6 col-sm-3 col-md-2 text-center">
<span class="stat-title">999</span><br />text
</div>
<div class="col-xs-6 col-sm-3 col-md-1 text-center">
<img src="http://placehold.it/50x50" />
</div>
<div class="col-xs-6 col-sm-3 col-md-2 text-center">
<span class="stat-title">999</span><br />text
</div>
<div class="col-xs-6 col-sm-3 col-md-1 text-center">
<img src="http://placehold.it/50x50" />
</div>
<div class="col-xs-6 col-sm-3 col-md-2 text-center">
<span class="stat-title">999</span><br />text
</div>
</div>
</div>

Answer 2

I think I see what you're experiencing. This is a common issue with BS, actually. What's happening is the fifth column has room under the fourth column to squeeze itself in there. You could add a custom class to the columns to set a min-height and force the fifth column down. In other words, since a new row isn't explicitly defined, any columns greater than 12 will squeeze themselves wherever they can go. You can get around this by defining the min-height on a custom class to equal the height of your tallest element in the row.
I think this is what you're seeing: https://jsfiddle.net/ejutc5bf/
Here's my fix:
HTML:
<divhttps://jsfiddle.net/DTcHh/#update class="container">
<div class="row">
<div class="col-xs-6 col-sm-3 col-md-1 text-center custom">
<img src="http://placehold.it/50x50" />
</div>
<div class="col-xs-6 col-sm-3 col-md-2 text-center custom">
<span class="stat-title">999</span><br />text
</div>
<div class="col-xs-6 col-sm-3 col-md-1 text-center custom">
<img src="http://placehold.it/50x50" />
</div>
<div class="col-xs-6 col-sm-3 col-md-2 text-center custom">
<span class="stat-title">999</span><br />text
</div>
<div class="col-xs-6 col-sm-3 col-md-1 text-center custom">
<img src="http://placehold.it/50x50" />
</div>
<div class="col-xs-6 col-sm-3 col-md-2 text-center custom">
<span class="stat-title">999</span><br />text
</div>
<div class="col-xs-6 col-sm-3 col-md-1 text-center custom">
<img src="http://placehold.it/50x50" />
</div>
<div class="col-xs-6 col-sm-3 col-md-2 text-center custom">
<span class="stat-title">999</span><br />text
</div>
</div>
</div>
CSS:
.custom{
min-height: 100px;
}
Fiddle
*You'll likely want to make your own custom class and apply it to that. If you apply it to a pre-existing class (text-center, for example) it will apply to ALL of those classes if and when they're used in the future.

Answer 3

The images are likely larger than their container div columns. Try this:
img { max-width: 100% }

Answer 4

In order to make your images responsive, you need to use img-responsive class.
<img class="img-responsive" src="http://placehold.it/50x50" />
See http://getbootstrap.com/css/#images