Menu
My thumbnails from bootstrap have different heights to them, and I think that issue might be causing them to not stack properly (see screenshots and fiddle). I think I need to include a min-height for them, but I'm just not able to get it working .. can anyone lend a hand?
Here is the code that I have:
<body>
<div class="container-fluid">
<div class="hidden-phone">
<a href="newBook.php">
<button class="btn btn-large btn-primary" style="float:right; margin-top:30px;" type="button">Add Book</button>
</a>
</div>
<div class="row-fluid">
<div class="span12 well">
<div class="row-fluid">
<ul class="thumbnails">
<li class="span4">
<div class="thumbnail">
<img src="http://placehold.it/320x200" alt="ALT NAME">
<div class="caption">
<h3>Title</h3>
<p>Seller: Me</p>
<p>Email: </p>
<p>Cost: </p>
<p>Condition: </p>
<p align="center">
<a href="#myModal" class="btn btn-primary btn-block" data-toggle="modal">View More information</a>
</p>
</div>
</div>
</li>
<li class="span4">
<div class="thumbnail">
<img src="http://placehold.it/320x200" alt="ALT NAME">
<div class="caption">
<h3>Title</h3>
<span class="label label-warning" style="margin-bottom: 10px;">Book has been sold!</span>
<p>Seller: Me</p>
<p>Email: </p>
<p>Cost: </p>
<p>Condition: </p>
<p align="center">
<a href="#myModal" class="btn btn-primary btn-block" data-toggle="modal">View More information</a>
</p>
</div>
</div>
</li>
<li class="span4">
<div class="thumbnail">
<img src="http://placehold.it/320x200" alt="ALT NAME">
<div class="caption">
<h3>Title</h3>
<p>Seller: Me</p>
<p>Email: </p>
<p>Cost: </p>
<p>Condition: </p>
<p align="center">
<a href="#myModal" class="btn btn-primary btn-block" data-toggle="modal">View More information</a>
</p>
</div>
</div>
</li>
<li class="span4">
<div class="thumbnail">
<img src="http://placehold.it/320x200" alt="ALT NAME">
<div class="caption">
<h3>Title</h3>
<p>Seller: Me</p>
<p>Email: </p>
<p>Cost: </p>
<p>Condition: </p>
<p align="center">
<a href="#myModal" class="btn btn-primary btn-block" data-toggle="modal">View More information</a>
</p>
</div>
</div>
</li>
<li class="span4">
<div class="thumbnail">
<img src="http://placehold.it/320x200" alt="ALT NAME">
<div class="caption">
<h3>Title</h3>
<p>Seller: Me</p>
<p>Email: </p>
<p>Cost: </p>
<p>Condition: </p>
<p align="center">
<a href="#myModal" class="btn btn-primary btn-block" data-toggle="modal">View More information</a>
</p>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</body>
Fiddle: http://jsfiddle.net/Z3VwZ/
screens:
935
asked Feb 24 '26 00:02
No, height of divs is not the issue. Issue is that you must put only three divs with .span4 class in one div with .row-fluid class. And if you want more divs with .span4 you must create new div with .row-fluid class and put those new .span4 divs inside. See Twitter bootstrap official documentation.
For example, this is valid Twitter Bootstrap markup
<div class="row-fluid">
<div class="span4"></div>
<div class="span4"></div>
<div class="span4"></div>
</div>
<div class="row-fluid">
<div class="span4"></div>
<div class="span4"></div>
<div class="span4"></div>
</div>
<div class="row-fluid">
<div class="span12"></div>
</div>
<div class="row-fluid">
<div class="span8"></div>
<div class="span1"></div>
<div class="span3"></div>
</div>
Here is working demo with your code >>> http://jsfiddle.net/Z3VwZ/1/
145
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
