Setting equal height images with twitter bootstrap thumbnails

Using Twitter Bootstrap 2.3.2 I had set up thumbnails rather quickly. Only to discover a few things;

1) The alignment was off on the second row of thumbnails.

2) Image sizes were different.

<div class="row">
	<?php if ( ! empty($dies)): ?>
		<ul class="thumbnails">
			<?php foreach ($dies as $die): ?>
				<li class="span4">
					<div class="thumbnail">
						<?php
						// your image dir here...
						$src = 'http://www.placehold.it/260&text=No+Image';

						$attr = array(
							'src'      => $src,
							'data-src' => $src,
							'class'    => 'media-object',
							'height' => '180',
							'width' => '260'
						);

						echo img($attr);
						?>
						<div class="caption">
							<h3><?php echo ! empty($die->die_number) ? $die->die_number : '&nbsp'; ?></h3>
							<p><?php echo $die->short_description; ?></p>
						</div>
					</div>
				</li>
			<?php endforeach; ?>
		</ul>
	<?php else: ?>
		<div>There are no dies at this time.</div>
	<?php endif; ?>
</div>

Resulted in this…

The alignment technically was not off. The thumbnail left margins were doing exactly what bootstrap was telling them to do. I fixed the alignment by overriding some css in my style.css:

.row-fluid .thumbnails .span2:nth-child(6n+1),
.row-fluid .thumbnails .span3:nth-child(4n+1),
.row-fluid .thumbnails .span4:nth-child(3n+1),
.row-fluid .thumbnails .span6:nth-child(2n+1) {
	margin-left: 0;
}

This pretty much changes the left margin, depending on the span level you have set for the list items. This was not my idea. I got it from stack overflow.

Now for the image height sizing. If any of my images varied in heights, they would automatically fit the width but not the height. So I ended up with the thumbnail divs in the same row, varying. Not the end of the world, but it certainly didn’t look very well when I added the text underneath them. _-__-.

A little bit of jQuery did the trick (once again from stack overflow).

/* set equal height thumbnail images*/
$(document).ready(function(){
	$('.thumbnail img').css({
	    'height': $('.thumbnail img').height()
	});
});

Now the rows all line up, and the image heights are all the same.