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


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


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

Caption <div>
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.


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.



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