5.9. Thumbnails

Extends Bootstrap thumbnails with fixed-image-height modification which is perfect for media grid listing.

Example

<div class="row">
    <div class="col-xs-6 col-sm-4">
        <div class="thumbnail thumbnail-fixed">
            <a href="#">
                <div class="thumbnail-image">
                    <img src="http://satyr.io/400x300" alt="" />
                </div>
                <div class="caption">
                    <h4 class="thumbnail-title">my-darling.jpg</h4>
                    <small class="text-muted">6378&nbsp;kB</small>
                </div>
            </a>
            <div class="thumbnail-actions">
                <button type="button" class="item-action item-action-danger"><span class="glyphicon glyphicon-trash" aria-hidden="true"></span></button>
            </div>
        </div>
    </div>
    <div class="col-xs-6 col-sm-4">
        <div class="thumbnail thumbnail-fixed">
            <a href="#">
                <div class="thumbnail-image">
                    <img src="http://satyr.io/400x300" alt="" />
                </div>
                <div class="caption">
                    <h4 class="thumbnail-title">my-lovely-darling-with-a-long-name.jpg</h4>
                    <small class="text-muted">6378&nbsp;kB</small>
                </div>
            </a>
            <div class="thumbnail-actions">
                <button type="button" class="item-action item-action-danger"><span class="glyphicon glyphicon-trash" aria-hidden="true"></span></button>
            </div>
        </div>
    </div>
    <div class="col-xs-6 col-sm-4">
        <div class="thumbnail thumbnail-fixed">
            <a href="#">
                <div class="thumbnail-image">
                    <img src="http://satyr.io/400x300" alt="" />
                </div>
                <div class="caption">
                    <h4 class="thumbnail-title">my-darling.jpg</h4>
                    <small class="text-muted">6378&nbsp;kB</small>
                </div>
            </a>
            <div class="thumbnail-actions">
                <button type="button" class="item-action item-action-danger"><span class="glyphicon glyphicon-trash" aria-hidden="true"></span></button>
            </div>
        </div>
    </div>
</div><!-- .row -->