How to create a Bootstrap thumbnails grid

Question

I have an unknown number of thumbs to display, here is an example of the HTML rendered:

<div class="row-fluid">
        <ul class="thumbnails">
          <li class="span3">
            <a href="#" class="thumbnail">
              <img data-src="holder.js/260x180" alt="260x180" style="width: 260px; height: 180px;" src="mySrc">
            </a>
          </li>
          <li class="span3">
            <a href="#" class="thumbnail">
              <img data-src="holder.js/260x180" alt="260x180" style="width: 260px; height: 180px;" src="mySrc">
            </a>
          </li><li class="span3">
            <a href="#" class="thumbnail">
              <img data-src="holder.js/260x180" alt="260x180" style="width: 260px; height: 180px;" src="mySrc">
            </a>
          </li><li class="span3">
            <a href="#" class="thumbnail">
              <img data-src="holder.js/260x180" alt="260x180" style="width: 260px; height: 180px;" src="mySrc">
            </a>
          </li><li class="span3">
            <a href="#" class="thumbnail">
              <img data-src="holder.js/260x180" alt="260x180" style="width: 260px; height: 180px;" src="mySrc">
            </a>
          </li>
          <li class="span3">
            <a href="#" class="thumbnail">
              <img data-src="holder.js/260x180" alt="260x180" style="width: 260px; height: 180px;" src="mySrc">
            </a>
          </li>
          <li class="span3">
            <a href="#" class="thumbnail">
              <img data-src="holder.js/260x180" alt="260x180" style="width: 260px; height: 180px;" src="mySrc">
            </a>
          </li>
        </ul>
      </div>

---

Here is the result:

Question : Since I build the UI dynamically, how can I avoid the margin on the second row without creating another <div class="row-fluid">

Update IE8 solution is required

Solution 1

Assuming the width won't change of the LI's parent using :nth-child(4n) should work to target the x element.

.row-fluid li:nth-child(4n) {
    margin: 10px;
    padding: 0;
 }

See the spec for details on how to write formulas for :nth-child().

A very very basic Fiddle displaying it working.

Update

To work with IE8 just use jQuery (assuming you're using it)

$('.row-fluid li:nth-child(4n)').css({'margin':'10px'});

I do believe that should do the trick.

Solution 2

I had a case where the margin was ok to have, but it had to be consistent on all rows.

You could achieve this by adding in a blank <li style="display:none"></li> to the start of the list. That way Bootstrap targets the margin removal on a <li> that isnt shown.

Having a margin may not be acceptable, but I feel this is an elegant solution without the need for mixing style into js.

Comments

[Shlomi Schwartz]

my apologies, I should have state that I need an IE8 solution too. I'll accept the answer if no other solution will pop. Thank you for the reply!

[Shlomi Schwartz]

actually I'm using angularJS without JQ ... but thanks anyway :)

[Sakthivel]

Script works. I had css hack formula for same but it didnt work in IE7,8 and safari.