CODEWITHSUNDEEP
javascriptcsslayouttwitter-bootstrapweb
Shlomi Schwartz
Shlomi Schwartz

Reputation: 8913

How to create a Bootstrap thumbnails grid

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: screen shot

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

Upvotes: 5

Views: 12493

Answers (3)

Daten
Daten

Reputation: 1

Had same issue, not clean, but a fast workaround was the following:

.row {
   margin-left: 0px !important;
   margin-right: 0px !important;
}

Upvotes: 0

Dan
Dan

Reputation: 1165

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.

Upvotes: 3

Jamie Hutber
Jamie Hutber

Reputation: 28096

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.

Upvotes: 8

Related Questions