Twitter boostrap ensure equal heights of thumbnail boxes

Question

I'm currently developing a site where I am using Twitter Boostrap for the frontend. On the frontpage I have three boxes (thumbnail boxes in Twitter Boostrap terms) which contains an image and some text. The problem, though, is that these boxes can be of different heights depending on either the height of the image and the amount of description text.

My markup is as follows:

<ul class="thumbnails">
    <li class="span4">
        <div class="thumbnail">
            <img src="img/products/1.png" alt="">
            <h3>Thumbnail label</h3>
            <p>Thumbnail caption...</p>
        </div>
    </li>          
    <li class="span4">
        <div class="thumbnail">
            <img src="img/products/2.png" alt="">
            <h3>Thumbnail label</h3>
            <p>Thumbnail caption...</p>
        </div>
    </li>   
    <li class="span4">
        <div class="thumbnail">
            <img src="img/products/3.png" alt="">
            <h3>Thumbnail label</h3>
            <p>Thumbnail caption...</p>
        </div>
    </li>   
</ul>

I have tried with this plugin, instantiating it like this:

<script>
    $().ready(function () {
        // Ensure equal heights on thumbnail boxes
        $('.thumbnail').equalHeights();
    });
</script>

Without any effect :-/

I've also tried the following:

// Ensure equal heights on thumbnail boxes
$('.thumbnail').css({
    'height': $('.thumbnail').height()
});

But then it sets the thumbnail boxes to 90px height.

Does anyone know of a solution to this?

Thanks in advance.

Check the last example in the API for `map()`: http://api.jquery.com/map/. Is that what you want? — Rory McCrossan, Nov 30 '12 at 10:38
Hi Rory, thanks! It actually works (and my other scripts works aswell), but it seems that the script runs before the DOM is loaded, thus setting it to 90px height. I tried to do it in window load, but then the height is set after ths elements are loaded which, to the eye, isn't that pleasant :-/ — bomortensen, Nov 30 '12 at 10:45

score 0 · Accepted Answer · answered Nov 30 '12 at 10:55

0

Change your window.load to document ready. It's a bit faster.

<script>
    $(function(){
        // Ensure equal heights on thumbnail boxes
        $('.thumbnail').equalHeights();
    });
</script>

answered Nov 30 '12 at 10:55

Tim Joyce

4,487
5
34
50

score 0 · Answer 2 · answered Aug 05 '14 at 19:57

Yes, have a solution with CSS only.

HTML:

<ul class="thumbnails">
<li class="span4 thumbnail">
        <img src="img/products/1.png" alt="">
        <h3>Thumbnail label</h3>
        <p>Thumbnail caption...<br/> with 2 lines</p>
    </div>
</li>          
<li class="span4 thumbnail">
        <img src="img/products/2.png" alt="">
        <h3>Thumbnail label</h3>
        <p>Thumbnail caption...<br/> with 2 lines</p>
    </div>
</li>   
<li class="span4 thumbnail">
        <img src="img/products/3.png" alt="">
        <h3>Thumbnail label</h3>
        <p>Thumbnail caption with 1 line...</p>
    </div>
</li>   
<li class="span4 thumbnail">
        <img src="img/products/3.png" alt="">
        <h3>Thumbnail label</h3>
        <p>Thumbnail caption...</p>
    </div>
</li>

CSS

.thumbnail:nth-child(3n+1) {
    clear: left;
}

(In above example, each 3 thumbs it'll break a line. Just configure it in all breakpoints and it'll work fine.`

Twitter boostrap ensure equal heights of thumbnail boxes

2 Answers2

Linked