Bootstrap Thumbnails

This chapter will explain Bootstrap thumbnails. Most websites need to lay out images, videos, text, etc., in a grid. Bootstrap provides a simple way to do this with thumbnails. The steps to create thumbnails using Bootstrap are as follows: * Add an tag with the class **.thumbnail** around the image. * This adds four pixels of padding and a gray border. * When you hover over the image, an outline of the image is animated. The following example demonstrates the default thumbnail: ## Example

[Try it yourself »](#) The result is shown below: ![Image 1: Thumbnail](#) ## Adding Custom Content Now that we have a basic thumbnail, we can add various HTML content to the thumbnail, such as headings, paragraphs, or buttons. The specific steps are as follows: * Change the tag with the class **.thumbnail** to a

. * Inside this

, you can add anything you want. Since this is a

, we can use the default span-based naming convention to adjust its size. * If you want to group multiple images, place them in an unordered list, and float each list item to the left. The following example demonstrates this: ## Example