bootstrap thumbnail white space with no reason - css

Question

I have random white space inside my website.
My HTML (Laravel) is build like this:
<ul class="thumbnails" style="max-width: 100%;">
#foreach($img as $image)
<li class="span2 thumbnail">
<div class="overflow-hidden">
<img src="{{ Config::get('app.url') }}/{{ $image }}" />
</div>
</li>
#endforeach
</ul>
This is the output:
And every time I refresh the page, there is another white space.
How can I fix this?

Answer 1

You might want to read up on the grid system to understand why this is happening.
Columns create gutters (gaps between column content) via padding. That padding is offset in rows for the first and last column via negative margin on .rows.
In other words, if you look at bootstrap.css:
.row {
margin-right: -15px;
margin-left: -15px;
}
You can fix your code adding the row class to your <ul> element so you have:
<ul class="thumbnails row">
Or, just add the margin-left and margin-right properties.

Answer 2

am i correct that you want the thumbnails to line up 5 times, than start a new row of 5?
Then you have to build in a counter that closes a row, and start a new row:
Beware of code: i do not know laravel, went true documentation to write this, it could be wrong, main focus here is the idea i am giving you:
<ul class="thumbnails" style="max-width: 100%;">
<?php $i=0 ?>
#foreach($img as $image)
<li class="span2 thumbnail">
<div class="overflow-hidden">
<img src="{{ Config::get('app.url') }}/{{ $image }}" />
</div>
</li>
<?php $i++ ?>
#if ($i === 5)
</ul><ul class="thumbnails" style="max-width: 100%;">
#endif
#endforeach
</ul>
And be sure to read the answer by WEX, about the grid system.