bootstrap 3 shop layout with side thumbnails

Question

I'm trying a web shop layout consisting in three columns:

| thumb | main image | description |

the thumbs column, contains three images that should be resized exactly to match the main image height. I'm using the img-responsive class but there are some minimal pixel differences when I display this layout on different sizes.

<div class="row">
    <div class="col-md-8">
        <div class="row">
            <div class="col-xs-3" id="prodThumbs">
                <img src="http://placehold.it/170x255" class="img-responsive">
                <img src="http://placehold.it/170x255" class="img-responsive">
                <img src="http://placehold.it/170x255" class="img-responsive">
            </div>
            <div class="col-xs-9">
                <img src="http://placehold.it/534x800" class="img-responsive">
            </div>
        </div>
    </div>
    <div class="col-md-4">
        <div class="row">
            <h3>Price: 40,- €</h3>
            <button type="button" class="btn-default">add to cart</button>
        </div>
    </div>
</div>

here is example http://jsfiddle.net/F6vtb/embedded/result/

Is there a better way to achieve this in bootstrap, so the images are perfectly aligned?

thanks

Answer 1

I think your best bet would just be to use a table instead of trying to use grid-columns. Grid-columns can be a pain to keep the same height.

DEMO