Thumbnail

Create different thumbnail images, which come in various styles and sizes.

Usage

To apply this component, just add the .thumbnail class to an <img> , <a> or <figure> element.


Caption

Add the .caption class to a <div> element to apply a text caption under the image.

Caption <div>
Caption<a>
Caption <figure>

Size modifiers

Apply the .thumbnail-large , .thumbnail-medium , .thumbnail-small or .thumbnail-mini classes to resize images. The Base component is required to make the images responsive by default.

.thumbnail-large
.thumbnail-medium
.thumbnail-small
.thumbnail-mini

You can even scale a thumbnail beyond its proper size, so that it extends to the full width of its parent element. Just add the.thumbnail-expandclass.

.thumbnail-expand

Grid

You can easily create a grid with thumbnails by using the Grid component.